JS與React分別實現倒計時(天時分秒)
阿新 • • 發佈:2020-08-09
JS方法
html部分
<div class="clock"> <i></i> 天 <i></i> : <i></i> : <i></i> 後截止統計 </div>
css部分
.clock{ width: 13.7rem; height: 1rem; margin-top:31.42rem; color: #666666; font-size: 0.85rem; line-height: 1rem; } .clock i{ background: #ED0007; color: #FFF; font-weight: bold; width: 1.2rem; height: 1.04rem; line-height: 1.04rem; text-align: center; display: inline-block; }
js部分
let clock = document.getElementsByClassName('clock'); setInterval(function(){ let nowtime = new Date(); let endtime = new Date(2020,9,1,0,0,0); //設定的截止日期是10月1日,注意 Date方法中的月份提前一個月 let num = endtime.getTime() - nowtime.getTime() //以number形式表示的時間戳之差 // 以下是計算分時秒的過程 let day = parseInt(num/(1000*60*60*24)); num %= 1000*60*60*24; let hour= parseInt(num/(60*60*1000)); num %= 1000*60*60; let minute = parseInt(num/(60*1000)); num %= 60*1000; let second = parseInt(num/1000); clock[0].children[0].innerHTML = day; clock[0].children[1].innerHTML = hour; clock[0].children[2].innerHTML = minute; clock[0].children[3].innerHTML = second; },100)
React方法
最大不同就是對dom元素的內容展示,間接轉為對state的控制。
import React from 'react'; import ReactDOM from 'react-dom'; import './Clock.less'; class Clock extends React.Component { constructor(props) { super(props); console.log(props) this.state = { day: 0, hour: 0, min: 0, sec: 0, isShow:true, } } componentDidMount () { this.countClock(); } componentWillUnmount() { clearTimeout(this.timer); } countClock = ()=> { this.timer = setInterval(() => { var nowtime = new Date(); var endtime = new Date(2020,8,4,0,0,0); //設定的截止日期是10月1日 var num = endtime.getTime() - nowtime.getTime() //以number形式表示的時間戳之差 if(num<=0){ clearInterval(this.timer); changeStatus(); this.setState({ day: 0, hours: 0, min: 0, sec: 0, isShow:false, }); }else{ var day = parseInt(num/(1000*60*60*24)); num %= 1000*60*60*24; var hour = parseInt(num/(60*60*1000)); num %= 1000*60*60; var minute = parseInt(num/(60*1000)); num %= 60*1000; var second = parseInt(num/1000); this.setState({ day:day, hour:hour, min:minute, sec:second, isShow:true, }) } },100) } render() { const { day,hour,min,sec } = this.state; return ( <div> <i>{day}</i> 天 <i>{hour}</i> : <i>{min}</i> : <i>{sec}</i> 後截止統計 </div> ); } } export default Clock;
可能方法還是比較愚鈍的,希望可以給出更好的答案!