javascript 每 10 秒停止跑马灯 5 秒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13468441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop a marquee 5 seconds for every 10 seconds
提问by Chin
I want to create an marquee that start at first, but every 10 seconds, the marquee will stop for 5 seconds before the marquee start again.
我想创建一个首先开始的选取框，但每 10 秒，选取框将在选取框再次开始之前停止 5 秒。
How can I do that?
我怎样才能做到这一点？
I only manage to create a timer that stop the marquee after 5 seconds :
我只设法创建了一个计时器，在 5 秒后停止选取框：
<script>
function startLoop() {
setInterval( "doSomething()", 5000 ); }
function doSomething() {
document.getElementById('myMarquee').stop(); }
</script>
HTML
HTML
<body onload="startLoop();">
<marquee direction="right" id="myMarquee">This is a marquee.</marquee>
</body>
回答by huysentruitw
A few days ago I needed something similar to your problem. I soon figured out that marquee is not a standard element, so you can't use it in cross-browser solutions.
几天前，我需要一些与您的问题类似的东西。我很快发现 marquee 不是标准元素，因此您不能在跨浏览器解决方案中使用它。
I have extracted the animation part, based on jQuery, I used in my solution, you can see the effect in this jsFiddle
我已经提取了动画部分，基于jQuery，我在我的解决方案中使用，你可以在这个jsFiddle中看到效果
HTML
HTML
<div id="container">
<div id="mytext">
this is a simple text to test custom marquee
</div>
</div>?
CSS
CSS
#container
{
display: inline-block;
background-color: #cccccc;
width: 100px;
height: 100px;
overflow: hidden;
}
#mytext
{
display: inline-block;
position: relative;
white-space: nowrap;
}
?
JavaScript
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");
});?
It doesn't do exaclty the same as your requirement, but if you read the code and make some changes to the state-machine, you will get it working :)
它与您的要求并不完全相同，但是如果您阅读代码并对状态机进行一些更改，您将使其正常工作:)
回答by Cerbrus
If you want to keep using the marquee, this should work (In browsers that support the marquee):
如果您想继续使用选取框，这应该可以工作（在支持选取框的浏览器中）：
<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>
This will make the marquee start running, stop after 10 seconds, start again after 5, and repeat.
这将使跑马灯开始运行，10 秒后停止，5 秒后再次启动，然后重复。
回答by Alex Pacurar
try this:
试试这个：
var myMarquee = document.getElementById('myMarquee');
run();
function run() {
setTimeout(function() {
myMarquee.stop();
setTimeout(function(){
myMarquee.start();
run();
},5000);
},10000);
}
see it run at http://jsfiddle.net/gjwYh/
回答by Sami
To implement every 10 seconds, the marquee will stop for 5 seconds before the marquee start againYou need some logic like. I have used step variable to control the progress. Hope its clear
要实现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. I have also added a timer in a div which will give you ease in checking the behavior of stop and start against time
查看它在 Jsfiddle 上的工作。我还在一个 div 中添加了一个计时器，它可以让您轻松检查停止和启动的行为。
回答by Abhay
if you want to apply same in angular then you do like this
如果你想在 angular 中应用相同的，那么你就喜欢这样
import { Component, OnInit , ElementRef, ViewChild} from '@angular/core';
write this under class
在课下写这个
@ViewChild('myname', {static: false}) myname:ElementRef;
to start the loop write this under ngOnInit
开始循环在 ngOnInit 下写这个
setTimeout(()=>{ //<<<--- using ()=> syntax
this.startRunning()
console.log("aaa")
}, 1000);
}, 1000);
place this code outside of ngOnInit
将此代码放在 ngOnInit 之外
startRunning() {
setInterval(() =>{
this.myname.nativeElement.stop();
setTimeout(() =>{
this.myname.nativeElement.start();
console.log("start")
},2000)
console.log("stop")
}, 4000);
}
}
