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

关注

VIP免费原创最新推荐文章于 2026-03-23 00:19:13 发布 306 阅读 AI 写同款· GEO 优化 ›

前端精美小Demo之---可调倒计时实现可调倒计时实现　　说明：完全通过HTML、CSS和JavaScript实现倒计时的动态可调，可控制倒计时的暂停和继续，在倒计时进行期间不可对倒计时时间进行修改，任何时候都可以对倒计时进行重置；背景图等都可调。　　实现代码：可到https://github.com/wangchengiii/Countdown-获取。　　下面为可调倒计时的部分效果图：　　　　　　　　以上是简单的阅读详情

前面提到了计时器。今天上个倒计时的例子，很经典的一个小 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