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

数日前、私はあなたの問題に似たものが必要でした。マーキーは標準的な要素ではないことがすぐにわかりました。そのため、クロスブラウザーソリューションでは使用できません。

ソリューションで使用した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は次のようなロジックが必要です。ステップ変数を使用して進行状況を制御しました。その明確な希望

<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でのWorkingHereをチェックしてください。また、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 に答える