JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历

  • JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历已关闭评论
  • 99 次浏览
  • A+
所属分类:Web前端
摘要

一、创建Date对象var dateObj=new Date();var now = Date.now()   当前时间二、Date方法

一、创建Date对象

var dateObj=new Date();

var now = Date.now()   当前时间

二、Date方法

1、将日期转为字符串

toLocaleString()   toLocaleDateString()  toLocaleTimeString()

2、获取年、月、日、小时、分、秒

getFullYear()

 var d = new Date(); var year = d.getFullYear();

getMonth()      获取月份,返回值为0-11(外国人规定的),表示1月到12月,所以获取到月份之后需要+1

 var d = new Date(); var month = d.getMonth()+1;

getDate()        获取天,返回值为今天是几号

var d = new Date(); var date = d.getDate();

补充:日历案例  var days = new Date(2023,month,0).getDate();    

获取2023年,每个月有多少天

getHours()         小时

 var d = new Date(); var hour = d.getHours();

getMinutes()      分钟

 var d = new Date(); var minute = d.getMinutes();

getSeconds()     秒

var d = new Date();       var seconds = d.getSeconds();

getTime()       时间戳     时间戳专门用来计算时间的差值,或者倒计时等功能    单位:毫秒ms   1s  =  1000 ms

var date = new Date(); console.log(date.getTime());

JavaScript Date对象   、日期求差案例 、 购物秒杀倒计时、日历

补充:

  怎么计算时间差 使用时间戳【UNIX时间戳,timestamp】计算时间差

   2021-9-5 10:30:20 -> 1630809020000

  2020-8-9 12:30:45 -> 1596947445000

  差多少年,天,小时,分钟,秒钟

  时间戳 参照时间: 1970/1/1 0:0:0(格林威治时间) 1970/1/1 8:0:0(北京时间)

  时间戳:d.getTime(); 单位是毫秒数

  + new Date()转为时间戳

  Date.now()    转为时间戳

3、定时器

setInterval(函数体,时间(毫秒),参数(传递给函数的参数)

function times(){             var d = new Date();             var year = d.getFullYear();             var month = d.getMonth()+1;             var date = d.getDate();             var hour = d.getHours();             var minute = d.getMinutes();             var seconds = d.getSeconds();             var t =  document.querySelector('#time');             t.innerHTML = `现在是北京时间:${year}年${month}月${date}日${hour}时${minute}分${seconds}秒`;         } setInterval(times,1000)

三、日期求差案例

 <div id="time"></div>     <script>         function getTime(){             var afterTime = new Date('2021-6-1 10:30:20');             var now = Date.now();             var cha = now - afterTime;             if (cha>0){                 var allS = parseInt(cha/1000);                 var s = allS%60;                 var m = parseInt(allS/60)%60;                 var h = parseInt(allS/60/60)%24;                 var d = parseInt(allS/60/60/24);                 time.innerHTML = `上次见面到现在${d}天${h}小时${m}分钟${s}秒`             }else{                 console.log('不曾相识');             }         }         setInterval(getTime,1000) </script>

JavaScript Date对象   、日期求差案例 、 购物秒杀倒计时、日历

四、购物秒杀倒计时案例

<div id="box"></div>     <script>         /*         秒杀: 10-12,显示秒杀倒计时,10之前显示秒杀未开始,12点以后显示秒杀结束         */         function getTime(starttime,endtime){             var now = new Date();             var h = now.getHours();             // console.log(h);             if(h<starttime){                 console.log('秒杀未开始');             }else if(h>=endtime){                 console.log('秒杀结束');             }else{                 // 10-12                 var day = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`;                 var endT = +new Date(day +` ${endtime}:00:00`);                 var nowT = now.getTime();                 var cha = endT - nowT ;                 var allS = parseInt(cha/1000);                 var s = allS%60;                 var m = parseInt(allS/60)%60;                 var h = parseInt(allS/60/60)%24;                 // 显示在页面的box中                 box.innerHTML = `距离结束还有:${h}:${m}:${s}`;             }         }  setInterval(function(){             getTime(16,18);         },1000)     </script>

JavaScript Date对象   、日期求差案例 、 购物秒杀倒计时、日历JavaScript Date对象   、日期求差案例 、 购物秒杀倒计时、日历

五、当年日历

<style>         table,tr,td{             border: 1px solid #000;         }         table{             width: 500px;         }     </style> </head> <body>     <div id="box"></div>     <script>        function showTable(){             //1.铺垫顶部星期的基础结构             var str = '<table><tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th></tr>';             //2.遍历td             var month = parseInt(prompt('请输入2023年任意一个月份'));             if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){                 var days = 31;             }else if(month==2){                 var days = 28;             }else{                 var days = 30;             }             str += '<tr>'             //4.获取2023年这个月的1号是周几             var week = new Date(`2023-${month}-1`).getDay();             if(week==0){                 for(var j=1;j<=6;j++){                     str+='<td></td>';                 }             }else{                 for(var j= 1;j<week;j++){                     str+='<td></td>';                 }             }             //3.显示所有的td             for(var i=1;i<=days;i++){                 if((week-1+i)%7 == 0){                     str+=`<td>${i}</td></tr><tr>`                 }else{                     str += `<td>${i}</td>`                 }             }             str += '</tr></table>';             box.innerHTML = str         }     showTable()     </script>

2023年 11 月 日历 

JavaScript Date对象   、日期求差案例 、 购物秒杀倒计时、日历