Question

我想创建一个首先开始的选框，但每隔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>

Answer 1

前几天我需要类似你问题的东西。我很快发现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");
});

它并不像你的要求那样做，但如果你阅读代码并对状态机进行一些更改，你就可以使它工作：）

Answer 2

如果你想继续使用选框，这应该可行（在支持选框的浏览器中）：

<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之后再次开始，然后重复。

Answer 3

试试这个：

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

看它在http://jsfiddle.net/gjwYh/

运行

Answer 4

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

Check Out its Working Here on Jsfiddle。我还在div中添加了一个计时器，它可以让你轻松检查停止和开始时间的行为

Answer 5

如果您想以相同的角度应用，那么您确实会喜欢

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

}

每隔10秒钟停止一个选框5秒

5 个答案: