日期对象与倒计时案例

日期对象

4.1 Date概述

Date对象和Math对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
Date实例用来处理日期和时间

4.2Date()方法的使用

1.获取当前时间必须实例化

在这里插入图片描述

2.Date()构造函数的参数

如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为’2019-5-1’ , 可以写成new Date("2019-5-1)或者new Date(‘2019/5/1’)

<script>
	 //Date()日期对象  是一个构造函数  必须使用new  来调用创建我们的日期对象
	  var arr = new Array();  //创建一个数组对象
        var obj = new Object(); //创建了一个对象实例
        //1.使用Date  如果没有参数  返回当前系统的当前时间
        var date = new Date();
        console.log(date);
        //2.参数常用的写法  数字型  2019,10,01  或者是字符串型'2019-10-1 8:8:8'
        var date1 = new Date(2019,10,1);
        console.log(date1);  //返回的是 11月 不是10月
        var date2 = new Date('2019-10-1 8:8:8');
        console.log(date2);
</script>

4.日期对象

4.3 日期格式化

  • 获取日期指定的部分,所以我们要手动的得到这种格式。
    在这里插入图片描述
<script>   
 var date = new Date();  
 console.log(date.getUTCFullYear()); //返回当前日期的年 2019    console.log(date.getMonth() +1);  
 console.log(date.getMonth() +1);   //月份 返回的月份小1个月 记得月份+1
    console.log(date.getDate());    //返回的是  几号
    console.log(date.getDay()); // 周一返回的是1 周六返回的是6 但是  周日返回的是0
    
    //我们写一个2021年7月16日 星期三
    var year = date.getUTCFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();
    var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    var day = date.getDay();
    console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
</script>

结果:
在这里插入图片描述

4.3-2实践格式化:

<script>
    //格式化日期 时分秒
    var date = new Date();
    console.log(date.getMonth());   //时
    console.log(date.getMinutes());  //分
    console.log(date.getSeconds()); //秒
    //要求封装一个函数返回当前的时分秒 格式 08:08:08
    function getTime(){
        var time = new Date();
        var h = time.getHours();
        h = h<10?'0'+ h:h;
        var m = time.getMinutes();
        m = m<10?'0'+ m:m;
        var s = time.getSeconds();
        s = s<10?'0'+ s:s;
        return h + ':' + m + ':' + s;
    }
    console.log(getTime());
    </script>

4.4获取日期的总的毫秒形式

  • Date对象是基于1970年1月1日(世界标准时间)起的毫秒数
  • 为什么计算机起始时间从1970年开始?
  • 我们经常利用总的毫秒数来计算时间,因为它更精确

重点案例:倒计时效果

在这里插入图片描述

案例分析:

  • 核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时, 但是不能拿着时分秒相减,比如05分减去25分,结果会是负数的。
  • 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
  • 把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒)

转换公式如下:

d= parselnt(总秒数/ 60/60/24); //计算天数
h= parselnt(总秒数/ 60/60 %24); //计算小时
m= parseInt(总秒数/60%60); // 计算分数
s = parselnt(总秒数%60); //计算当前秒数

代码案例:

<script>
        function countDown(time){
            var nowTime = +new Date();  //返回的是当前时间总的毫秒数
            var inputTime = +new Date(time);    //返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000;   //times是剩余时间总的秒数
            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-7-17 18:00:00'));
        var date = new Date();
        console.log(date);
    </script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以使用JavaScript中的日期对象来实现倒计时。下面是一个简单的例子: ```javascript // 倒计时时间(单位:毫秒) var countdownTime = 10000; // 获取当前时间 var now = new Date().getTime(); // 计算倒计时结束时间 var countdownEndTime = now + countdownTime; // 更新倒计时显示 var countdownElement = document.getElementById("countdown"); var countdownInterval = setInterval(function() { // 获取当前时间 var now = new Date().getTime(); // 计算剩余时间 var remainingTime = countdownEndTime - now; // 将剩余时间转换为天、小时、分钟、秒 var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24)); var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); // 更新倒计时显示 countdownElement.innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 "; // 如果倒计时结束,清除计时器 if (remainingTime <= 0) { clearInterval(countdownInterval); countdownElement.innerHTML = "倒计时结束!"; } }, 1000); ``` 在上面的例子中,我们首先定义了倒计时时间 `countdownTime`,然后使用 `new Date().getTime()` 获取当前时间。我们将当前时间和倒计时时间相加,得到倒计时结束时间 `countdownEndTime`。 然后,我们使用 `setInterval` 创建一个定时器,每隔一秒钟更新一次倒计时显示。在定时器回调函数中,我们首先获取当前时间 `now`,然后计算剩余时间 `remainingTime`。接下来,我们将剩余时间转换为天、小时、分钟、秒,并更新倒计时显示。 最后,如果剩余时间小于等于0,说明倒计时已经结束,我们清除定时器并更新倒计时显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑马金牌编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值