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

【问题标题】：Hide and unhide a text after 6 seconds in a infinite loop (Html)在无限循环中隐藏和取消隐藏文本 6 秒后 (Html)
【发布时间】：2017-05-14 12:47:36
【问题描述】：

您好，我已经创建了这个脚本来在 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>

【问题讨论】：

标签： html loops text hide show

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

您可以使用classList上的切换功能来做到这一点

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

setInterval(hide, 6000, 'xhide');

.hidden {
  display: none;
}

&lt;h1 id="xhide"&gt;Hello World&lt;/h1&gt;

【讨论】：