JS實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)倒計(jì)時(shí)器
更新時(shí)間：2022年08月09日 11:30:01 作者：小楊不香菜
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)倒計(jì)時(shí)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)倒計(jì)時(shí)器（js原生代碼），供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)倒計(jì)時(shí)（距離xx年x月x日還剩多少時(shí)間），效果是這樣的
首先HTML代碼部分，我們需要簡(jiǎn)單編寫一個(gè)html代碼，用來(lái)接收倒計(jì)時(shí)時(shí)間顯示。
<div id="box"></div>
接下來(lái)就是JS代碼部分。
首先要知道當(dāng)前的時(shí)間，然后還需要指定一個(gè)到期時(shí)間，拿到當(dāng)前時(shí)間和指定時(shí)間的時(shí)間差
function antitime() {
? ? var now = new Date(); //獲取當(dāng)前時(shí)間
? ? var to = new Date(2032, 1, 1, 0, 0, 0); //指定到期時(shí)間
? ? // 然后拿到當(dāng)前時(shí)間和指定時(shí)間的時(shí)間差，注意 是毫秒數(shù)
? ? var deltaTime = (to - now) / 1000; //到期時(shí)間和當(dāng)前時(shí)間相差的毫秒數(shù)/1000換算出總的秒數(shù)，方便后邊用
? ? // console.log(deltaTime)判斷 如果時(shí)間超了，停止倒計(jì)時(shí)
if (deltaTime <= 0) {
// 停止計(jì)時(shí)器
?window.clearInterval(antitime);
}已知總的秒數(shù)，計(jì)算天數(shù)時(shí)分秒
這里用到了取整數(shù)的方法，用到哪在哪除，并給其定義賦值，方便后面取用，用parseInt()取整或者M(jìn)ath.floor()取整,在這里用的是Math.floor()。
// 計(jì)算天數(shù)并給其賦值 ? ?var d = Math.floor(deltaTime / 3600 / 24), ? ? // 計(jì)算小時(shí)并給其賦值 ? ? h = Math.floor(deltaTime / 3600 % 24), ? ?// 計(jì)算分鐘并給其賦值 ? ? m = Math.floor(deltaTime / 60 % 60), ? ?// 計(jì)算秒數(shù)并給其賦值 ? s = Math.floor(deltaTime % 60);
實(shí)際上就是時(shí)間換算的基本運(yùn)算，這里看懂了也就簡(jiǎn)單多了，只需要封裝好函數(shù)就可以了。
為了增加用戶體驗(yàn)，把時(shí)間的數(shù)字轉(zhuǎn)成字符串，如果分秒毫秒不足10，則前面補(bǔ)0。
這里應(yīng)該有更好的方法進(jìn)行封裝，為了更好理解，這樣寫出來(lái)。
if (d < 10) {
? ? ? ? ? ? ? ? d = '0' + d;
? ? ? ? ? ? } else if (h < 10) {
? ? ? ? ? ? ? ? h = '0' + h;
? ? ? ? ? ? } else if (m < 10) {
? ? ? ? ? ? ? ? m = '0' + m;
? ? ? ? ? ? } else if (s < 10) {
? ? ? ? ? ? ? ? s = '0' + s;
? ? ? ? ? ? }接下來(lái)就是需要定義一個(gè)空的字符串用來(lái)接收最后字符串拼接的值。
var timer01 = '';
? timer01 = '距離2032年1月1日還有' + d + '天' + h + '小時(shí)' + m + '分' + s + '秒';
? ? document.getElementById('box');
? ? box.innerHTML = timer01;document.getElementById() 獲取DOM元素節(jié)點(diǎn)，方便向節(jié)點(diǎn)填入數(shù)據(jù)并顯示。
box.innerHTML = timer01 讓id擁有box屬性的元素節(jié)點(diǎn)在頁(yè)面顯示timer01中的內(nèi)容。
最后， 開(kāi)啟定時(shí)器，并讓其1000毫秒更新一次
setInterval(antitime, 1000);
總體JS部分代碼加上注釋給大家放這里了
<script>
? ? ? ? // ? ?指定計(jì)時(shí)器到期時(shí)間，首先先封裝函數(shù)antitime()
? ? ? ? function antitime() {
? ? ? ? ? ? var now = new Date(); //獲取當(dāng)前時(shí)間
? ? ? ? ? ? var to = new Date(2032, 1, 1, 0, 0, 0); //指定到期時(shí)間
? ? ? ? ? ? // 然后拿到當(dāng)前時(shí)間和指定時(shí)間的時(shí)間差，注意 是毫秒數(shù)
? ? ? ? ? ? var deltaTime = (to - now) / 1000; //到期時(shí)間和當(dāng)前時(shí)間相差的毫秒數(shù)/1000換算出總的秒數(shù)，方便后邊用
? ? ? ? ? ? // console.log(deltaTime)
? ? ? ? ? ? // 判斷 如果時(shí)間超了，停止倒計(jì)時(shí)
? ? ? ? ? ? if (deltaTime <= 0) {
? ? ? ? ? ? ? ? // 停止計(jì)時(shí)器
? ? ? ? ? ? ? ? window.clearInterval(antitime);
? ? ? ? ? ? }
? ? ? ? ? ? // 已知毫秒數(shù)，計(jì)算天數(shù)時(shí)分秒
? ? ? ? ? ? // 這里用到了取整數(shù)的方法，用到哪在哪除，并給其定義賦值，方便后面取用，
? ? ? ? ? ? // 用parseInt()取整或者M(jìn)ath.floor()取整,在這里用的是Math.floor()。
? ? ? ? ? ? // 計(jì)算天數(shù)并給其賦值
? ? ? ? ? ? var d = Math.floor(deltaTime / 3600 / 24),
? ? ? ? ? ? ? ? // 計(jì)算小時(shí)并給其賦值
? ? ? ? ? ? ? ? h = Math.floor(deltaTime / 3600 % 24),
? ? ? ? ? ? ? ? // 計(jì)算分鐘并給其賦值
? ? ? ? ? ? ? ? m = Math.floor(deltaTime / 60 % 60),
? ? ? ? ? ? ? ? // 計(jì)算秒數(shù)并給其賦值
? ? ? ? ? ? ? ? s = Math.floor(deltaTime % 60);
? ? ? ? ? ? //為了增加用戶體驗(yàn)，把時(shí)間的數(shù)字轉(zhuǎn)成字符串，如果分秒毫秒不足10，則前面補(bǔ)0。
? ? ? ? ? ? // 這里應(yīng)該有更好的方法進(jìn)行封裝，為了更好理解，這樣寫出來(lái)。
? ? ? ? ? ? if (d < 10) {
? ? ? ? ? ? ? ? d = '0' + d;
? ? ? ? ? ? } else if (h < 10) {
? ? ? ? ? ? ? ? h = '0' + h;
? ? ? ? ? ? } else if (m < 10) {
? ? ? ? ? ? ? ? m = '0' + m;
? ? ? ? ? ? } else if (s < 10) {
? ? ? ? ? ? ? ? s = '0' + s;
? ? ? ? ? ? }
? ? ? ? ? ? // 定義一個(gè)空的字符串用來(lái)接收最后的值
? ? ? ? ? ? var timer01 = '';
? ? ? ? ? ? timer01 = '距離2032年1月1日還有' + d + '天' + h + '小時(shí)' + m + '分' + s + '秒';
? ? ? ? ? ? // document.getElementById() 獲取DOM元素節(jié)點(diǎn)，方便向節(jié)點(diǎn)填入數(shù)據(jù)并顯示
? ? ? ? ? ? document.getElementById('box');
? ? ? ? ? ? // 讓id擁有box屬性的元素節(jié)點(diǎn)在頁(yè)面顯示timer01中的內(nèi)容
? ? ? ? ? ? box.innerHTML = timer01;
? ? ? ? }
? ? ? ? // 開(kāi)啟定時(shí)器，并讓其1000毫秒更新一次
? ? ? ? setInterval(antitime, 1000);
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)日期天數(shù)、時(shí)分秒的倒計(jì)時(shí)完整代碼
- JavaScript實(shí)現(xiàn)倒計(jì)時(shí)功能2種方法實(shí)例
- JavaScript倒計(jì)時(shí)定時(shí)器和間隔定時(shí)器使用詳解
- 一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)
- javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例
- JavaScript實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)效果
- 用JS寫了一個(gè)30分鐘倒計(jì)時(shí)器的實(shí)現(xiàn)示例
- JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例
相關(guān)文章
TypeScript中的接口Interface詳解(對(duì)象類型的強(qiáng)大工具)
TypeScript中的接口是一個(gè)強(qiáng)大而靈活的特性,它為我們提供了一種清晰、簡(jiǎn)潔的方式來(lái)定義對(duì)象的結(jié)構(gòu)和類型,通過(guò)使用接口,我們可以編寫更加健壯、可維護(hù)的代碼,這篇文章主要介紹了TypeScript中的接口(Interface):對(duì)象類型的強(qiáng)大工具,需要的朋友可以參考下2024-08-08
JS中toFixed()方法四舍五入的精度問(wèn)題詳解
最近在做項(xiàng)目的時(shí)候,遇到了有四舍五入保留兩位的需求,當(dāng)時(shí)不假思索的直接使用了js原生的toFixed方法,結(jié)果出現(xiàn)了問(wèn)題,這篇文章主要給大家介紹了關(guān)于JS中toFixed()方法四舍五入精度問(wèn)題的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了JavaScript Module模式的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
node.js+express+mySQL+ejs+bootstrop實(shí)現(xiàn)網(wǎng)站登錄注冊(cè)功能
這篇文章主要介紹了node.js+express+mySQL+ejs+bootstrop實(shí)現(xiàn)網(wǎng)站登錄注冊(cè)功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01
這篇文章主要針對(duì)JavaScript數(shù)組操作函數(shù)push，pop，join，shift，unshift，slice，splice，concat進(jìn)行總結(jié)，感興趣的小伙伴們可以參考一下2016-08-08
詳解基于DllPlugin和DllReferencePlugin的webpack構(gòu)建優(yōu)化
這篇文章主要介紹了詳解基于DllPlugin和DllReferencePlugin的webpack構(gòu)建優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06 
JavaScript是基于原型繼承的語(yǔ)言,每個(gè)對(duì)象都有一個(gè)原型（prototype）,本文則是重點(diǎn)對(duì)prototype相關(guān)知識(shí)點(diǎn)做拆解和梳理,感興趣的可以了解下
2023-08-08 
微信小程序以ssm做后臺(tái)開(kāi)發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了微信小程序以ssm做后臺(tái)開(kāi)發(fā)的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04 
js 頁(yè)面關(guān)閉前的出現(xiàn)提示的實(shí)現(xiàn)代碼
主流的瀏覽器都支持onbeforeunload事件(即頁(yè)面卸載前觸發(fā)的事件)，而現(xiàn)在大多網(wǎng)站都用到了此功能
2011-05-05