hi,欢迎访问本站!
当前位置: 首页Web前端正文

html倒计时源码

墨初 Web前端 392阅读

有博友来问有没有前端web用的倒计时代码,下面73so博客就分享一个利用JS代码来实现倒计时的代码。

html实现倒计时的方法

下面的倒计时的代码是利用js脚本代码实现的,你可以在js代码中设置目的的日期与时间,页面在浏览器渲染完成后,会自动计算当前与目的日期时间的差,并以每秒的时间间隔进行倒计时。

html倒计时源码

html倒计时源码:

<style>
    #remainTime{
        background-color: #f5f5f5;
        font-size: 16px;
        text-align: center;
        padding: 10px 20px;
        display: inline-block;
        margin: auto;
    }
    #remainTime span {
        color: red;
        font-weight: bold;
        margin-right: 10px;
    }
</style>
<!-- https://www.73so.com -->
<body>
    <div id="remainTime">
        倒计时:
        <span id="one"></span>天
        <span id="two"></span>时
        <span id="three"></span>分
        <span id="four"></span>秒
    </div>
</body>
<script>
(function show() {      
    //这里设置到期的时间
    var oYear = 2023
    var oMonth = 5
    var oDay = 28
    var oHour = 20
    var oMinute = 30
    var oSecond = 0
    var funtureDate = new Date(oYear, oMonth, oDay, oHour, oMinute, oSecond);
    setInterval(function () {
        var presentDate = new Date();
        var funtureTime = funtureDate.getTime();
        var presenTime = presentDate.getTime();
        var allTime = funtureTime - presenTime;          
        var allSecond = parseInt(allTime / 1000);
        var day = size(parseInt(allSecond / 3600 / 24));
        var hour = size(parseInt(allSecond / 3600 % 24));
        var minute = size(parseInt(allSecond / 60 % 60));
        var second = size(parseInt(allSecond % 60));
        document.getElementById('one').innerHTML = day;
        document.getElementById('two').innerHTML = hour;
        document.getElementById('three').innerHTML = minute;
        document.getElementById('four').innerHTML = second;
    }, 1000);
    function size(num) {
        return num < 10 & num >= 0 ? '0' + num : num;
    }  
})()
function dateFormat(data){
    var date = new Date(data);
    var YY = date.getFullYear() + '-';
    var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
    return YY + MM + DD;
}
</script>
声明:无特别说明,转载请标明本文来源!
相关推荐