文章/答案/技术大牛

发布

社区首页 >问答首页 >带setTimeout延迟无限循环的香草Javascript信息滴答器

问带setTimeout延迟无限循环的香草Javascript信息滴答器
EN

Stack Overflow用户

提问于 2021-02-15 10:16:05

回答 3查看 379关注 0票数 0

我试图使用纯普通的JS (没有jQuery等)显示一个信息滴答器。

我有一个div <div class="postcode-panel"></div>，它的一些文字写着：

XXX的最新信息-这将显示3秒

这个div然后消失在视野之外，并显示下一个div <div class="rating-panel"></div>，文本中写着：

评级5.4 -这将显示15秒。

一旦div .rating-panel被查看了15秒，那么第一个div .postcode-panel就会返回并显示3秒，然后就会无限循环。我用CSS控制淡出动画，但我很难让所有不同的超时在JS中工作。

更新:我已经成功地更新了我的代码以使代码显示和隐藏，但我无法在正确的时间内将其提交给它。

这是一个JS Fiddle。

下面是我的密码

function postcode () {
        var postcodePanel = document.querySelector(".postcode-panel");
        var ratingPanel = document.querySelector(".rating-panel");
        var activeClass = 'active';

        function start() {

            setTimeout(function() {
                

                setTimeout(function(){
                    postcodePanel.classList.remove(activeClass);
                    ratingPanel.classList.add(activeClass);
                }, 3000);
                
                setTimeout(function(){
                    start();
                }, 15000);
                postcodePanel.classList.add(activeClass);
                ratingPanel.classList.remove(activeClass);
                
            },100);
        }

        start();
    }
    window.addEventListener('load', postcode);

.info-panel {
    position:relative;
    background:blue;
    color:white;
    padding:20px;
    font-size:20px;
}


.postcode-panel {
    display:block;
    position:absolute;
    opacity: 0;
}

.postcode-panel.active {
    animation:ticker-pc 3s ;
}

.rating-panel {
    opacity: 0;
}

.rating-panel.active {
    animation:ticker-rr 12s ;
}

@keyframes ticker-pc {
    0% {
        opacity: 0;
        -webkit-transform:translateY(30px);
        transform:translateY(30px);
    }

    10% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    50% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    90% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform:translateY(-30px);
        transform:translateY(-30px);
    }
}

@keyframes ticker-rr {
    0% {
        opacity: 0;
        -webkit-transform:translateY(30px);
        transform:translateY(30px);
    }

    2% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    50% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    97% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform:translateY(-30px);
        transform:translateY(-30px);
    }
}

<div class="info-panel">
  <div class="postcode-panel active">
    <span class="latest-info">
      Latest information for
      <span class="postcode-info">
        XXX
      </span>
    </span>
  </div>
  <div class="rating-panel">
    <span class="rating">
      Rating <span class="score">5.4</span>
    </span>
  </div>
</div>

javascript

html

settimeout

timing

回答 3

Stack Overflow用户

发布于 2021-02-15 16:45:27

为此，您并不特别需要JavaScript。你可以有两个动画，就像你现在做的一样，但都是持续18秒，并且百分比设定好了，相关的文本显示时间为3秒或15秒。

