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

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

// 案例一 : 跳动的时钟

/*实现思路
获取当时时间,再根据当前时间分别获取年、月、日、小时、分、秒将这些拼接为字符串
判断月、日、小时、分、秒为以为数时,在前面加一个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、剩余的小
Js双日历控件,在一个网页上同时显示两个日期选择器,写成了封装类,方便使用者调用。同时美化的相当不错。   包括了以下函数:   1、2012——2020年节假日信息(包括节假日前1~3天/后1~3天)   2、格式化数字,不足两位前面补0   3、将日期对象/日期字会串格式化为指定日期字符串   4、将日期字符串格式化为数字   5、获取目标元素针对于文档的位置   6、元素选择器   7、查找元素位置   8、判断目标元素是否包含指定的className      关于一些日历调用的参数说明:Calendar({    id: "#J_date_1", //触发显示日历元素ID    isPopup: !0, //弹出式日历    isPrevBtn: !0, //显示上月按钮    isNextBtn: !0, //显示下月按钮    isCloseBtn: !0, //显示关闭按钮    isHoliday: !0, //节假日特殊显示    isHolidayTips: !0, //显示节假日1~3天/后1~3天信息    isDateInfo: !0, //显示日期信息    isMessage: !0, //有日历提示信息    isCalStart: !0, //标记为开始时间    dateInfoClass: "date-info-start", //开始时间icon样式    range: {mindate: "2011-09-01", maxdate: "2020-12-31"},//限制范围(当天——2020-12-31)    count: 2, //日历个数    monthStep: 1, //切换上下月日历步长    onSelectDate: fnSelectDate, //选择日期回调方法    onClose: fnClose //关闭日历回调方法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值