js显示当前时间（动态）以及限时抢购倒计时

最新推荐文章于 2024-05-02 16:46:30 发布

ArchurSpace

最新推荐文章于 2024-05-02 16:46:30 发布

阅读量1.5k

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/sp1336542268/article/details/48346843

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本篇博文知识点：

js的Date类的使用
setTimeout的使用（注意和setInterval的区别）
将“秒”格式化成常用的格式

动态地显示当前时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前时间</title>
</head>
<script type="text/javascript">
    window.onload=function(){
        showTime();
    }

    // show current time;
    function showTime(){
        var myDate = new Date();
        var year = myDate.getFullYear();
        var month = myDate.getMonth()+1;
        var day = myDate.getDate();
        var week = myDate.getDay();
        var weeks = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

        var hour = checkTime(myDate.getHours());
        var minute = checkTime(myDate.getMinutes());
        var second =  checkTime(myDate.getSeconds());

        document.getElementById('showtime').innerHTML = year+"年"+month+"月"+day +"日 "+weeks[week]+
            " "+hour+":"+minute+":"+second;
        setTimeout(showTime,1000);
    }

    // format time;
    function checkTime(i){
        if(i<10){
            return "0"+i;
        }else{
            return i;
        }
    }
</script>
<body>
    <div id="showtime">
        showtime
    </div>
</body>
</html>

模拟购物网站上的限时抢购

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>限时抢购</title>
    <script type="text/javascript">
    window.onload=function(){
        daojishi();
    }

    function daojishi(){
        var curr_time = new Date();
        var end_time = new Date("2015/9/12,12:30:50");

        var left_time = parseInt((end_time-curr_time)/1000);
        var day = parseInt(left_time/(60*60*24));
        var hour = parseInt(left_time/(60*60)%24);
        var min = parseInt((left_time/60%60));
        var sec = parseInt((left_time%60));

        document.getElementById('time').innerHTML="剩余时间："+day+"天"+hour+"小时"+min+"分钟"+sec+"秒";
        setTimeout(daojishi,500);
    }

    // format time;
    function checkTime(i){
        if(i<10){
            return "0"+i;
        }else{
            return i;
        }
    }
    </script>
</head>
<body>
    <div id="time">content</div>
</body>
</html>

只为记录常用的代码，希望以后可以随手拈来哈哈哈~

ArchurSpace

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js显示当前时间（动态）以及限时抢购倒计时

本篇博文知识点：js的Date类的使用setTimeout的使用（注意和setInterval的区别）将“秒”格式化成常用的格式动态地显示当前时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>当前时间</title></head><script type="text/javasc
复制链接

扫一扫