Скрыть и показать текст через 6 секунд в бесконечном цикле (Html)

Question

Привет, я создал этот скрипт, чтобы скрыть текст через 6 секунд. Но я хочу, чтобы текст снова появлялся и снова исчезал до бесконечности каждые 6 секунд как я могу создать такой HTML-скрипт?

<h1 style="text-align: left;" id="xhide">Hello World</h1> 
 

 
<script type="text/javascript"> 
 
function hide(id) { 
 
    d= document.getElementById(id) 
 
    d.setAttribute('style','display:none;') 
 
} 
 
setTimeout(function() { 
 
    hide('xhide') 
 
}, 6000); 
 
</script>

Answer 1

Вы можете попробовать обновленный код в соответствии с вашими потребностями:

<h1 style="text-align: left;" id="xhide">Hello World</h1> 
 

 
<script type="text/javascript"> 
 
var flag=true; 
 
function hide(id) { 
 
    d= document.getElementById(id); 
 
    d.setAttribute('style','display:none;'); 
 
} 
 

 
function show(id) { 
 
    d= document.getElementById(id) 
 
    d.setAttribute('style','display:block;') 
 
} 
 
    
 
setInterval(function() { 
 
    if(flag) { 
 
     show('xhide'); 
 
     flag=false; 
 
    } else { 
 
     hide('xhide'); 
 
     flag=true; 
 
    } 
 
}, 6000); 
 
</script>

Answer 2

попробовать это blink element

<script type="text/javascript"> 
    function blink() { 
    var blinks = document.getElementsByTagName('blink'); 
    for (var i = blinks.length - 1; i >= 0; i--) { 
     var s = blinks[i]; 
     s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible'; 
    } 
    window.setTimeout(blink, 6000); 
    } 
    if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false); 
    else if (window.addEventListener) window.addEventListener("load", blink, false); 
    else if (window.attachEvent) window.attachEvent("onload", blink); 
    else window.onload = blink; 
</script> 
<blink>Text to blink here</blink> 

Answer 3

Следующий код скроет текст и отобразит его с интервалом в 6 секунд.

var textshown = false; 
 

 
$(document).ready(function() { 
 
    setInterval(function(){ 
 
    if(textshown == false) { 
 
     $('#xhide').show(); 
 
     textshown = true; 
 
    } else { 
 
     $('#xhide').hide(); 
 
     textshown = false; 
 
    } 
 
    }, 6000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 style=" text-align: left; " id="xhide">Hello World</h1>

Answer 4

Вы можете сделать это с помощью функции переключения на classList

function hide(elementId) { 
 
    document.getElementById(elementId).classList.toggle('hidden'); 
 
} 
 

 
setInterval(hide, 6000, 'xhide');

.hidden { 
 
    display: none; 
 
}

<h1 id="xhide">Hello World</h1>