0

我想创建一个首先开始的选取框，但每隔 10 秒，选取框将在重新开始之前停止 5 秒。

我怎样才能做到这一点？

我只设法创建一个在 5 秒后停止选取框的计时器：

<script>
    function startLoop() {
    setInterval( "doSomething()", 5000 ); }
    function doSomething() {
    document.getElementById('myMarquee').stop(); }
</script>

HTML

<body onload="startLoop();">
   <marquee direction="right" id="myMarquee">This is a marquee.</marquee>
</body>
4

5 回答 5

3

几天前，我需要与您的问题类似的东西。我很快发现 marquee 不是标准元素，所以你不能在跨浏览器解决方案中使用它。

我已经提取了动画部分，基于jQuery，我在我的解决方案中使用，你可以在这个jsFiddle中看到效果

HTML

<div id="container">
    <div id="mytext">
        this is a simple text to test custom marquee
    </div>
</div>​

CSS

#container
{
    display: inline-block;
    background-color: #cccccc;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
#mytext
{
    display: inline-block;
    position: relative;
    white-space: nowrap;
}
​

JavaScript

$(function() {
    var txt = $("#mytext");
    txt.bind('scroll', function () {
        var el = $(this);
        // Scroll state machine
        var scrollState = el.data("scrollState") || 0;
        el.data("scrollState", (scrollState + 1) % 4);
        switch (scrollState) {
            case 0: // initial wait
                el.css({ left: 0 });
                el.show();
                window.setTimeout(function () {
                    el.trigger("scroll");
                }, 5000);
                break;
            case 1: // start scroll
                var delta = el.parent().width() - el.width();
                if (delta < 0) {
                    el.animate({ left: delta }, 2000, "linear", function () {
                        el.trigger("scroll");
                    });
                }
                break;
            case 2: // delay before fade out
                window.setTimeout(function () {
                    el.trigger("scroll");
                }, 2000);
                break;
            case 3: // fade out
                el.fadeOut("slow", function () {
                    el.trigger("scroll");
                });
                break;
        }
    }).trigger("scroll");
});​

它与您的要求不完全相同，但是如果您阅读代码并对状态机进行一些更改，您将使其正常工作:)

于 2012-11-20T07:46:52.273 回答
0

如果您想继续使用选取框，这应该可以工作（在支持选取框的浏览器中）：

<script>
    function stopRunning() {
        document.getElementById('myMarquee').stop();
        setInterval("startRunning()", 5000);
    }
    function startRunning() {
        document.getElementById('myMarquee').start();
        setInterval("stopRunning()", 10000);
    }

    //You don't really need a function to start the loop, you can just call startRunning();
    startRunning();
</script>

这将使选取框开始运行，10 秒后停止，5 秒后再次启动，然后重复。

于 2012-11-20T07:57:43.387 回答
0

要实现every 10 seconds, the marquee will stop for 5 seconds before the marquee start again您需要一些逻辑，例如。我使用 step 变量来控制进度。希望它清楚

<script>
var step = 1; // marquee is run on load time
function startLoop()
{
    setInterval("doSomething()", 5000 );
}
function doSomething()
{
    if (step == 0) {
        // 5 seconds are passed since marquee stopped
        document.getElementById('myMarquee').start();
        step = 1;
    }
    else
    {
        if (step == 1) {
            // 5 seconds are passed since marquee started
            step = 2; // Just delay of another 5 seconds before stop
        }
        else
        {
            if (step == 2) {
                // 10  seconds are passed since marquee started
                document.getElementById('myMarquee').stop();
                step = 0;
            }
        }
    }              
}
</script>

查看它在 Jsfiddle 上的工作。我还在 div 中添加了一个计时器，它可以让您轻松检查停止和启动的行为

于 2012-11-20T08:48:47.063 回答
0

尝试这个：

var myMarquee = document.getElementById('myMarquee'); 
run();
function run() {
    setTimeout(function() {
        myMarquee.stop();
        setTimeout(function(){
            myMarquee.start();
            run();    
        },5000);   
    },10000);
}

看到它在http://jsfiddle.net/gjwYh/上运行

于 2012-11-20T07:59:47.953 回答
0

如果你想在角度上应用相同的，那么你会这样做

import { Component, OnInit , ElementRef, ViewChild} from '@angular/core';

在课下写这个

@ViewChild('myname', {static: false}) myname:ElementRef;

开始循环在 ngOnInit 下写这个

setTimeout(()=>{    //<<<---    using ()=> syntax
  this.startRunning()
  console.log("aaa")

}, 1000);

将此代码放在 ngOnInit 之外

startRunning() {
setInterval(() =>{
  this.myname.nativeElement.stop();
  setTimeout(() =>{
    this.myname.nativeElement.start();
    console.log("start")
  },2000) 
          console.log("stop")
}, 4000);

}

于 2020-01-05T04:09:51.467 回答