你可以在关键帧中得到很多很好的控制，你可能喜欢玩百分比来得到你想要的东西，但是不需要JS来运行你的动画，你应该会发现用户的GPU被调用并为你工作。

    .info-panel {
        position:relative;
        background:blue;
        color:white;
        padding:20px;
        font-size:20px;
    }


    .postcode-panel {
        display:block;
        position:absolute;
        opacity: 0;
        animation:ticker-pc 18s infinite;
        animation-fill-mode: forwards;
    }

    .rating-panel {
        opacity: 0;
        animation:ticker-rr 18s infinite;
        animation-fill-mode: forwards;
    }

    @keyframes ticker-pc {
        0% {
            opacity: 0;
            -webkit-transform:translateY(30px);
            transform:translateY(30px);
        }
        
        1.66666% {/* gets into view at full opacity after 0.3seconds */
            opacity: 1;
            -webkit-transform:translateY(0);
            transform:translateY(0);
         }
         16.66666% {/* stays there for 3 seconds - 0.3 seconds */
            opacity: 1;
            -webkit-transform:translateY(0);
            transform:translateY(0);
         }

        18.33332% {/* goes out at the top and fades away after 0.3 seconds */
            opacity: 0;
            -webkit-transform:translateY(-30px);
            transform:translateY(-30px);
        }

        100% {
            opacity: 0;
            -webkit-transform:translateY(-30px);
            transform:translateY(-30px);
        }
    }

    @keyframes ticker-rr {
        0% {
            opacity: 0;
            -webkit-transform:translateY(30px);
            transform:translateY(30px);
        }

        16.6667% { /* wait for 3 seconds */
            opacity: 0;
            -webkit-transform:translateY(30px);
            transform:translateY(30px);
        }
        18.33332% {/* get into view at full opacity after 0.3seconds */
            opacity: 1;
            -webkit-transform:translateY(0);
            transform:translateY(0);
         }
        98.33334% {/* stay in full view for rest of time -0.3 seconds */
            opacity: 1;
            -webkit-transform:translateY(0);
            transform:translateY(0);
        }
        
        100% {
            opacity: 0;
            -webkit-transform:translateY(-30px);
            transform:translateY(-30px);
        }
    }

<div class="info-panel">
    <div class="postcode-panel">
        <span class="latest-info">
          Latest information for
          <span class="postcode-info">
            XXX
          </span>
        </span>
      </div>
      <div class="rating-panel">
        <span class="rating">
          Rating <span class="score">5.4</span>
        </span>
      </div>
    </div>

票数 1

Stack Overflow用户

发布于 2021-02-15 13:14:24

你用setTimeout有点不准确。我已经提供了一个使用承诺的解决方案，它的可读性更强。工作小提琴：https://jsfiddle.net/jdc91xt/73dchfax/23/

function postcode() {
  var postcodePanel = document.querySelector(".postcode-panel");
  var ratingPanel = document.querySelector(".rating-panel");
  var activeClass = 'active';
  let elapsedTime = new Date().getTime();

  function showPostCodePanel() {
    let currentTime = new Date().getTime();
    console.log("showing postcode panel after ms", currentTime - elapsedTime)
    elapsedTime = currentTime
    postcodePanel.classList.add(activeClass);
    ratingPanel.classList.remove(activeClass);
  }

  function showRatingPanel() {
    let currentTime = new Date().getTime();
    console.log("showing postcode panel after ms", currentTime - elapsedTime)
    elapsedTime = currentTime
    postcodePanel.classList.remove(activeClass);
    ratingPanel.classList.add(activeClass);
  }

  function start() {
    showPostCodePanel()

    let wait3Seconds = new Promise((res) => setTimeout(res, 3000));
    wait3Seconds.then(() => {
      showRatingPanel()
      let wait15Seconds = new Promise((res) => setTimeout(res, 15000));
      wait15Seconds.then(() => {

        start();
      });

    })

  }
  start();
}
window.addEventListener('load', postcode);

如果您检查控制台，您将看到几乎准确的记录时间:)

票数 0

Stack Overflow用户

发布于 2021-02-15 13:18:02

下面是一个javascript代码，用于显示第一个div (3秒)和下一个div(15秒)，然后重复此代码。这里的解决方案纯粹是基于javascript的，所以我已经删除了css相关的动画。

Javascript代码->

function postcode () {
        var postcodePanel = document.querySelector(".postcode-panel");
        var ratingPanel = document.querySelector(".rating-panel");
        var activeClass = 'active';
        
        
        
        function next(timer){
            alert("in next after 15 sec")
            postcodePanel.style.display = "none";
            ratingPanel.style.display = "block";
            setTimeout(function(){
                 seq();
                }, timer);
        }
        
        function seq(){
                postcodePanel.style.display = "block";
                ratingPanel.style.display = "none";
                setTimeout(function(){
                next(15000)
                },3000)
        
        }
        seq();
}
    window.addEventListener('load', postcode);

jsfiddle链接->

https://jsfiddle.net/4ur5dpoa/1/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66206172

复制

相似问题

问带setTimeout延迟无限循环的香草Javascript信息滴答器
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带setTimeout延迟无限循环的香草Javascript信息滴答器EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带setTimeout延迟无限循环的香草Javascript信息滴答器
EN