明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

html 與js 中完成倒計(jì)時(shí)技巧

發(fā)表時(shí)間：2024-05-14 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]倒計(jì)時(shí)主要用到的知識點(diǎn)：1、設(shè)置時(shí)間間隔的setInterval可以被clearInterval取消　　　　　　　　　　　　2、毫秒轉(zhuǎn)換為時(shí)分格式　　　　　　　　　　　　　　　　這個(gè)是效果圖　　　　　下面是js中的函數(shù)var shijian=3600;var time=null;function ...
倒計(jì)時(shí)主要用到的知識點(diǎn)：1、設(shè)置時(shí)間間隔的setInterval可以被clearInterval取消

　　　　　　　　　　　　2、毫秒轉(zhuǎn)換為時(shí)分格式

　　　　　　　　　　　　　　　　這個(gè)是效果圖　　　html 和js 中實(shí)現(xiàn)倒計(jì)時(shí)功能

　　下面是js中的函數(shù)


var shijian=3600;
    var time=null;
    function start(){
         time=setInterval("count()",1000);//返回值time只是為了需要暫停的時(shí)候clearInterval(time)清除時(shí)間間隔
    }
    
    function count(){
        if(shijian<0){
            alert("time out");
            pause();//一般情況下這個(gè)if條件是用來提交數(shù)據(jù)用的,這里只是測試一下。
        }else{
            $("#time p").html(Math.floor(shijian/60)+":"+shijian%60);//這里用到將毫秒轉(zhuǎn)換到時(shí)分格式
            shijian--;
            console.info(time);
        }
    }
    function pause(){
        clearInterval(time);
    }
    function goOn(){
        time = setInterval("count()",1000);//重新設(shè)置時(shí)間間隔
    }

第二個(gè)是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="繼續(xù)" onclick="goOn()"/>
</div>
</body>
</html>

以上就是html 和js 中實(shí)現(xiàn)倒計(jì)時(shí)功能的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。