简易js倒计时 + 电子时钟

最新推荐文章于 2023-07-29 21:58:23 发布

前端成长营

最新推荐文章于 2023-07-29 21:58:23 发布

阅读量708

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43617604/article/details/105808587

版权

简易js倒计时 + 点子时钟

function nowD() {
    //获取现在时间
    let nowDate = new Date;
    //设置要倒计时的时间
    let setDate = new Date('2020-05-11');
    let setDateY = setDate.getFullYear();
    let setDateM = setDate.getMonth() + 1;
    let setDateD = setDate.getDate();
    //获取倒计时的时间格式
    let setName = setDateY + '年' + setDateM + '月' + setDateD + '日';

    //获取倒计时的时间毫秒
    let xj = setDate.getTime() - nowDate.getTime();
    //计算秒数
    let s = parseInt(xj / (1000) % 60);
    //计算分钟
    let m = parseInt(xj / (1000 * 60) % 60);
    //计算小时
    let h = parseInt(xj / (1000 * 60 * 60) % 24);
    //计算天数
    let day = parseInt(xj / (1000 * 60 * 60 * 24));
    //输出
    document.querySelector('#div').innerHTML = "距离" + setName + "还剩：" + day + "天" + h + "小时" + m + "分" + s + "秒"
}
//设置定时器实现每秒更新时间
setInterval(nowD, () => 1000);

电子时钟

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="clock">
        <div id="Date"></div>
        <ul>
            <li id="hours"></li>
            <li id="point">:</li>
            <li id="min"></li>
            <li id="point">:</li>
            <li id="sec"></li>
        </ul>
    </div>
    <style>
        body {
            background: #202020;
            font: bold 12px 'Microsoft Yahei', Helvetica, sans-serif;
            margin: 0;
            padding: 0;
            color: #bbbbbb;
        }

        a {
            text-decoration: none;
            color: #00c6ff;
        }

        /* clock */

        .clock {
            width: 800px;
            margin: 0 auto;
            padding: 30px;
            border: 1px solid #333;
            color: #fff;
            margin-top: 50px;
        }

        .clock #Date {
            font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
            font-size: 36px;
            text-align: center;
            text-shadow: 0 0 5px #00c6ff;
        }

        .clock ul {
            width: 800px;
            margin: 0 auto;
            padding: 0px;
            list-style: none;
            text-align: center;
        }

        .clock ul li {
            display: inline;
            font-size: 10em;
            text-align: center;
            font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
            text-shadow: 0 0 5px #00c6ff;
        }

        #point {
            position: relative;
            -moz-animation: mymove 1s ease infinite;
            -webkit-animation: mymove 1s ease infinite;
            padding-left: 10px;
            padding-right: 10px;
        }

        @-webkit-keyframes mymove {
            0% {
                opacity: 1.0;
                text-shadow: 0 0 20px #00c6ff;
            }
            50% {
                opacity: 0;
                text-shadow: none;
            }
            100% {
                opacity: 1.0;
                text-shadow: 0 0 20px #00c6ff;
            }
        }

        @-moz-keyframes mymove {
            0% {
                opacity: 1.0;
                text-shadow: 0 0 20px #00c6ff;
            }
            50% {
                opacity: 0;
                text-shadow: none;
            }
            100% {
                opacity: 1.0;
                text-shadow: 0 0 20px #00c6ff;
            }
        }
    </style>

    <script>
        $(document).ready(function () {

            // 创建两个变量，一个数组中的月和日的名称
            var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
            var dayNames = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]

            // 创建一个对象newDate（）
            var newDate = new Date();
            // 提取当前的日期从日期对象
            newDate.setDate(newDate.getDate());
            //输出的日子，日期，月和年
            $('#Date').html(newDate.getFullYear() + " 年 " + monthNames[newDate.getMonth()] + ' ' + newDate.getDate() + ' 日 ' + dayNames[newDate.getDay()]);

            setInterval(function () {
                // 创建一个对象，并提取newDate（）在访问者的当前时间的秒
                var seconds = new Date().getSeconds();
                //添加前导零秒值
                $("#sec").html((seconds < 10 ? "0" : "") + seconds);
            }, 1000);

            setInterval(function () {
                // 创建一个对象，并提取newDate（）在访问者的当前时间的分钟
                var minutes = new Date().getMinutes();
                // 添加前导零的分钟值
                $("#min").html((minutes < 10 ? "0" : "") + minutes);
            }, 1000);

            setInterval(function () {
                // 创建一个对象，并提取newDate（）在访问者的当前时间的小时
                var hours = new Date().getHours();
                // 添加前导零的小时值
                $("#hours").html((hours < 10 ? "0" : "") + hours);
            }, 1000);

        }); 
    </script>
</body>

</html>

前端成长营

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
简易js倒计时 + 电子时钟

简易js倒计时function nowD() { //获取现在时间 let nowDate = new Date; //设置要倒计时的时间 let setDate = new Date('2020-05-11'); let setDateY = setDate.getFullYear(); let setDateM = setDate.getMon...
复制链接

扫一扫