滾動(dòng)條和跑馬燈

發(fā)布時(shí)間：2020-07-07 19:12:05 來源：網(wǎng)絡(luò) 閱讀：451 作者：匯天下豪杰欄目：開發(fā)技術(shù)

1、其他函數(shù)

obj = setInterval('函數(shù)名稱', 毫秒數(shù)); clearInterval(obj); --->這就相當(dāng)于一個(gè)定時(shí)器；

obj = setTimeout('函數(shù)名稱', 毫秒數(shù)); clearTimeout(obj);

2、滾動(dòng)條

!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>頁面一</title>
        
    </head>

    <body>
        <hr/>
        <div style = 'width:500px;background-color:#ddd'>
            <div id = 'process' style = 'width:10%;height:10px;background-color:green;'></div>
        </div>
        <script type = 'text/javascript'>
/*            window.prb = 10;
            
            function Foo(){
                var id = document.getElementById('process');
                window.prb += 10;
                if(window.prb > 100){
                    clearInterval(window.interval);
                }else{
                    id.style.width = window.prb + '%';
                }
                
            }
            window.interval = setInterval('Foo()', 500);  //設(shè)置定時(shí)器
*/            
            window.prb = 10;
            
            function Foo(){
                var id = document.getElementById('process');
                window.prb += 10;
                if(window.prb > 100){
                    clearTimeout(window.interval);
                }else{
                    id.style.width = window.prb + '%';
                }
                
            }
            window.interval = setTimeout('Foo()', 500);  
            
        </script>
    </body>
</html>

運(yùn)行結(jié)果

滾動(dòng)條和跑馬燈

3、×××燈

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>歡迎上級(jí)領(lǐng)導(dǎo)來校視察&nbsp;&nbsp;</title>
    </head>
        
    <body> 
        <input type = 'button' value = '關(guān)掉' onclick = 'stop();'/>
        <script type = 'text/javascript'>
            function Go(){
                var content = document.title;   //DOM獲得標(biāo)簽的內(nèi)容
                var firstChar = content.charAt(0);
                var sub = content.substring(1, content.length);
                
                document.title = sub + firstChar;
            }
            
            interval = setInterval('Go()', 200);
            function stop(){
                clearTimeout(interval); //停止當(dāng)前的程序運(yùn)行。
            }            
        </script>
    </body>
</html>

運(yùn)行結(jié)果

滾動(dòng)條和跑馬燈

4、總結(jié)

(1)、num = setInterval('事件函數(shù)'，毫秒)，這個(gè)函數(shù)(setInterval)就是一個(gè)定時(shí)器，每隔多長(zhǎng)時(shí)間執(zhí)行一次這個(gè)函數(shù)；

clearInterval(num)，就是終止執(zhí)行定時(shí)器函數(shù)；

(2)、num = setTimeout('事件函數(shù)'，毫秒)，這個(gè)函數(shù)只執(zhí)行一次，就不在執(zhí)行；

clearTimeout(num)，終止定時(shí)器的執(zhí)行；

向AI問一下細(xì)節(jié)

滾動(dòng)條和跑馬燈

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