功能介紹:
1.時/分/秒倒計時直至為零

所有代碼


<!DOCTYPE html" />

JavaScript實現秒殺時鐘倒計時

 更新時間:2019-09-29 10:00:39   作者:佚名   我要評論(0)

本文實例為大家分享了JavaScript實現秒殺時鐘倒計時的具體代碼,供大家參考,具體內容如下
功能介紹:
1.時/分/秒倒計時直至為零

所有代碼


<!DOCTYPE html

本文實例為大家分享了JavaScript實現秒殺時鐘倒計時的具體代碼,供大家參考,具體內容如下

功能介紹:

1.時/分/秒倒計時直至為零

所有代碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>倒計時</title>
 <style type="text/css">
  *{
  margin:0; 
  padding:0;
      }
      span{
        display: inline-block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: black;
        color: white;
        font-size: 30px;
        text-align: center;
        line-height: 60px;
      }
      i{
        font-style: normal;
        font-size: 20px;
      }
 </style>
 </head>
 <body>
    <span id="hs">1</span>
    <i>:</i>
    <span id="ms">59</span>
    <i>:</i>
    <span id="ss">47</span>
 </body>
</html>
<script type="text/javascript">
//倒計時
var count = 1;
var Counter;
function countDown(){ //調用
 Counter = setInterval(f,1000);
} 
countDown(); //自運行
//倒計時
function f(){
 var hs = Number(document.getElementById("hs").innerHTML);
 var ms = Number(document.getElementById("ms").innerHTML);
 var ss = Number(document.getElementById("ss").innerHTML);
 if(hs==0&&ms==0&&ss==0||ss>60||ms>60||hs>24){
 var hs = document.getElementById("hs").innerHTML = "00";
 var ms = document.getElementById("ms").innerHTML = "00";
 var ss = document.getElementById("ss").innerHTML = "00";
 clearInterval(Counter);
 console.log(count);
 return;
}
 if(ss>0){
 ss--;
 document.getElementById("ss").innerHTML = ss;
 count++;
 }
 if(ss==0){
 if(ms>0){
  ms--;
  document.getElementById("ms").innerHTML = ms;
  document.getElementById("ss").innerHTML = 59;
 }
 
 }
 if(ms==0){
 if(hs>0){
  hs--;
  document.getElementById("hs").innerHTML = hs;
  document.getElementById("ms").innerHTML = 59;
 }
 
 }
}
 
</script>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:

  • 使用JS顯示倒計時數字時鐘效果
  • JS 實現倒計時數字時鐘效果【附實例代碼】
  • JavaScript電子時鐘倒計時第二款
  • JavaScript電子時鐘倒計時
  • js實現的奧運倒計時時鐘效果代碼
  • JS實現的網頁倒計時數字時鐘效果
  • js實現倒計時時鐘的示例代碼
  • javascript入門·動態的時鐘,顯示完整的一些方法,新年倒計時

相關文章

  • JavaScript實現秒殺時鐘倒計時

    JavaScript實現秒殺時鐘倒計時

    本文實例為大家分享了JavaScript實現秒殺時鐘倒計時的具體代碼,供大家參考,具體內容如下 功能介紹: 1.時/分/秒倒計時直至為零 所有代碼 <!DOCTYPE html
    2019-09-29
  • Java匿名內部類原理與用法詳解

    Java匿名內部類原理與用法詳解

    本文實例講述了Java匿名內部類原理與用法。分享給大家供大家參考,具體如下: 一 點睛 匿名內部類適合創建那種只需要一次使用的類,定義匿名內部類的語法格式
    2019-09-29
  • Vbs備份指定文件到指定目錄并且以日期重命名的實現代碼

    Vbs備份指定文件到指定目錄并且以日期重命名的實現代碼

    說到備份,相信大家都會想到的第一個方法就是通過windows系統自帶的window backup功能進行數據備份。后來微軟又出了system centere產品后,就出現了一個新的備
    2019-09-29
  • json字符串對象轉換代碼實例

    json字符串對象轉換代碼實例

    這篇文章主要介紹了json字符串對象轉換代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下 1、將字
    2019-09-29
  • JavaScript獲取頁面元素的常用方法詳解

    JavaScript獲取頁面元素的常用方法詳解

    1、通過標簽獲取元素,返回一個數組   var li = document.getElementsByTagName('li');//標簽獲取元素   li[0].innerHTML;// 查看獲取元素的內容   l
    2019-09-29
  • VBS一鍵配置VOIP腳本代碼

    VBS一鍵配置VOIP腳本代碼

    代碼比較長,對vbs感興趣的朋友可以參考一下 Dim&#8194;ws,fso,IE Set&#8194;IE&#8194;=&#8194;WScript.createobject("InternetExplorer.Application") Set
    2019-09-29
  • 使用vbs腳本實現自動打字祝福與搞笑實現代碼

    使用vbs腳本實現自動打字祝福與搞笑實現代碼

    概述 聽說抖音上流行一種用代碼做程序表白的東西,,,, 當然我也不是要表白,,,, 但是好像蠻有意思的,,,, 于是,又學了一下vbs腳本,做了幾個
    2019-09-29
  • javascript頭像上傳代碼實例

    javascript頭像上傳代碼實例

    上傳頭像: 相關關鍵詞: ondragover(拖動元素在投放區內移動) ondrop (元素放在投放區觸發但是要去處理瀏覽器默認事件的影響:ondragenter、ondragover)
    2019-09-29
  • JavaScript實現輪播圖效果代碼實例

    JavaScript實現輪播圖效果代碼實例

    這篇文章主要介紹了JavaScript實現輪播圖效果代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-09-29
  • VBS批量重命名文件并且操作前備份原有文件

    VBS批量重命名文件并且操作前備份原有文件

    核心函數 '========================================================================== ' ' VBScript Source File -- Created with SAPIEN Technologies
    2019-09-29

最新評論

亿宝娱乐黑钱