回上頁 - 網頁JavaScript語法

012、setInterval()時間函式

1、setInterval()時間函式：會一直重複執行的時間函式

範例1：基本寫法 setInterval(function(){ ... }, 3000);

<script>
$(document).ready(function(){

    //setInterval 每3秒會重複執行一次程式碼

    setInterval(function(){
        alert('哈囉！');
    },3000);                    //3秒鐘

});

</script>

2、計數器

範例1：
<body style="font-size: 3rem;">
<div id="timer" style="font-size: 3rem;">0</div>
</body>

<script>
$(document).ready(function(){

    var n=0;

    setInterval(function(){
        n++;
        $("#timer").text(n);      //使用 text() 函式，將資料寫入 $("#timer") DIV元件
    },1000);

});
</script>

3、使用clearInterval取消時間函式


<body style="font-size: 3rem;">
<button id="start">啟動計數器</button>
<button id="stop">停止計數器</button>
<div id="count" style="font-size: 3rem;">0</div>
</body>


<script>
$(function(){

    var n=0;
    var myTimer;

    $("#start").on("click",function(){
        myTimer = setInterval(function(){
            n++;
            $("#count").text(n);
        },1000); 
    })

    $("#stop").on("click",function(){
        clearInterval(myTimer)
    })

});
</script>

4、在計數器加入音效


<body style="font-size: 3rem;">
<button id="start">啟動計數器</button>
<button id="stop">停止計數器</button>
<div id="count" style="font-size: 3rem;">0</div>

<!-- 音效要加下面一行在網頁中 -->
<audio id="audio" src=""></audio>

</body>


<script>
$(function(){

    var n=0;
    var myTimer;

    $("#start").on("click",function(){
        myTimer = setInterval(function(){
            n++;
            $("#count").text(n);
            audio.src = "audio/dingdong.wav";
            audio.play();
        },1000); 
    })

    $("#stop").on("click",function(){
        clearInterval(myTimer)
    })

});
</script>

練習題

範例：

<script>
$(document).ready(function(){

    
});
</script>
shape
shape