亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用隨機計時功能顯示/隱藏 div

如何使用隨機計時功能顯示/隱藏 div

泛舟湖上清波郎朗 2023-12-14 16:37:37
我想制作一個小故障動畫視頻。我用了兩個視頻來解決這個問題。一個完全出問題了,我只想讓她通過具有一定時間范圍的隨機計時功能隨機出現或消失。如何完成或重新編碼這一小段 Javascript?我只需要以隨機的隱藏時間進行顯示/隱藏...顯示最多 5 秒,隱藏在 20 秒到 120 秒之間請看一下代碼:setTimeout(function(){        document.getElementById('Video1').style.display = 'none';    }, 3000); // 10000ms = 10 seconds<html><head></head><body><div class="Video1" id="Video1" name="Video1">Video1</div><div class="Video2" id="Video2" name="Video2">Video2</div></body></html>
查看完整描述

2 回答

?
慕標琳琳

TA貢獻1830條經驗 獲得超9個贊

遞歸將調用 setTimeout 并切換 div 的外觀。


Video1 將每隔 5 秒播放一次。一旦關閉,它將在 20-120 [s] 間隔內保持這種狀態,并且這種情況將無限期地重復。


function callTimeout(isOpen, time) {

  setTimeout(function() {

    if (isOpen) {

      document.getElementById('Video1').style.display = 'none';

      time = (Math.floor(Math.random() * 120) + 20) * 1000;

    } else {

      document.getElementById('Video1').style.display = '';

      time = Math.floor(Math.random() * 6) * 1000;

    }

    isOpen = !isOpen;

    callTimeout(isOpen, time);

  }, time);

}


callTimeout(true, Math.floor(Math.random() * 6) * 1000)

<html>


  <head></head>


  <body>

    <div class="Video1" id="Video1" name="Video1">Video1</div>

    <div class="Video2" id="Video2" name="Video2">Video2</div>

  </body>


</html>


查看完整回答
反對 回復 2023-12-14
?
12345678_0001

TA貢獻1802條經驗 獲得超5個贊

非常好,非常感謝尤金。

我修改了參數以使其更加動態。它太慢了,無法產生故障/無故障效果。


        function callTimeout(isOpen, time) {

  setTimeout(function() {

    if (isOpen) {

      document.getElementById('Video1').style.display = 'none';

      time = (Math.floor(Math.random() * 4) + 1) * 1000;

    } else {

      document.getElementById('Video1').style.display = '';

      time = Math.floor(Math.random() * 2) * 1000;

    }

    isOpen = !isOpen;

    callTimeout(isOpen, time);

  }, time);

}


callTimeout(true, Math.floor(Math.random() * 3) * 1000)

<div class="Video1" id="Video1" name="Video1">Video1</div>

<div class="Video2" id="Video2" name="Video2">Video2</div>


查看完整回答
反對 回復 2023-12-14
  • 2 回答
  • 0 關注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號