js帶鬧鈴功能的倒計(jì)時(shí)代碼
Js倒計(jì)時(shí)代碼,帶鬧鈴功能,自定義鬧鐘倒計(jì)時(shí)功能,點(diǎn)擊開始按鈕,即可開始倒數(shù),代碼不是太復(fù)雜,新手應(yīng)該能看懂,代碼分享給大家。
效果圖:
源碼:
<html> <head> <title>Js倒計(jì)時(shí),鬧鈴功能</title> <script language="javascript"> function $(id){ return document.getElementById(id); } function down(){ $("second").value-=1; if($("second").value==0&&$("minutes").value==0&&$("hours").value==0) { window.alert("干正事了!?。?); clearInterval(timeout); } if($("second").value==-1) { $("second").value=59; $("minutes").value-=1; } if($("minutes").value==-1) { $("minutes").value=59; $("hours").value-=1; } } var timeout; function begin(){ timeout=setInterval("down()",1000); } function stop(){ clearInterval(timeout); } var dt=new Date(); function setclock() { var hours=$("clock_hours").value-dt.getHours(); var minutes=$("clock_minutes").value-dt.getMinutes(); if(minutes<0) { if(hours<0) { $("minutes").value=60-Math.abs(minutes); $("hours").value=24-Math.abs(hours); } else if(hours==0) { $("minutes").value=60-Math.abs(minutes); $("hours").value=Math.abs(hours); } else { $("minutes").value=60-Math.abs(minutes); $("hours").value=Math.abs(hours)-1; } } else if(minutes==0) { if(hours<0) { $("minutes").value=Math.abs(minutes); $("hours").value=24-Math.abs(hours); } else if(hours==0) { $("minutes").value=Math.abs(minutes); $("hours").value=Math.abs(hours)+24; } else { $("minutes").value=Math.abs(minutes); $("hours").value=Math.abs(hours); } } else { if(hours<0) { $("minutes").value=60-Math.abs(minutes); $("hours").value=24-Math.abs(hours); } else if(hours==0) { $("minutes").value=Math.abs(minutes); $("hours").value=Math.abs(hours); } else { $("minutes").value=Math.abs(minutes); $("hours").value=Math.abs(hours); } } } function reset() { var time=document.getElementsByName("time"); for(i=0;i<time.length;i++) { time[i].value=0; } } </script> </head> <body> 距鬧鈴響起的時(shí)間還有:<input type="text" id="hours" style="width:20px" value="0" name="time" /> :<input type="text" id="minutes" value="0" style="width:20px" name="time"/>: <input type="text" id="second" value="0" style="width:20px" name="time"/><br/> <input type="text" id="clock_hours" value="0" style="width:20px" name="time"/>時(shí): <input type="text" id="clock_minutes" value="0" style="width:20px" name="time"/>分<br/> <input type="button" value="設(shè)置鬧鐘" onclick="setclock()" /> <input type="button" value="重置" onclick="reset()" /><br/> <input type="button" value="開始" onclick="begin()"> <input type="button" value="停止" onclick="stop()"> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于javascript實(shí)現(xiàn)的購(gòu)物商城商品倒計(jì)時(shí)實(shí)例
- JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù)、時(shí)、分、秒)
- js制作支付倒計(jì)時(shí)頁(yè)面
- JS實(shí)現(xiàn)表單驗(yàn)證功能(驗(yàn)證手機(jī)號(hào)是否存在,驗(yàn)證碼倒計(jì)時(shí))
- js完整倒計(jì)時(shí)代碼分享
- 最全面的JS倒計(jì)時(shí)代碼
- js發(fā)送短信倒計(jì)時(shí)的簡(jiǎn)單實(shí)現(xiàn)方法
- js精準(zhǔn)的倒計(jì)時(shí)函數(shù)分享
- JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)效果
- 點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)
- js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果
- Javascript實(shí)現(xiàn)倒計(jì)時(shí)(防頁(yè)面刷新)實(shí)例
相關(guān)文章
stream.js 一個(gè)很小、完全獨(dú)立的Javascript類庫(kù)
stream.js 是一個(gè)很小、完全獨(dú)立的Javascript類庫(kù),它為你提供了一個(gè)新的Javascript數(shù)據(jù)結(jié)構(gòu):streams2011-10-10JavaScript正則表達(dá)式校驗(yàn)與遞歸函數(shù)實(shí)際應(yīng)用實(shí)例解析
這篇文章主要介紹了JavaScript正則表達(dá)式校驗(yàn)與遞歸函數(shù)實(shí)際應(yīng)用,需要的朋友可以參考下2017-08-08Javascript查詢DBpedia小應(yīng)用實(shí)例學(xué)習(xí)
本文則嘗試?yán)肧PARQLWrapper.js來讀取DBpedia的數(shù)據(jù),并顯示出來,感興趣的你可以參考下,或許對(duì)你有所幫助2013-03-03微信小程序使用setData修改數(shù)組中單個(gè)對(duì)象的方法分析
這篇文章主要介紹了微信小程序使用setData修改數(shù)組中單個(gè)對(duì)象的方法,結(jié)合具體實(shí)例形式分析了setData進(jìn)行數(shù)組修改的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12Axios+Spring?Boot實(shí)現(xiàn)文件上傳和下載
這篇文章主要為大家詳細(xì)介紹了Axios+Spring?Boot實(shí)現(xiàn)文件上傳和下載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08一款好用的移動(dòng)端滾動(dòng)插件BetterScroll
BetterScroll 是一款重點(diǎn)解決移動(dòng)端各種滾動(dòng)場(chǎng)景需求的開源插件,用于滾動(dòng)列表、選擇器、輪播圖、索引列表、開屏引導(dǎo)等應(yīng)用場(chǎng)景,感興趣的一起來了解一下2021-09-09javascript實(shí)現(xiàn)圖片循環(huán)漸顯播放的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片循環(huán)漸顯播放的方法,涉及javascript操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02