<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      html 與js 中完成倒計時技巧
                
                  發表時間：2024-01-02             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]倒計時主要用到的知識點：1、設置時間間隔的setInterval可以被clearInterval取消　　　　　　　　　　　　2、毫秒轉換為時分格式　　　　　　　　　　　　　　　　這個是效果圖　　　　　下面是js中的函數var shijian=3600;var time=null;function ...
      倒計時主要用到的知識點：1、設置時間間隔的setInterval可以被clearInterval取消
      　　　　　　　　　　　　2、毫秒轉換為時分格式
      　　　　　　　　　　　　　　　　這個是效果圖　　　html 和js 中實現倒計時功能
      　　下面是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中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清