首頁 web前端 js教程 JS實現獲取時間和設定倒數計時器分享

JS實現獲取時間和設定倒數計時器分享

Feb 28, 2018 am 11:50 AM
javascript 倒數計時 設定

本文主要和大家分享JS實作取得時間和設定倒數計時器,希望能幫助大家。

只做筆記記錄一下,主要用到DatesetInterval
第一個倒數計時的設定:

<script type="text/javascript">
    var timeBox = document.querySelector("#time");    function countdown(){
      var nowTime = new Date();      var targetTime = new Date("2018/2/27 15:44:15");      var spanTime = targetTime-nowTime;      if(spanTime <=0){
        timeBox.innerHTML="立即抢购";
        clearInterval(countdown);
      }else{        var hours = Math.floor(spanTime/(1000*60*60));
      spanTime-=hours*60*60*1000;      var minute = Math.floor(spanTime/(1000*60));
      spanTime-=minute*60*1000;      var second = Math.floor(spanTime/1000);
      hours<10 ? hours=&#39;0&#39;+hours : hours;
      minute<10 ? minute=&#39;0&#39;+minute : minute;
      second<10 ? second=&#39;0&#39;+second : second;
      timeBox.innerHTML=hours+&#39;:&#39;+minute+&#39;:&#39;+second;
      }

    }    var timer = window.setInterval(countdown,1000);  </script>
登入後複製

第二個,顯示目前日期:

<script type="text/javascript">
    var timeBox = document.querySelector("#time");    function countdown(){
      var date = new Date();      var hours = date.getHours();      var minute = date.getMinutes();      var second = date.getSeconds();
      hours =checkTime(hours);
      minute =checkTime(minute);
      second =checkTime(second);
      timeBox.innerHTML = hours+&#39;:&#39;+minute+&#39;:&#39;+second;
    }    // 检测时间数字是否小于10,在小于10的数字前加一个‘0’
    function checkTime(i){
      i<10 ? i="0"+i :i;      return i;
    }    var timer = window.setInterval(countdown,1000);  </script>
登入後複製

相關推薦:

js取得時間函數及擴充函數的方法

##JS取得時間的方法_javascript技巧

js防刷新的倒數計時程式碼js倒數程式碼#

以上是JS實現獲取時間和設定倒數計時器分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

抖音如何設定定時發布作品時間?它如何設定影片時間長短? 抖音如何設定定時發布作品時間?它如何設定影片時間長短? Mar 27, 2024 pm 06:11 PM

抖音如何設定定時發布作品時間?它如何設定影片時間長短?

抖音標籤在哪裡設定出來?它怎麼打標籤,才能精準推流? 抖音標籤在哪裡設定出來?它怎麼打標籤,才能精準推流? Mar 27, 2024 am 11:01 AM

抖音標籤在哪裡設定出來?它怎麼打標籤,才能精準推流?

請勿打擾模式在iPhone中不起作用:修復 請勿打擾模式在iPhone中不起作用:修復 Apr 24, 2024 pm 04:50 PM

請勿打擾模式在iPhone中不起作用:修復

微博怎麼設定水印在中間_微博設定水印在中間方法 微博怎麼設定水印在中間_微博設定水印在中間方法 Mar 29, 2024 pm 03:31 PM

微博怎麼設定水印在中間_微博設定水印在中間方法

微博怎麼設定定時發布_微博設定定時發布方法教程 微博怎麼設定定時發布_微博設定定時發布方法教程 Mar 29, 2024 pm 03:51 PM

微博怎麼設定定時發布_微博設定定時發布方法教程

抖音推薦和精選在哪裡設置 抖音推薦和精選在哪裡設置 Mar 27, 2024 pm 05:06 PM

抖音推薦和精選在哪裡設置

大麥怎麼設定搶票倒數計時 大麥怎麼設定搶票倒數計時 Apr 01, 2024 pm 07:01 PM

大麥怎麼設定搶票倒數計時

抖音播放自動關機怎麼設定?播放過程自動退出什麼原因? 抖音播放自動關機怎麼設定?播放過程自動退出什麼原因? Apr 01, 2024 pm 12:06 PM

抖音播放自動關機怎麼設定?播放過程自動退出什麼原因?

See all articles