js 倒计时

xiaoxiao2021-03-01  16

html:

<span id="hour"></span>:<span id ='min'></span>:<span id='sec'></span>

js:

class CounterDown{ constructor(year,month,day,hour,min,sec){ // Date()获取当前时间 getFullYeat()和Date()配合使用,获取当前年(四位数) this.year = year || new Date().getFullYear(); // Date()获取当前时间 getMonth()和Date()配合使用,获取当前月 this.month = month || new Date().getMonth()+1; this.day = day || 1; this.hour = hour || 0; this.min = min || 0; this.sec = sec || 0; // Date()获取当前时间, new Date()根据传入的时间格式设置一个新的时间,参数为空时,默认为当前时间,注意月份是0~11月 this.createTime = new Date(this.year,this.month-1,this.day,this.hour,this.min,this.sec) // 将设置的时间转换为时间戳 this.timestamp = this.createTime.getTime() console.log('cc',this.timestamp,this.createTime) } get(){ // 获取当前时间 var cTime = new Date() // 当前时间戳 var cStamp = cTime.getTime() // console.log(cStamp,this.timestamp) // 设置的时间戳-当前时间戳 装换成时/分/秒 var juliHour = parseInt((this.timestamp - cStamp)/(60*60*1000)) // console.log(juliHour) var minTime = (this.timestamp - cStamp)%(60*60*1000) var juliMin = parseInt(minTime/(60*1000)) // console.log(juliMin) var secTime = minTime%(60*1000) var juliSec = parseInt( secTime/1000) if(juliHour<10){ juliHour = '0' + juliHour; } if(juliMin<10){ juliMin = '0' + juliMin } if(juliSec<10){ juliSec = '0' + juliSec } // 通过字面量形式创造对象 var abc = { hour:juliHour, min:juliMin, sec:juliSec } return abc } } //传参调用类,获取设置的时间 var x = new CounterDown(2018,9,15,19,0,0) console.log(x) // setInterval 间隔函数 setInterval(function(){ var c = x.get() // 这时c相当于返回的abc document.querySelector('#hour').innerHTML = c.hour document.querySelector('#min').innerHTML = c.min document.querySelector('#sec').innerHTML = c.sec },1000) //倒计时关键知识点: constructor(){} 类的构造函数 Date() : 获取当前时间,或传入时间格式的数据设置时间. getTime() : 将时间转换成时间戳, setInterval(fun,1000) 间隔函数 // Date()获取当前时间, new Date()根据传入的时间格式设置一个新的时间,参数为空时,默认为当前时间,注意月份是0~11月,要减一 // this.createTime = new Date(this.year,this.month-1,this.day,this.hour,this.min,this.sec)
转载请注明原文地址: https://www.6miu.com/read-3350018.html

最新回复(0)