写一个倒计时

写一个倒计时

需要用到的知识点:

1、获取当前时间 var date = new Date();

2、获取Date总的毫秒数(距离1970年1月1日过了多少毫秒。(时间戳))的四种方法:

valueOf()、getTime()、+new Date()、Date.now()

3、转换公式

​ d = parseInt(总秒数 /60/60 /24); //计算天数

​ h = parseInt(总秒数 /60/60 %24); //计算小时

​ m = parseInt(总秒数 /60 %60); //计算分数

​ s = parseInt(总秒数 %60); //计算秒数

4、三元运算符

5、毫秒转秒 /1000

方法1

function countDown(time){
        //当前时间总毫秒数
        var nowTime = +new Date();
        //用户输入时间的总毫秒数
        var inputTime = +new Date(time);
        //相减  剩余时间总的毫秒数    //毫秒转秒 /1000
        var times = (inputTime - nowTime) / 1000;
        //
        var d = parseInt(times /60/60 /24);   //天
        d = d < 10 ? '0'+ d : d;
        var h = parseInt(times /60/60 %24);   //时
        h = h < 10 ? '0'+ h : h;
        var m = parseInt(times /60 %60);      //分
        m = m < 10 ? '0'+ m : m;
        var s = parseInt(times %60);          //秒
        s = s < 10 ? '0'+ s : s;
        return d + "天" + h + "时" + m + '分' + s + "秒";
     }
     console.log(countDown('2021-11-1 10:00:00'));

方法2

//1.获取将来时间
		var preTime= new Date("2021-10-31");
		//2.封装变化的时间
		function F1(){
			//3.获取当前时间
			var newTime=new Date();
			//4.两者差值为毫秒值
			var target = preTime-newTime;
			//5.换算成秒
			var time=Math.round(target /1000)
			//console.log(time)
			document.getElementById("a").innerHTML="现在距离10月31日还有:"+time+"秒";
		}
		//定时器需要间隔一秒执行
		//所有需要提前调用一次
		//6.单独调用一次,如果只是单独的想获取时间就没有必要封装一个函数和调用
		F1();
		//7.设置定时器
		setInterval(F1,1000)

方法3

//1.获取将来时间
		var preTime= new Date("2021-10-31");
		setInterval(function(){
		//3.获取当前时间
		var newTime=new Date();
		//4.两者差值为毫秒值
		var target = preTime-newTime;
		//5.换算成秒
		var time=Math.round(target /1000)
		//console.log(time);
		document.getElementById("a").innerHTML="现在距离10月1日还有:"+time+"秒";
		},1000);

方法4

//实现一个距离10月31日以秒倒计时
		function startTime(){
			//1.定义将来事件
			var preDate=new Date('2021/10/31 00:00:00');
			var preTimes=preDate.getTime();//获取目标日期距离1970年1月1日毫秒数
			//开始定时器
			setInterval(function(){
				//3.获取当前时间
				var nowDate=new Date();
				//4.获取距离1970年1月1日毫秒数
				var nowTimes=nowDate.getTime();
				//5.获取剩余毫秒数
				var lastTimes=preTimes - nowTimes;
				//6.毫秒数转换   毫秒换成秒
				var lastSeconds=parseInt(lastTimes/1000);
				document.getElementById("txt").innerHTML="距离:10月31日还有:"+lastSeconds+"秒"
				
			},1000)
		}

                     其实方法都差不多T v T.
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值