html 和js 中實作倒數功能-html教學-PHP中文網

html 和js 中實作倒數功能

炎欲天舞

發布： 2017-08-04 15:44:49

原創

2132 人瀏覽過

倒數計時主要用到的知識點：1、設定時間間隔的setInterval可以被clearInterval取消

這個是效果圖　　　

　　下面是js中的函數

var shijian=3600;
    var time=null;
    function start(){
         time=setInterval("count()",1000);//返回值time只是为了需要暂停的时候clearInterval(time)清除时间间隔
    }
    
    function count(){
        if(shijian<0){
            alert("time out");
            pause();//一般情况下这个if条件是用来提交数据用的,这里只是测试一下。
        }else{
            $("#time p").html(Math.floor(shijian/60)+":"+shijian%60);//这里用到将毫秒转换到时分格式
            shijian--;
            console.info(time);
        }
    }
    function pause(){
        clearInterval(time);
    }
    function goOn(){
        time = setInterval("count()",1000);//重新设置时间间隔
    }

登入後複製

第二個是html資源，為了方便我css直接寫在html了

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="1.js"></script>
    <script src="jquery-1.8.3.min.js"></script>
    <style type="text/css">
        input{
            background-color: #9fc5f1;
            width: 100px; 
            height: 30px; 
            line-height: 30px; 
            text-align: center; 
            color: #fff; 
            font-size:14px; 
            font-weight: bold;
        }
        #time p{
            color: #1f6dc2;
            font-size: 48px; 
            font-weight: bold;
            margin-left:90px;
            margin-bottom:0px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div id="time">
    <p>00:00</p>
    <input type="button" value="开始" onclick="start()"/>
    <input type="button" value="暂停" onclick="pause()"/>
    <input type="button" value="继续" onclick="goOn()"/>
</div>
</body>
</html>

登入後複製

以上是html 和js 中實作倒數功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！