前端 —— JavaScript 基础篇 21 --- 倒计时 demo

最新推荐文章于 2022-01-09 16:10:50 发布

原创

最新推荐文章于 2022-01-09 16:10:50 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文介绍了使用JavaScript创建倒计时的经典示例，通过解析时间戳实现从目标时间到当前时间的毫秒差，进而转换为天、小时、分钟和秒。文章提供了详细的计算逻辑，并分享了一个倒计时插件的链接，适合前端开发者学习参考。

前面提到了计时器。今天上个倒计时的例子，很经典的一个小 demo。直接上代码了。反正是为了方便自己日后复制粘贴。若是能帮到大家，那最好不过，拿走不谢！

html 部分：

<style type="text/css">
	div{
		margin:20px auto;
		text-align: center;
	}
</style>

<div>
	<span>现在的时间时：</span><span class="nowtime"></span>
</div>
<div>
	<span>距离 2020年10月01日还有：</span>
	<span class="comingtime"></span>
</div>

js 部分：

var eleNowTime = document.querySelector('.nowtime'),
    eleComingTime = document.querySelector('.comingtime');

function getTimes() {
	var nowTime = new Date();
	var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
	var year = nowTime.getFullYear(),
		month = nowTime.getMonth() + 1,
		day = nowTime.getDate(),
		h = nowTime.getHours(),
		m = nowTime.getMinutes(),
		s = nowTime.getSeconds(),
		week = arr[nowTime.getDay()];//利用获取的数值作为数组的下标，好显示星期几

		if (month < 10 ) {
			month

最低0.47元/天解锁文章