Date对象的运用

于 2021-06-07 18:59:03 发布
阅读量405 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_57726902/article/details/117672016
本文介绍了JavaScript中的Date对象，包括获取年、月、日等属性的方法。通过实例展示了如何实现国庆倒计时，以及计算两个时间点之间的时间差。文章还对比了两种不同计算时间差的方法，强调了动态时间和固定时间的处理差异。

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

Date对象的运用

  1. 了解Date对象

简介：Date对象是js中用来表示时间的对象；

           如果时间是使用构造函数创建Date对象，则会封装为当前代码执行的时间；

若在构造函数date对象中传递一个表示时间的字符串作为参数，则会封装为参数的时间。

Date对象中常用的几种方法：（助记：年月日 星期 时分秒）

       年：getFullYear() :获取当前对象以四位数返回年份。

       月：getMonth():获取当前对象的月份；

                                   会返回一个0~11的值；

                                   0表示 一月

                                   1 表示 二月

                                   …

                                   11表示 十二月

       日：getDate() : 获取当前日期对象为几日；

星期：getDay(): 获取当前日期对象是星期几；

   时：getHours():获取当前日期对象的小时

分：getMinutes():获取当前日期对象的小时

秒：getSeconds():获取当前日期对象的小时

时间戳：getTime()或Date.now()

                     - 获取当前日期对象的时间戳

- 时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒

                            到当前日期所花费的毫秒数（1秒=1000毫秒）

                     - 计算机底层在保存时间时使用都是时间戳

  1. Data的运用：

案例1：时间倒计时：

        国庆倒计时：

效果图：

代码

<body>

//页面布局：先添加一个容器

<div style="margin-top:100px;text-align: center;border: 3px solid green"></div>

 

//js部分

<script>

        window.onload= () => {

//创建放置现在时间的盒子

               var p1=document.createElement("p");

 

//创建放置国庆时间的盒子

               var p2=document.createElement("p");

 

//创建放置倒计时的盒子

               var p3=document.createElement("p");

              

       //获取到容器并添加三个放置时间的盒子

               var div=document.getElementsByTagName("div")[0];

               div.appendChild(p1);

               div.appendChild(p2);

               div.appendChild(p3)

 

//通过函数表达式封装两位数字的时间

        function add(data){

               com=data<9?"0"+data:data

               return com;

        }

//

               setInterval(function(){

                      var date=new Date("2021-10-01 00:00:00");

                      var date1=new Date();

                      var times=Date.now();

                      var times1=date.getTime();

                      var bettow=(times1-times)/1000/60/60/24;/*获取到时间间隔*/

 

//获取到时间天数

                      var bettow1=parseInt((times1-times)/1000/60/60/24);

//获取小时数

                      var hours=parseInt(((times1-times)/1000/60/60)-(bettow1*24));

//获取分钟

                      var hours1=parseInt((((times1-times)/1000/60)-(bettow1*24*60)-hours*60));

 

//获取秒数

                      var secondes=parseInt(((times1-times)/1000)-(bettow1*24*60*60)-(hours*60*60)-(hours1*60))

//获取现在时间的：年、月、日、小时、分钟、秒

                      var Year1=date1.getFullYear();/*年*/

                      var Month1=date1.getMonth();/*月*/

                      var dat1=date1.getDate();/*日*/

                      var hour1=date1.getHours();/*小时*/

                      var minute1=date1.getMinutes();/*分钟*/

                      var seconds1=date1.getSeconds();/*秒数*/

 

//获取国庆时间的：年、月、日、小时、分钟、秒

                      var Year2=date.getFullYear();/*年*/

                      var Month2=date.getMonth();/*月*/

                      var dat2=date.getDate();/*日*/

                      var hour2=date.getHours();/*小时*/

                      var minute2=date.getMinutes();/*分钟*/

                      var seconds2=date.getSeconds();/*秒数*/

 

//将获取的时间赋值给放置时间的盒子：

                      p1.innerHTML='现在时间是： '+Year1+'年'+add(Month1+1)+'月'+add(dat1)+'日  '+add(hour1)+'时'+add(minute1)+'分'+add(seconds1)+'秒';

                     p2.innerHTML='国庆时间是： '+Year2+'年'+add(Month2+1)+'月'+add(dat2)+'日  '+add(hour2)+'时'+add(minute2)+'分'+add(seconds2)+'秒'

                      p3.innerHTML='距离国庆放假还有'+add(bettow1)+'天'+add(hours)+'小时'+add(hours1)+'分钟'+add(secondes)+'秒';

               },1000); 

 

        }

</script>

</body>

 

案例2：计算两个时间的时间差：

 

 

 

//js代码

//判断时间大小

        function computer(data){

               com=data<9?"0"+data:data

               return com;

        }

        //input标签值发生变化时的函数

        $("input").change(function(){

               var val=this.value<0?"":this.value;

               $(this).val(val)

        })

        //创建时间并计算时间差

        function btn(){

var  one=$("#tims").val()+“"+computer($("#hour").val())+":"+computer($("#Miuth").val())+":"+computer($("#seconds").val());

               var  two=$("#tim").val()+" "+computer($("#hour1").val())+":"+computer($("#Miuth1").val())+":"+computer($("#seconds1").val());

               //创建时间

               var One=new Date(one);

               var Two=new Date(two);

               //计算时间

               oneTimes=One.getTime();

               twoTimes=Two.getTime();

               console.log(oneTimes-twoTimes);

               //天数

               var day=Math.abs(parseInt((oneTimes-twoTimes)/1000/60/60/24));

               //小时

               var hours=Math.abs(parseInt((oneTimes-twoTimes)/1000/60/60%24))

               //分钟

               var minute=Math.abs(parseInt((oneTimes-twoTimes)/1000/60%60))

               //秒数

               var minute=Math.abs(parseInt((oneTimes-twoTimes)/1000%60))

               //赋值给#add标签

               $("#add").val("时间相差"+day+"天"+hours+"时"+minute+"分"+minute+"秒数")

        }

 

案例二跟案例一差异：

        一：动态时间和固定时间的差别：

                      案例二中两个时间都可以在页面中自己去定义的，而案例一中的两个时间都是固定的

二：计算时间差方法同（作者觉得可以丰富我们的空间现象力）

案例一的方法是按照从上到下一路计算，这样需要我们想的东西和条件会多很多，计算量大；

案例二是使用逆推的方法计算出结果，相当于案例一来说代码量 较少。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值