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

合集 - web前端(29)

1.1-web前端 基础标签 、图片、超链接2023-09-192.2-web前端 音频、视频、表格、表单2023-09-193.3-web前端 css 网页样式语言，基础语言、盒子模型、浮动2023-09-194.5-web前端 定位position2023-09-195.6-web前端的特效 平面转换transfrom2023-09-196.7-web前端 空间转换，3D效果2023-09-197.8-web前端 动画 案例2023-09-198.9-web前端 flex弹性布局2023-09-199.10-JavaScript 点击事件 随机点名器2023-09-2010.11-JavaScript 逻辑条件 ，if判断 ，while循环，算数运算相关的案例演示2023-09-2311.12-web前端轮播图案例 （小米商城）2023-09-2712.css字体样式2023-10-0813.css样式对单行和多行文本的隐藏2023-10-1014.css伪类和伪元素2023-10-1215.web前端html+css页面内容的六种隐藏方式2023-10-1616.JavaScript的基础语法和数据类型2023-10-2617.JavaScript 数组Array存储方式及对象Object2023-10-2718.JavaScript数据类型的转换2023-10-3019.JavaScript运算符及优先级2023-10-3120.JavaScript条件判断if 语句2023-11-0121.JavaScript for循环控制语句2023-11-0222.JavaScript 其他循环语句和跳转语句2023-11-0323.JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析2023-11-0424.JavaScript函数变量的生命周期，自执行函数、闭包、反转数组案例及冒泡排序案例2023-11-0425.JavaScript Array对象（属性、方法） 留言板案例2023-11-0426.JavaScript string对象（属性，方法）获取图片后缀案例 输入和输出结果转换形式案例2023-11-07

27.JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历2023-11-13

28.JavaScript事件 2023-11-1829.JavaScript BOM对象2023-11-18

收起

一、创建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 月 日历