快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)自動(dòng)更新倒計(jì)時(shí)效果

更新時(shí)間：2016年12月19日 13:58:48 作者：zxz32384

這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)自動(dòng)更新倒計(jì)時(shí)效果，元旦倒計(jì)時(shí)代碼分享，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

實(shí)現(xiàn)倒計(jì)時(shí)效果需要掌握js中的兩個(gè)知識(shí)點(diǎn)：
1、setTimeout函數(shù) 每隔1秒鐘更新秒鐘時(shí)間
2、Date對(duì)象計(jì)算時(shí)間差

下面貼出元旦倒計(jì)時(shí)代碼

<!DOCTYPE html>
<html>
 <head>
 <title>example.html</title>

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="this is my page">
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <script>

 //定義計(jì)時(shí)器，每隔1秒鐘調(diào)用timer函數(shù)
 var timerCount= window.setTimeout("timer()",1000);
 function timer(){
 var date=new Date("2017","1","1","0","0","0");
 var deadlineTime=date.getTime();
 var nowDate=new Date();
 var nowTime=nowDate.getTime();
 var distTime=deadlineTime-nowTime;
 //判斷是否到達(dá)時(shí)間期限
 if(distTime>0){
 var d=Math.floor(distTime/1000/3600/24);
 var h=Math.floor(distTime/1000/3600%24);
 var m=Math.floor(distTime/1000/60%60);
 var s=Math.floor(distTime/1000%60);
 var str="距離2017年元旦還有"+d+"天"+h+"時(shí)"+m+"分"+s+"秒";
 document.getElementById("timeout").innerHTML=str;
 timerCount= window.setTimeout("timer()",1000); 
 }
 else{
 //到達(dá)時(shí)間期限的時(shí)候清楚計(jì)時(shí)器；
 window.clearTimeout(timerCount);
 alert("時(shí)間已到");
 }

 }
 </script>
 </head>

 <body>
 <p id="timeout"> </p>

</html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript優(yōu)化圖片懶加載的性能技巧
前端發(fā)展過程中有許多性能優(yōu)化的操作,比如防抖、節(jié)流和圖片懶加載等,在這里我們首先聊聊圖片懶加載操作,我們會(huì)經(jīng)常逛像淘寶和京東等購物平臺(tái),一次性全部加載會(huì)導(dǎo)致加載時(shí)間長、網(wǎng)絡(luò)資源消耗大,所以本文給大家介紹了JavaScript優(yōu)化圖片懶加載的性能技巧
2024-06-06
微信小程序騰訊地圖SDK 獲取當(dāng)前地址實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序騰訊地圖SDK 獲取當(dāng)前地址實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
webpack打包并將文件加載到指定的位置方法
下面小編就為大家分享一篇webpack打包并將文件加載到指定的位置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
JavaScript實(shí)現(xiàn)的Tween算法及緩沖特效實(shí)例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的Tween算法及緩沖特效,涉及JavaScript通過數(shù)學(xué)運(yùn)算及樣式屬性操作實(shí)現(xiàn)緩動(dòng)、彈性運(yùn)動(dòng)等效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
ES2020系列之空值合并運(yùn)算符 ''??''
這篇文章主要介紹了ES2020系列之空值合并運(yùn)算符 '??'，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
打印Proxy對(duì)象和ref對(duì)象的包實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了打印Proxy對(duì)象和ref對(duì)象的包實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
JavaScript DOMContentLoaded事件案例詳解
這篇文章主要介紹了JavaScript DOMContentLoaded事件案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
js實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Node.js API詳解之 zlib模塊用法分析
這篇文章主要介紹了Node.js API詳解之 zlib模塊用法,結(jié)合實(shí)例形式分析了Node.js API中zlib模塊基本功能、函數(shù)使用方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
基于JavaScript實(shí)現(xiàn)圖片剪切效果
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)圖片剪切效果,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03