js中关于时间对象的两个小案例（跳动的时钟、倒计时设计）

ZHANGJIN9546

于 2019-07-02 17:33:04 发布

阅读量737

点赞数

分类专栏：案例文章标签： js中关于时间对象的两个小案例（跳动的时钟、倒计时设计）

本文链接：https://blog.youkuaiyun.com/ZHANGJIN9546/article/details/94460491

版权

本文通过两个JavaScript案例展示了如何利用时间对象创建动态跳动的时钟和设计倒计时功能。案例一是实时更新显示当前时间的跳动时钟，案例二是实现设定时间点的倒计时计时器，对于理解和应用JavaScript时间处理非常有帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 案例一：跳动的时钟

/*实现思路
获取当时时间，再根据当前时间分别获取年、月、日、小时、分、秒将这些拼接为字符串
判断月、日、小时、分、秒为以为数时，在前面加一个0
将拼接的字符串放入页面中
设置一个定时器，每一秒获取一次当前时间、实现时间的动态变化
*/
  function dateToString( d ){
	var y = d.getFullYear();
	var m = toTwo( d.getMonth() + 1 );
	var d1 = toTwo( d.getDate()  );
	var h = toTwo( d.getHours()  );
	var mi = toTwo( d.getMinutes()  );
	var m = toTwo( d.getSeconds()  );
	reurn y + "-"+m+"-"+d1+"-"+h+"-"+mi+"-"+s;
}

function toTwo( str ){
	return str < 10 ? "0" +str : str;
}
var otime  = document.getElementById("time")
var timer = otime.value;
function showTime(){
	var d = new Date();
	time.innerHTML = dateToString( d );
}
setInterval(function(){
	showTime()
},1000)

// 案例二倒计时设计

/* 实现思路:1、已知当前的时间  和  结束时间 
	 		  2、获取时间差 （毫秒值） diff/1000  秒  总秒数 t
	 		  3、剩余的小

最低0.47元/天解锁文章