JS實(shí)現(xiàn)根據(jù)用戶輸入分鐘進(jìn)行倒計(jì)時(shí)功能
廢話不多說(shuō)了,直接給大家貼代碼了。具體代碼如下所示:
其實(shí)這倒計(jì)時(shí)之前有接觸過(guò)很多,只是用的都是別人的源碼。
應(yīng)項(xiàng)目需求,終于認(rèn)真一回,把一個(gè)自己看似很簡(jiǎn)單的問(wèn)題,終于耗上了跨度一個(gè)星期的時(shí)間,才弄出來(lái)。
源碼直接復(fù)制黏貼可用。
冗余版+簡(jiǎn)化版。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> var createTime = '2016-11-14 10:20:00';//開(kāi)始時(shí)間 var limitTimes = 10;//時(shí)間長(zhǎng)度 // 倒計(jì)時(shí) 入口 countdowns = window.setInterval(function(){ var arr = cutDoowns(limitTimes,createTime); document.write(formatDate(arr[0])+':'+formatDate(arr[1])+':'+formatDate(arr[2])+'</br>'); if(arr[2]){ document.write('時(shí)間到!'); } },1000); /* s,10分鐘后的具體日期: date,開(kāi)始時(shí)間 然后轉(zhuǎn)化成毫秒比較,所得的差值化成分秒,就是倒計(jì)時(shí)的分秒。 */ function cutDoowns(s,date){ console.log(''); var flag = false; var arr = [];//arr[0]:分,arr[1]:秒,arr[2]:返回boolean var now = new Date();//當(dāng)前時(shí)間 var now1 = new Date(date);//開(kāi)始時(shí)間 console.log('開(kāi)始時(shí)間 now1: '+now1); now1.setMinutes(now1.getMinutes()+s);//10分鐘后的時(shí)間 console.log('當(dāng)前時(shí)間 now :'+now); console.log('10分鐘時(shí) now1:'+now1); // 轉(zhuǎn)化成年月日 時(shí)分秒 格式 var n = now.getFullYear()+'/'+(now.getMonth()+1)+'/'+now.getDay()+' '+now.getHours()+':'+now.getMinutes()+':'+now.getSeconds(); var n1 = now1.getFullYear()+'/'+(now1.getMonth()+1)+'/'+now1.getDay()+' '+now1.getHours()+':'+now1.getMinutes()+':'+now1.getSeconds(); // 日期轉(zhuǎn)化成毫秒 var time1 = (new Date(n)).getTime(); var time2 = (new Date(n1)).getTime(); // 毫秒轉(zhuǎn)日期格式 var time11 = new Date(time1); var time21 = new Date(time2); console.log('當(dāng)前時(shí)間:'+n+',轉(zhuǎn)化成毫秒:'+time1+',time11:'+time11); console.log('10分鐘時(shí):'+n1+',轉(zhuǎn)化成毫秒:'+time2+',time21:'+time21); var surplusSec = time2-time1;//距離解鎖剩余毫秒 if(surplusSec<=0){ clearInterval(countdowns); flag = true; return arr = [00,00,flag]; } var minute = Math.floor(surplusSec/1000/60);//分鐘 var second = Math.floor((surplusSec-minute*60*1000)/1000);//剩余秒數(shù) console.log('剩余時(shí)間,minute: '+minute+',second: '+second+',surplusSec:'+surplusSec); // var second = Math.round(surplusTimes);//秒數(shù) console.log('剩余時(shí)間,minute: '+minute+',second: '+second+',surplusSec:'+surplusSec); arr = [minute,second,flag]; return arr; } //格式化日期:把單字符轉(zhuǎn)成雙字符 function formatDate(n){ n = n.toString(); // console.log(n); if(n.length<=1){ n = '0'+n; } // console.log(n); return n; } </script> </body> </html>
簡(jiǎn)化版本:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>打開(kāi)調(diào)試工具,看效果!</title> </head> <body> <script type="text/javascript"> /* 打開(kāi)調(diào)試工具,看效果! 思路: 1.設(shè)置一個(gè)倒計(jì)時(shí)的時(shí)間長(zhǎng)度; 2.設(shè)置開(kāi)始時(shí)間和當(dāng)前時(shí)間; 3.結(jié)束時(shí)間是 開(kāi)始時(shí)間+倒計(jì)時(shí)間; 4.結(jié)束毫秒-開(kāi)始毫秒=剩余倒計(jì)時(shí)間。 */ // 準(zhǔn)備 var countdownMinute = 10;//10分鐘倒計(jì)時(shí) var startTimes = new Date('2016-11-16 15:55');//開(kāi)始時(shí)間 new Date('2016-11-16 15:21'); var endTimes = new Date(startTimes.setMinutes(startTimes.getMinutes()+countdownMinute));//結(jié)束時(shí)間 var curTimes = new Date();//當(dāng)前時(shí)間 var surplusTimes = endTimes.getTime()/1000 - curTimes.getTime()/1000;//結(jié)束毫秒-開(kāi)始毫秒=剩余倒計(jì)時(shí)間 // 進(jìn)入倒計(jì)時(shí) countdowns = window.setInterval(function(){ surplusTimes--; var minu = Math.floor(surplusTimes/60); var secd = Math.round(surplusTimes%60); console.log(minu+':'+secd); if(surplusTimes<=0){ console.log('時(shí)間到!'); clearInterval(countdowns); } },1000); </script> </body> </html>
以上所述是小編給大家介紹的JS實(shí)現(xiàn)根據(jù)用戶輸入分鐘進(jìn)行倒計(jì)時(shí)功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù)、時(shí)、分、秒)
- PHP+JS實(shí)現(xiàn)的商品秒殺倒計(jì)時(shí)用法示例
- js實(shí)現(xiàn)倒計(jì)時(shí)及時(shí)間對(duì)象
- JS實(shí)現(xiàn)用戶注冊(cè)時(shí)獲取短信驗(yàn)證碼和倒計(jì)時(shí)功能
- js制作支付倒計(jì)時(shí)頁(yè)面
- JS實(shí)現(xiàn)表單驗(yàn)證功能(驗(yàn)證手機(jī)號(hào)是否存在,驗(yàn)證碼倒計(jì)時(shí))
- 最全面的JS倒計(jì)時(shí)代碼
- js發(fā)送短信倒計(jì)時(shí)的簡(jiǎn)單實(shí)現(xiàn)方法
- 基于JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無(wú)視頁(yè)面刷新,頁(yè)面關(guān)閉不進(jìn)行倒計(jì)時(shí)功能)
- js倒計(jì)時(shí)顯示實(shí)例
相關(guān)文章
微信小程序按鈕點(diǎn)擊動(dòng)畫效果的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序按鈕點(diǎn)擊動(dòng)畫效果的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09DropDownList控件綁定數(shù)據(jù)源的三種方法
本文給大家分享web 中 DropDownList綁定數(shù)據(jù)源的幾種方式以及DropdownList控件動(dòng)態(tài)綁定數(shù)據(jù)源的兩種方法,下面通過(guò)本文給大家詳細(xì)介紹,感興趣的朋友一起看看2016-12-12Layui table field初始化加載時(shí)進(jìn)行隱藏的方法
今天小編就為大家分享一篇Layui table field初始化加載時(shí)進(jìn)行隱藏的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09js編寫trim()函數(shù)及正則表達(dá)式的運(yùn)用
js中本身是沒(méi)有trim函數(shù)的,不過(guò)你可以自己寫一個(gè),下面的實(shí)現(xiàn)方法是用到了正則表達(dá)式,效率不錯(cuò),并把這三個(gè)方法加入String對(duì)象的內(nèi)置方法中去2013-10-10JavaScript字符串String和Array操作的有趣方法
字符串和數(shù)組在程序編寫過(guò)程中是十分常用的類型,因此程序語(yǔ)言都會(huì)將String和Array作為基本類型,并提供許多字符串和數(shù)組的方法來(lái)簡(jiǎn)化對(duì)字符串的操作2012-12-12js實(shí)現(xiàn)拖拽 閉包函數(shù)詳細(xì)介紹
在開(kāi)發(fā)過(guò)程中可能會(huì)使用js實(shí)現(xiàn)拖拽等相關(guān)功能,本文將以此問(wèn)題進(jìn)行深入介紹,需要了解的朋友可以參考下2012-11-11小程序兩種滾動(dòng)公告欄的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序兩種滾動(dòng)公告欄的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09js中document.write使用過(guò)程中的一點(diǎn)疑問(wèn)解答
本文為大家介紹下為何如果在頁(yè)面加載完后如果調(diào)用document.write就會(huì)覆蓋整個(gè)文檔2014-03-03