Javascript 每10秒停止一个选框5秒

我想创建一个刚开始的选框，但是每10秒，选框将停止5秒，然后再重新开始

我该怎么做

我只创建了一个计时器，在5秒后停止字幕：

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

函数startoop（）{
setInterval（“doSomething（）”，5000）；}
函数doSomething（）{
document.getElementById（'myMarquee'）.stop（）；}

HTML

这是一个大帐篷。

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

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

HTML

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

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");
});​

$（函数（）{
var txt=$（“#mytext”）；
bind（'scroll'，函数（）{
var el=$（本）；
//滚动状态机
var scrollState=el.data（“scrollState”）| | 0；
el.数据（“滚动状态”，（滚动状态+1）%4）；
开关（滚动状态）{
案例0://初始等待
el.css（{左：0}）；
el.show（）；
setTimeout（函数（）{
el.触发器（“滚动”）；
}, 5000);
打破
案例1://开始滚动
var delta=el.parent（）.width（）-el.width（）；
if（δ<0）{
动画（{left:delta}，2000，“线性”，函数（）{
el.触发器（“滚动”）；
});
}
打破
案例2://淡出前的延迟
setTimeout（函数（）{
el.触发器（“滚动”）；
}, 2000);
打破
案例3://淡出
el.衰减（“慢”，功能（）{
el.触发器（“滚动”）；
});
打破
}
}).触发（“滚动”）；
});​

---

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

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

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

HTML

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

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");
});​

$（函数（）{
var txt=$（“#mytext”）；
bind（'scroll'，函数（）{
var el=$（本）；
//滚动状态机
var scrollState=el.data（“scrollState”）| | 0；
el.数据（“滚动状态”，（滚动状态+1）%4）；
开关（滚动状态）{
案例0://初始等待
el.css（{左：0}）；
el.show（）；
setTimeout（函数（）{
el.触发器（“滚动”）；
}, 5000);
打破
案例1://开始滚动
var delta=el.parent（）.width（）-el.width（）；
if（δ<0）{
动画（{left:delta}，2000，“线性”，函数（）{
el.触发器（“滚动”）；
});
}
打破
案例2://淡出前的延迟
setTimeout（函数（）{
el.触发器（“滚动”）；
}, 2000);
打破
案例3://淡出
el.衰减（“慢”，功能（）{
el.触发器（“滚动”）；
});
打破
}
}).触发（“滚动”）；
});​

---

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

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

函数stopRunning（）{
document.getElementById（'myMarquee'）.stop（）；
设置间隔（“开始耳轴转动（）”，5000）；
}
功能启动耳轴（）{
document.getElementById（'myMarquee'）.start（）；
setInterval（“stopRunning（）”，10000）；
}
//启动循环并不需要函数，只需调用startRunning（）；
星形耳轴（）；

---

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

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

函数stopRunning（）{
document.getElementById（'myMarquee'）.stop（）；
设置间隔（“开始耳轴转动（）”，5000）；
}
功能启动耳轴（）{
document.getElementById（'myMarquee'）.start（）；
setInterval（“stopRunning（）”，10000）；
}
//启动循环并不需要函数，只需调用startRunning（）；
星形耳轴（）；

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

尝试以下操作：

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

请参见运行于

尝试以下操作：

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

---

请参见在

处运行以实现每10秒一次的

，字幕将停止5秒，然后字幕再次启动

您需要一些类似的逻辑。我使用了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>

var步骤=1；//字幕在加载时运行
函数startoop（）
{
设置间隔（“doSomething（）”，5000）；
}
函数doSomething（）
{
如果（步骤==0）{
//从选框停止到现在已经过了5秒
document.getElementById（'myMarquee'）.start（）；
步骤=1；
}
其他的
{
如果（步骤==1）{
//从选框开始已经过了5秒
步骤=2；//停止前再延迟5秒
}
其他的
import { Component, OnInit , ElementRef, ViewChild} from '@angular/core';

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

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

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