荣耀头条

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

2023-11-13 08:18 由 L_GuoZY 发表于 #前端开发

一、创建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());

补充：

  怎么计算时间差 使用时间戳【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>

四、购物秒杀倒计时案例

<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>

五、当年日历

<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 月 日历 

 

热门相关：黜龙   绍宋   试婚老公，要给力   都市剑说   绍宋