HTML+jQuery设置正计时开始，可制作告白网页计时效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍了如何使用HTML+jQuery制作正计时效果， 如何利用jQuery实现简单的网页正计时，主要使用了js的日期对象,然后使用多线程实现时钟的变动。

实现原理

主要使用了js的日期对象,首先要设置起始时间，实现的时候先创建一个日期对象，设置时间年月日小时分秒，然后将对象传参到正计时方法里面

主要js代码

<script type="text/javascript">

    //设置起始时间
    var together = new Date();
    together.setFullYear(2024, 9, 17); //时间年月日 注意这个9代表的是10月
    together.setHours(17); //小时   
    together.setMinutes(00); //分钟
    together.setSeconds(0); //秒前一位
    together.setMilliseconds(2); //秒第二位

    //使用定时器调用这个函数 就可实现
    timeElapse(together);
    setInterval(function () {
        timeElapse(together);
    }, 500);

    function timeElapse(date) {
        var current = Date();
        var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
        var days = Math.floor(seconds / (3600 * 24));
        seconds = seconds % (3600 * 24);
        var hours = Math.floor(seconds / 3600);
        if (hours < 10) {
            hours = "0" + hours;
        }
        seconds = seconds % 3600;
        var minutes = Math.floor(seconds / 60);
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        seconds = seconds % 60;
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        var result = ' <span class=\"digit\">' + days + '</span> 天 <span class=\"digit\">' + hours + '</span> 小时 <span class=\"digit\">' + minutes + '</span> 分钟 <span class=\"digit\">' + seconds + "</span> 秒";

        $("#elapseClock").html(result)
    }

</script>