用JS寫了一個(gè)30分鐘倒計(jì)時(shí)器的實(shí)現(xiàn)示例
更新時(shí)間：2022年03月14日 08:30:19 作者：巨輪
本文主要介紹了用JS寫了一個(gè)30分鐘倒計(jì)時(shí)器的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
前端頁面倒計(jì)時(shí)功能在很多場景中會用到，如很多秒殺活動等，本文主要介紹了用JS寫了一個(gè)30分鐘倒計(jì)時(shí)器的實(shí)現(xiàn)示例，感興趣的可以了解一下
<!DOCTYPE HTML>
<html>
?? ?<head>
?? ??? ?<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
?? ??? ?<title>Countdown Timer</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?input{
?? ??? ??? ? ? ?padding-bottom: 0px;
?? ??? ??? ??? ?padding-top: 0px;
?? ??? ??? ??? ?border-top-width: 0px;
?? ??? ??? ??? ?border-left-width: 0px;
?? ??? ??? ??? ?border-right-width: 0px;
?? ??? ??? ??? ?font-size: 20px;
?? ??? ??? ??? ?width:100%;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?
?? ?<body>
?? ??? ?<span id="numbers" style="white-space:nowrap;"></span>
?? ??? ?
?? ??? ?<table id="table1" >
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td style="background-color:rgb(41, 74, 155);padding:3px;"></td>
?? ??? ??? ??? ?<td></td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td style="width:100%;" colspan=2>
?? ??? ??? ??? ??? ?<input id="content"/>
?? ??? ??? ??? ?</td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td style="width:100%;" colspan=2>
?? ??? ??? ??? ??? ?<canvas id="myCanvas" height="6">
?? ??? ??? ??? ??? ?Your browser does not support the canvas element.
?? ??? ??? ??? ??? ?</canvas>
?? ??? ??? ??? ?</td>
?? ??? ??? ?</tr>
?? ??? ??? ?
?? ??? ??? ?
?? ??? ?</table>
?? ??? ?
?? ??? ?<audio id='music'>
?? ??? ? ?<source src="music/Windows XP 啟動.wav" type="audio/mpeg">
?? ??? ? ?Your browser does not support the audio tag.
?? ??? ?</audio>
?? ??? ?
?? ??? ?<audio id='music2'>
?? ??? ? ?<source src="music/Windows XP 關(guān)機(jī).wav" type="audio/mpeg">
?? ??? ? ?Your browser does not support the audio tag.
?? ??? ?</audio>
?? ??? ?
?? ??? ?<script type="text/javascript" >
?? ??? ??? ?var timer = {
?? ??? ??? ??? ?initMinutes:30,
?? ??? ??? ??? ?restSeconds:0,
?? ??? ??? ??? ?minute:0,
?? ??? ??? ??? ?second:0,
?? ??? ??? ??? ?handle:0,
?? ??? ??? ??? ?stopFlag:false,
?? ??? ??? ??? ?startTime:0,
?? ??? ??? ??? ?content:"asdasd",
?? ??? ??? ??? ?coverFlag:false,
?? ??? ??? ??? ?setFontSize:function(){
?? ??? ??? ??? ??? ?document.getElementById("numbers").style.fontSize = (window.innerWidth
?? ??? ??? ??? ??? ??? ??? ??? ?|| document.documentElement.clientWidth
?? ??? ??? ??? ??? ??? ??? ??? ?|| document.body.clientWidth) / 3 + "px"
?? ??? ??? ??? ?},
?? ??? ??? ??? ?refreshTable:function(){
?? ??? ??? ??? ??? ?//進(jìn)度條
?? ??? ??? ??? ??? ?var table = document.getElementById("table1")
?? ??? ??? ??? ??? ?var span = document.getElementById('numbers')
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?//刷新進(jìn)度條
?? ??? ??? ??? ??? ?//table2.style.width =?
?? ??? ??? ??? ??? ?table.style.width = span.offsetWidth + "px"
?? ??? ??? ??? ??? ?var progress = 1
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?if(this.restSeconds > 0)
?? ??? ??? ??? ??? ??? ?progress = this.restSeconds / (this.initMinutes * 60)
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?document.querySelector('#table1 td:nth-of-type(1)').style.width = progress * 100 + "%"
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?var td2 = document.querySelector('#table1 td:nth-of-type(2)')
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?if (progress < 1){
?? ??? ??? ??? ??? ??? ?td2.style.width = (1 - progress) * 100 + "%"
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?td2.style.display = "none"
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?var canvas = document.getElementById('myCanvas')
?? ??? ??? ??? ??? ?canvas.width = span.offsetWidth
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?var ctx = canvas.getContext("2d")
?? ??? ??? ??? ??? ?var rectWeight = progress * span.offsetWidth
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?ctx.clearRect(0, 0, span.offsetWidth, 20)
?? ??? ??? ??? ??? ?ctx.fillStyle = "#FF0000"
?? ??? ??? ??? ??? ?//console.log("rectWeight: " + rectWeight)
?? ??? ??? ??? ??? ?//console.log(progress * span.offsetWidth)
?? ??? ??? ??? ??? ?ctx.fillRect(0, 0, rectWeight, 20)
?? ??? ??? ??? ?},
?? ??? ??? ??? ?init:function(){
?? ??? ??? ??? ??? ?this.startTime = Date.now()
?? ??? ??? ??? ??? ?var span = document.getElementById('numbers')
?? ??? ??? ??? ??? ?this.setFontSize()
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?this.restSeconds = this.initMinutes * 60?
?? ??? ??? ??? ??? ?this.minute = this.initMinutes
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?var obj = this
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?this.handle = setInterval(function(){
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?if(obj.stopFlag)
?? ??? ??? ??? ??? ??? ??? ?return
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?if(obj.restSeconds > 0){
?? ??? ??? ??? ??? ??? ??? ?span.innerHTML = "" + (obj.minute < 10 ? "0" + obj.minute : obj.minute) + ":" +?
?? ??? ??? ??? ??? ??? ??? ?(!obj.coverFlag ? (obj.second < 10 ? "0" + obj.second : obj.second) : " ".repeat(4))
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ?if(obj.restSeconds > 0){
?? ??? ??? ??? ??? ??? ??? ??? ?obj.restSeconds -= 1
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ?obj.minute = ?Math.floor(obj.restSeconds / 60)
?? ??? ??? ??? ??? ??? ??? ?obj.second = ?obj.restSeconds - obj.minute * 60
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ?//刷新進(jìn)度條
?? ??? ??? ??? ??? ??? ??? ?obj.refreshTable()
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ?span.innerHTML = "Time "
?? ??? ??? ??? ??? ??? ??? ?window.clearInterval(obj.handle)
?? ??? ??? ??? ??? ??? ??? ?document.getElementById("music2").play()
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ?//跑完后記錄
?? ??? ??? ??? ??? ??? ??? ?var content = document.getElementById("content").value
?? ??? ??? ??? ??? ??? ??? ?obj.markdownRecord(content)
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ?//不停地閃爍
?? ??? ??? ??? ??? ??? ??? ?window.setInterval(function(){
?? ??? ??? ??? ??? ??? ??? ??? ?span.innerHTML = (span.innerHTML == "Time ")?"is up.":"Time "
?? ??? ??? ??? ??? ??? ??? ?}, 5000)
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?}, 1000)
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?document.getElementById("music").play()
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?var numbers = document.getElementById("numbers")
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?numbers.addEventListener("click", function(){
?? ??? ??? ??? ??? ??? ?obj.coverFlag = !obj.coverFlag
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?numbers.addEventListener("dblclick", function(){
?? ??? ??? ??? ??? ??? ?obj.stopFlag = !obj.stopFlag
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?document.getElementById('content').addEventListener("blur", function(){
?? ??? ??? ??? ??? ??? ?if(obj.restSeconds > 0)
?? ??? ??? ??? ??? ??? ??? ?return
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?var content = document.getElementById("content").value
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?if(this.content != content){
?? ??? ??? ??? ??? ??? ??? ?this.content = content
?? ??? ??? ??? ??? ??? ??? ?obj.markdownRecord(content)
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?document.getElementById('table1').addEventListener("dblclick", function(){
?? ??? ??? ??? ??? ??? ?console.log("timerHistory:")
?? ??? ??? ??? ??? ??? ?console.log(localStorage.getItem('timerHistory'))
?? ??? ??? ??? ??? ??? ?console.log("\n")
?? ??? ??? ??? ??? ??? ?obj.exportHistory()
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?},
?? ??? ??? ??? ?markdownRecord:function(content){
?? ??? ??? ??? ??? ?var records = []
?? ??? ??? ??? ??? ?var timerHistory = localStorage.getItem("timerHistory")
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?if(timerHistory != null){
?? ??? ??? ??? ??? ??? ?records = JSON.parse(timerHistory)
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?var lastRecord = records[0]
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?if(lastRecord && lastRecord.start == this.startTime){
?? ??? ??? ??? ??? ??? ?lastRecord.note = content
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?var history = {
?? ??? ??? ??? ??? ??? ??? ?start:this.startTime,
?? ??? ??? ??? ??? ??? ??? ?duration:this.initMinutes,
?? ??? ??? ??? ??? ??? ??? ?note:content
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?records.unshift(history)//數(shù)組頭插入元素?? ??? ??? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?var recordsJson = JSON.stringify(records)
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?//將結(jié)果存入本地
?? ??? ??? ??? ??? ?localStorage.setItem("timerHistory", recordsJson)
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?console.log(records[0])
?? ??? ??? ??? ??? ?console.log("Marked it Down.")
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?},
?? ??? ??? ??? ?exportHistory:function(){
?? ??? ??? ??? ??? ?var filename = 'record' + Date.now() +'.txt'
?? ??? ??? ??? ??? ?var text = localStorage.getItem('timerHistory')
?? ??? ??? ??? ??? ?this.exportFile(filename, text)
?? ??? ??? ??? ?},
?? ??? ??? ??? ?exportFile:function(filename, text){
?? ??? ??? ??? ??? ?var element = document.createElement('a');
?? ??? ??? ??? ??? ?element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
?? ??? ??? ??? ??? ?element.setAttribute('download', filename);
?? ??? ??? ??? ??? ?element.style.display = 'none';
?? ??? ??? ??? ??? ?document.body.appendChild(element);
?? ??? ??? ??? ??? ?element.click();
?? ??? ??? ??? ??? ?document.body.removeChild(element);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?window.onresize = function(){
?? ??? ??? ??? ?timer.setFontSize()
?? ??? ??? ??? ?timer.refreshTable()
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?//pause
?? ??? ??? ?window.onclick = function(){
?? ??? ??? ??? ?//timer.stopFlag = !timer.stopFlag
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?//main
?? ??? ??? ?window.onload = function(){
?? ??? ??? ??? ?timer.init()?? ?
?? ??? ??? ?}
?? ??? ?</script>
?? ?</body>
</html>
到此這篇關(guān)于用JS寫了一個(gè)30分鐘倒計(jì)時(shí)器的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)JS 倒計(jì)時(shí)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- js實(shí)現(xiàn)日期天數(shù)、時(shí)分秒的倒計(jì)時(shí)完整代碼
- JavaScript實(shí)現(xiàn)倒計(jì)時(shí)功能2種方法實(shí)例
- JavaScript倒計(jì)時(shí)定時(shí)器和間隔定時(shí)器使用詳解
- 一步步教你用js簡單實(shí)現(xiàn)新年倒計(jì)時(shí)
- JS實(shí)現(xiàn)簡單網(wǎng)頁倒計(jì)時(shí)器
- javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例
- JavaScript實(shí)現(xiàn)簡單的倒計(jì)時(shí)效果
- JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例
相關(guān)文章
這篇文章主要介紹了JavaScript性能提升，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript關(guān)于復(fù)選框的實(shí)用腳本代碼
javascript關(guān)于復(fù)選框的實(shí)用腳本代碼...2007-08-08
JS庫中的Particles.js在vue上的運(yùn)用案例分析
這篇文章主要介紹了JS庫中的Particles.js在vue上的運(yùn)用案例分析,需要的朋友可以參考下2017-09-09
JavaScript運(yùn)動減速效果實(shí)例分析
這篇文章主要介紹了JavaScript運(yùn)動減速效果,模擬了物體做減速運(yùn)動的效果,以兩個(gè)實(shí)例形式分析了javascript實(shí)現(xiàn)物體做減速運(yùn)動的實(shí)現(xiàn)技巧,涉及javascript動態(tài)操作頁面元素樣式及數(shù)學(xué)運(yùn)算的方法,非常簡潔實(shí)用,需要的朋友可以參考下2015-08-08
分包指的是把一個(gè)完整的小程序項(xiàng)目,按照需求劃分為不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶在使用時(shí)按需進(jìn)行加載,下面這篇文章主要給大家介紹了關(guān)于微信小程序分包流程步驟的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了javascript 數(shù)組操作詳解,需要的朋友可以參考下2015-01-01
JS基于面向?qū)ο髮?shí)現(xiàn)的多個(gè)倒計(jì)時(shí)器功能示例
這篇文章主要介紹了JS基于面向?qū)ο髮?shí)現(xiàn)的多個(gè)倒計(jì)時(shí)器功能,結(jié)合實(shí)例形式分析了javascript面向?qū)ο蠹皶r(shí)間操作相關(guān)技巧,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了利用js+canvas實(shí)現(xiàn)掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了JsonProperty 的使用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
在文本框中輸入完內(nèi)容后,經(jīng)常需要按回車,焦點(diǎn)跳到下個(gè)文本框,或者觸發(fā)按鈕事件2010-06-06