javaScript系列笔记 - JS生成倒计时

以动态修改p标签值为主

1、html 代码

<!-- daojishi -->
<div class="mask-app" style="height: 17%;">
	<div class="mask-time-box3" style="margin-top: -.1rem;">
		<div><p id="lazy">00:00</p></div>
	</div>
</div>

2、js 代码

let one_second,one_minute, one_hour, elapsed, face;

(function(){
    
    //倒计时函数 设置倒计时时间 单位：毫秒 36000为6分钟
    timeShow(36000);

})();

function timeShow(millisecond){
    one_second = 1000;                       //设置一秒为1000毫秒
    one_minute = one_second * 60;            //设置一分为60000毫秒
    one_hour = one_minute * 60;              //设置小时为3600000毫秒
    face = document.getElementById('lazy');  //上面定义的p标签  00:00

    elapsed = millisecond; //赋值给倒计时函数
    tick();
}

function tick() {

    if (elapsed == 0) {
        elapsed = 361000;
    }

    elapsed = elapsed - 1000;
    let parts = [];

    parts[0] = '' + Math.floor( (elapsed % one_hour) / one_minute );
    parts[1] = '' + Math.floor( ( (elapsed % one_hour) % one_minute ) / one_second );
    console.info(parts[0]+ "-----" + parts[1]);

    parts[0] = (parts[0].length == 1) ? '0' + parts[0] : parts[0];  //分
    parts[1] = (parts[1].length == 1) ? '0' + parts[1] : parts[1];  //秒


    face.innerText = parts.join(':');
    setTimeout(tick, 1000);           //每过一秒重新计算 时间
}

3、css 代码

<style>
        .mask-app{bottom: 0;width:100%;border-top-right-radius:.2rem;border-top-left-radius:.2rem;background-color:#fff;height: 25%;position: fixed;}
        .mask-app-box3{align-items:center;justify-content:center;border-top:1px solid #9B9688;height: .6rem;width: 90%;margin: .1rem .2rem 0 .2rem;}
        .mask-app-box3 div{width:50%;text-align: center;align-items: center}
        .mask-app-box3 div span{color: #9B9688;font-size: .13rem;font-family: PingFangSC-Semibold, PingFang SC;width: 20%}
</style>

4、如果所设倒计时值大于一个小时，见如下代码：

function tick() {

	let now = new Date();
	let elapsed = now - new Date(startDate);
	let parts = [];

	parts[0] = '' + Math.floor( elapsed / one_hour );
	parts[1] = '' + Math.floor( (elapsed % one_hour) / one_minute );
	parts[2] = '' + Math.floor( ( (elapsed % one_hour) % one_minute ) / one_second );

	parts[0] = (parts[0].length == 1) ? '0' + parts[0] : parts[0];   //时
	parts[1] = (parts[1].length == 1) ? '0' + parts[1] : parts[1];   //分
	parts[2] = (parts[2].length == 1) ? '0' + parts[2] : parts[2];   //秒

	face.innerText = parts.join(':');

	requestAnimationFrame(tick);
}

    设置p标签   <p id="lazy">00:00:00</p>   即可。

<!-- daojishi -->
<div class="mask-app" style="height: 17%;">
	<div class="mask-time-box3" style="margin-top: -.1rem;">
		<div><p id="lazy">00:00:00</p></div>
	</div>
</div>

思路解析：

                parts[0] = '' + Math.floor( (elapsed % one_hour) / one_minute );  即：           

                parts[0] = '' + Math.floor( (360000 % 3600000) / 60000 );

.1  360000  (表示当前毫秒值为360000，即6分钟)，除以3600000(即60分钟，一个小时) == 0, 我们设置的毫秒值并不够一个小时。

360000%360000=360000； 取余为  360000 毫秒

.2  余数 360000\60000 = 6; 得出总分钟数 为   6分钟。下面写到如果 parts[0].length == 1，就在前面追加一个0" ， 即 06:00；

  parts[0] = (parts[0].length == 1) ? '0' + parts[0] : parts[0]; 

.3 计算秒 同理。 都是基于总毫秒值计算的。

.4 设置延迟器，每过1秒，调用方法为p标签重新赋值。

setTimeout(tick, 1000);