在 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

试试这个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 2

您可以根据需要尝试更新的代码：

<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 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>

在 6 秒后无限循环隐藏和取消隐藏文本 (Html)

Hide and unhide a text after 6 seconds in a infinite loop (Html)

html

text

loops

show

hide