用JS寫了一個30分鐘倒計時器的實現(xiàn)示例

第用JS寫了一個30分鐘倒計時器的實現(xiàn)示例前端頁面倒計時功能在很多場景中會用到，如很多秒殺活動等，本文主要介紹了用JS寫了一個30分鐘倒計時器的實現(xiàn)示例，感興趣的可以了解一下

!DOCTYPEHTML

html

head

metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/

titleCountdownTimer/title

styletype="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

spanid="numbers"/span

tableid="table1"

tr

td/td

td/td

/tr

tr

tdcolspan=2

inputid="content"/

/td

/tr

tr

tdcolspan=2

canvasid="myCanvas"height="6"

Yourbrowserdoesnotsupportthecanvaselement.

/canvas

/td

/tr

/table

audioid='music'

sourcesrc="music/WindowsXP啟動.wav"type="audio/mpeg"

Yourbrowserdoesnotsupporttheaudiotag.

/audio

audioid='music2'

sourcesrc="music/WindowsXP關(guān)機.wav"type="audio/mpeg"

Yourbrowserdoesnotsupporttheaudiotag.

/audio

scripttype="text/javascript"

vartimer={

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)度條

vartable=document.getElementById("table1")

varspan=document.getElementById('numbers')

//刷新進(jìn)度條

//table2.style.width=

table.style.width=span.offsetWidth+"px"

varprogress=1

if(this.restSeconds0)

progress=this.restSeconds/(this.initMinutes*60)

document.querySelector('#table1td:nth-of-type(1)').style.width=progress*100+"%"

vartd2=document.querySelector('#table1td:nth-of-type(2)')

if(progress1){

td2.style.width=(1-progress)*100+"%"

}else{

td2.style.display="none"

}

varcanvas=document.getElementById('myCanvas')

canvas.width=span.offsetWidth

varctx=canvas.getContext("2d")

varrectWeight=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()

varspan=document.getElementById('numbers')

this.setFontSize()

this.restSeconds=this.initMinutes*60

this.minute=this.initMinutes

varobj=this

this.handle=setInterval(function(){

if(obj.stopFlag)

return

if(obj.restSeconds0){

span.innerHTML=""+(obj.minute10"0"+obj.minute:obj.minute)+":"+

(!obj.coverFlag(obj.second10"0"+obj.second:obj.second):"nbsp;".repeat(4))

if(obj.restSeconds0){

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()

//跑完后記錄

varcontent=document.getElementById("content").value

obj.markdownRecord(content)

//不停地閃爍

window.setInterval(function(){

span.innerHTML=(span.innerHTML=="Time")"isup.":"Time"

},5000)

}

},1000)

document.getElementById("music").play()

varnumbers=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.restSeconds0)

return

varcontent=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){

varrecords=[]

vartimerHistory=localStorage.getItem("timerHistory")

if(timerHistory!=null){

records=JSON.parse(timerHistory)

}

varlastRecord=records[0]

if(lastRecordlastRecord.start==this.startTime){

lastRecord.note=content

}else{

varhistory={

start:this.startTime,

duration:this.initMinutes,

note:content

}

records.unshift(history)//數(shù)組頭插入元素

}

varrecordsJson=JSON.stringify(records)

//將結(jié)果存入本地

localStorage.setItem("timerHistory",recordsJson)

console.log(records[0])

console.log("MarkeditDown.")

},

exportHistory:function(){

varfilename='record'+Date.now()+'.txt'

vartext=localStorage.getItem('timerHistory')

this.exportFile(filename,text)