JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù)、時(shí)、分、秒)
本文實(shí)例為大家解析了JS實(shí)現(xiàn)倒計(jì)時(shí)的詳細(xì)過程,供大家參考,具體內(nèi)容如下
注釋:
parseInt() 函數(shù)可解析一個(gè)字符串,并返回一個(gè)整數(shù)。
語法:
parseInt(string, radix)
例:
parseInt("10"); //返回 10 parseInt("19",10); //返回 19 (10+9) parseInt("11",2); //返回 3 (2+1) parseInt("17",8); //返回 15 (8+7) parseInt("1f",16); //返回 31 (16+15) parseInt("010"); //未定:返回 10 或 8
實(shí)現(xiàn)倒計(jì)時(shí)代碼
html代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù),時(shí),分,秒)</title> </head> <body onload="leftTimer()"> <h2>剩余時(shí)間:</h2> <div id="timer"></div> </body> </html>
javascript代碼:
<script language="javascript" type="text/javascript"> function leftTimer(year,month,day,hour,minute,second){ var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //計(jì)算剩余的毫秒數(shù) var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //計(jì)算剩余的天數(shù) var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //計(jì)算剩余的小時(shí) var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計(jì)算剩余的分鐘 var seconds = parseInt(leftTime / 1000 % 60, 10);//計(jì)算剩余的秒數(shù) days = checkTime(days); hours = checkTime(hours); minutes = checkTime(minutes); seconds = checkTime(seconds); setInterval("leftTimer(2016,11,11,11,11,11)",1000); document.getElementById("timer").innerHTML = days+"天" + hours+"小時(shí)" + minutes+"分"+seconds+"秒"; } function checkTime(i){ //將0-9的數(shù)字前面加上0,例1變?yōu)?1 if(i<10) { i = "0" + i; } return i; } </script>
實(shí)現(xiàn)效果:
小編在作者分享的文章基礎(chǔ)上再為大家整理一段完整的代碼,拿去用吧!
<html> <body> <input type="text" value="" id="date2"> <input type="button" onclick="go(document.getElementById('date2').value);" value="開始"> <div id="timer"></div> <script type="text/javascript"> // 倒計(jì)時(shí) var _ordertimer = null; var data=new Date(); document.getElementById("date2").value=data.getFullYear()+'-'+(data.getMonth()+1)+'-'+data.getDate()+' '+data.getHours()+':'+data.getMinutes()+':'+data.getSeconds();//當(dāng)前時(shí)間 function leftTimer(enddate) { var leftTime = (new Date(enddate)) - new Date(); //計(jì)算剩余的毫秒數(shù) var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //計(jì)算剩余的天數(shù) var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //計(jì)算剩余的小時(shí) var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計(jì)算剩余的分鐘 var seconds = parseInt(leftTime / 1000 % 60, 10);//計(jì)算剩余的秒數(shù) days = checkTime(days); hours = checkTime(hours); minutes = checkTime(minutes); seconds = checkTime(seconds); if (days >= 0 || hours >= 0 || minutes >= 0 || seconds >= 0) document.getElementById("timer").innerHTML = days + "天" + hours + "小時(shí)" + minutes + "分" + seconds + "秒"; if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) { window.clearInterval(_ordertimer); _ordertimer = null; } } function checkTime(i) { //將0-9的數(shù)字前面加上0,例1變?yōu)?1 if (i < 10) { i = "0" + i; } return i; } function go(v){ var date1=new Date(),data2=new Date(v); if(data2<date1)return;//設(shè)置的時(shí)間小于現(xiàn)在時(shí)間退出 _ordertimer = setInterval(function(){leftTimer(data2)}, 1000); } </script> </body> </html>
效果圖:
相關(guān)閱讀:
基于JS代碼實(shí)現(xiàn)簡(jiǎn)單易用的倒計(jì)時(shí) x 天 x 時(shí) x 分 x 秒效果
JS實(shí)現(xiàn)根據(jù)用戶輸入分鐘進(jìn)行倒計(jì)時(shí)功能
JS實(shí)現(xiàn)用戶注冊(cè)時(shí)獲取短信驗(yàn)證碼和倒計(jì)時(shí)功能
基于JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無視頁面刷新,頁面關(guān)閉不進(jìn)行倒計(jì)時(shí)功能)
更多關(guān)于倒計(jì)時(shí)的文章請(qǐng)查看專題: 《倒計(jì)時(shí)功能》
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript之循環(huán)停頓上下滾動(dòng)
javascript之循環(huán)停頓上下滾動(dòng)...2007-08-08js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08js表單元素checked、radio被選中的幾種方法(詳解)
下面小編就為大家?guī)硪黄猨s表單元素checked、radio被選中的幾種方法(詳解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08[Bootstrap-插件使用]Jcrop+fileinput組合實(shí)現(xiàn)頭像上傳功能實(shí)例代碼
這篇文章主要介紹了[Bootstrap-插件使用]Jcrop+fileinput組合實(shí)現(xiàn)頭像上傳功能實(shí)例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2016-12-12JS正則驗(yàn)證多個(gè)郵箱完整實(shí)例【郵箱用分號(hào)隔開】
這篇文章主要介紹了JS正則驗(yàn)證多個(gè)郵箱的方法,且郵箱字符串使用分號(hào)隔開,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2017-04-04微信小程序6位或多位驗(yàn)證碼密碼輸入框功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序6位或多位驗(yàn)證碼密碼輸入框功能的實(shí)現(xiàn)代碼,實(shí)現(xiàn)思路很簡(jiǎn)單,需要的朋友可以參考下2018-05-05