日期：年月日的写法 / 倒计时写法 /获得date总的毫秒数方式date.valueOf()/date.getTime()/+new Date()/Date.now()/及多种写法案例

原创 于 2020-02-18 20:01:11 发布 · 2.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #javascript #html5 #es6

1.index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //格式化日期  年月日
    var date = new Date()
    console.log(date.getFullYear());//返回当前日期的年
    console.log(date.getMonth()+1);//月份  返回的月份小于1个月 记得月份＋1
    console.log(date.getDate());//返回的是 几号
    console.log(date.getDay());//周一返回1，周六返回是6，周日返回的是0
    // 我们写一个当前年月日
    var year = date.getFullYear();
    var month = date.getMonth()+1;
    var dates = date.getDate();
    var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    var day = date.getDay();
    console.log('今天是：' + year + '年' + month + '月' + dates + '日' + arr[day]);
</script>
</body>
</html>

运行结果：
在这里插入图片描述

2.获得date总的毫秒数方式
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 获取Date总的毫秒数（时间搓） 不是当前时间的毫秒数 而是距离1970年1月1日过了多少毫秒树
    // 1.通过 valueOf() getTime()
    var date = new Date()
    console.log(date.valueOf());
    console.log(date.getTime());
    // 2.简单的写法（最常用的写法）
    var date1 = +new Date()
    console.log(date1);
    // 3.H5新增的 获得总的毫秒数
    console.log(Date.now());

</script>
</body>
</html>

运行结果

2.1静态倒计时还剩多少时间案例
index.htim代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 获取Date总的毫秒数（时间搓） 不是当前时间的毫秒数 而是距离1970年1月1日过了多少毫秒树
    // 1.通过 valueOf() getTime()
    var date = new Date()
    console.log(date.valueOf());
    console.log(date.getTime());
    // 2.简单的写法（最常用的写法）
    var date1 = +new Date()
    console.log(date1);
    // 3.H5新增的 获得总的毫秒数
    console.log(Date.now());


    // 倒计时效果
    // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去26分，结果会是负数
    // 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间总的毫秒数，得到的就是剩余时间的毫秒数。
    // 3.把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）
    // parseInt取整
    // d = parseInt(总秒数/60/60/24)；   //计算天数
    // h = parseInt(总秒数/60/60%24)；   计算小时
    // m = parseInt(总秒数/60%60)；  计算分数
    // s = parseInt(总秒数%60)；计算秒数

    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('2020-3-18 19:30:30'));
</script>
</body>
</html>

运行结果：
在这里插入图片描述

3.动态倒计时案例 1—传统写法（if/else实现）；
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 100px auto;
        }
      div span{
          display: inline-block;
          width: 50px;
          height: 50px;
          color:  darkred;
          text-align: center;
          line-height: 50px;
          vertical-align: middle;
          background-color: rgba(0,0,0,0.2);
      }
    </style>
</head>
<body>

<div>
    <span class="hour">59</span>:时
    <span class="minute">59</span>:分
    <span class="second">59</span>:秒
</div>
<script>
    window.addEventListener('load',function () {
        var hour =document.querySelector('.hour')
        var minute =document.querySelector('.minute')
        var second =document.querySelector('.second')
        var time3 = setInterval(function () {
            if (hour.innerHTML <= 0 && minute.innerHTML == 0 && second.innerHTML == 0){
                hour.innerHTML = 0
                minute.innerHTML = 0
                second.innerHTML = 0
                clearInterval(time3)
            }else {
                if (second.innerHTML == 0){
                    if (minute.innerHTML >0){
                        minute.innerHTML -=1 ;
                        second.innerHTML = 60

                        if (minute.innerHTML < 0 && hour.innerHTML > 0){
                            minute.innerHTML = 60
                            if (hour.innerHTML > 0){
                                hour.innerHTML -= 1
                            }
                        }
                    } else {
                        second.innerHTML = 60

                        if (minute.innerHTML == 0 && hour.innerHTML > 0){
                            minute.innerHTML = 60
                            if (hour.innerHTML > 0){
                                hour.innerHTML -= 1
                            }
                        }
                    }

                }else {
                    second.innerHTML -= 1
                }
            }
        },1000)
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

4.动态实现倒计时效果 第二种方法 +new Date(‘2020-3-18 19:51:51’) ：
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 100px auto;
        }
        div span{
            display: inline-block;
            width: 50px;
            height: 50px;
            color:  darkred;
            text-align: center;
            line-height: 50px;
            vertical-align: middle;
            background-color: rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>

<div>
    <span class="data">59</span>:天
    <span class="hour">59</span>:时
    <span class="minute">59</span>:分
    <span class="second">59</span>:秒
</div>
<script>
    window.addEventListener('load',function () {
        var data =document.querySelector('.data')
        var hour =document.querySelector('.hour')
        var minute =document.querySelector('.minute')
        var second =document.querySelector('.second')

        // 2.开启定时器
        // 方式一调用
        var inputTime = +new Date('2020-3-18 19:51:51')
        setInterval(countDown,1000)
        function countDown() {
            var nowTime  = +new Date()
            var times = (inputTime - nowTime) / 1000
            var d = parseInt(times / 60 / 60 /24)
            d = d<10 ? '0'+ d :d
            data.innerHTML = d
            var h =parseInt(times /60/60%24)
            h =h<10?'0'+h : h
            hour.innerHTML = h
            var m =parseInt(times /60 % 60)
            m = m<10 ?'0'+ m :m
            minute.innerHTML = m
            var s=parseInt(times %60)
            s =s<10?'0'+s:s
            second.innerHTML = s
        }
        // 方式二调用
        // setInterval(function () {
        //     countDown('2020-3-18 19:51:51')
        // },1000)
        // function countDown(time) {
        //     var nowTime  = +new Date()
        //     var inputTime = +new Date(time)
        //     var times = (inputTime - nowTime) / 1000
        //     var d = parseInt(times / 60 / 60 % 24)
        //     d = d<10 ? '0'+ d :d
        //     data.innerHTML = d
        //     var h =parseInt(times /60/60/24)
        //     h =h<10?'0'+h : h
        //     hour.innerHTML = h
        //     var m =parseInt(times /60 % 60)
        //     m = m<10 ?'0'+ m :m
        //     minute.innerHTML = m
        //     var s=parseInt(times %60)
        //     s =s<10?'0'+s:s
        //     second.innerHTML = s
        // }


    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
分享交流
1.有兴趣一起交流的，可以关注我的公众号：这里你能够学到很实用的技巧，不是常用的我不说，公众号回复提取码即可获取以下学习资料啦啦啦啦，喜欢就拿去吧！！
（链接时常会失效，若出现此类情况，可以加我微信：17722328325（加时请备注：学习资料））

  1. Java web从入门到精通电子书

  2. Python机器学习电子书

  3. Python400集（北京尚学堂）

  4. JavaScript项目案例、经典面试题

  5. Java300集（入门、精通）

  6. Java后端培训机构录集（同事培训内部提供）

  7. java重要知识pdf文档（价值连城呀呀，不收藏你会后悔的）
    喜欢就关注吧，点个赞吧

2.这个是web前端相关的微信公账号交流平台，关注后回复你想要的东西，即可领取(请持续关注-会有更多的内容-并且这个公众号可接项目、学生作业等)。
在这里插入图片描述在这里插入图片描述在这里插入图片描述
微信公众号搜：烟火男孩

少年的舟
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值