倒计时

最新推荐文章于 2024-06-12 14:02:38 发布

良液

最新推荐文章于 2024-06-12 14:02:38 发布

阅读量250

点赞数 1

分类专栏： Javascript 文章标签：倒计时代码

本文链接：https://blog.csdn.net/luckyboy_zly/article/details/99663510

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

倒计时代码

在这里插入图片描述

<!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>
    <style>
        .djs{width: 400px;height: 500px;margin: 0 auto;background-color: #ccc;text-align: center;padding-top: 40px;}
        h1{color: #fff;}
        input{width: 80px;height: 30px;}
        .btn{width: 100px;height: 100px;background-color: #000;font-size: 22px;color: yellow;text-align: center;
        border-radius: 50%;line-height: 100px;margin: 0 auto;margin-top: 30px;} 
        .p2{height: 40px;line-height: 40px;}
        .endtime{font-size: 22px;color: yellow;}
        .time span{color: yellow;}

    </style>
</head>
<body>
    <div class="djs">
        <h1>倒计时</h1>
        <p>
            请输入:
            <input type="text">年
            <input type="text">月
            <input type="text">日
        </p>
        <div class="btn">开始</div>
        <p class="p2">现在距离-<span class="endtime"></span>-还剩</p>
        <h2 class="time"><span></span>天<span></span>时<span></span>分<span></span>秒</h2>
    </div>
    <script src="倒计时.js"></script>
    <script>
        var input=document.getElementsByTagName('input');
        var endtime=document.getElementsByClassName('endtime')[0];
        var btn=document.getElementsByClassName('btn')[0];
        var time=document.getElementsByClassName('time')[0];
        var span=time.getElementsByTagName('span');
        var str='';
        btn.onclick=function(){
            endtime.innerHTML=parseInt(input[0].value)+'年'+parseInt(input[1].value)+'月'+parseInt(input[2].value)+'日';
            timer(parseInt(input[0].value),parseInt(input[1].value)-1,parseInt(input[2].value),0,0,0);
            setInterval(timer,1000,parseInt(input[0].value),parseInt(input[1].value)-1,parseInt(input[2].value),0,0,0);              
            console.log(parseInt(input[1].value));
            
        }
        function timer(y,m,d,h,w,s){
            console.log(y,m,d,h,w,s);
        var starttime=new Date();
        var endtime=new Date(y,m,d,h,w,s);
        var times,sec,min,hour,day;
            times=parseInt((endtime-starttime)/1000);
            // console.log(times);
            // console.log(starttime);
            // console.log(endtime);
            
            sec=parseInt(times%60);
            min=parseInt(times/60%60);
            hour=parseInt(times/60/60%24);
            day=parseInt(times/60/60/24);   
           // console.log(day);
                 
            span[0].innerHTML=bl(day);
            span[1].innerHTML=bl(hour);
            span[2].innerHTML=bl(min);
            span[3].innerHTML=bl(sec);
        }
        function bl(object){
            return object<10?'0'+object:object;
    }
            
    </script>
</body>
</html>

//倒计时封装函数JavaScript代码
function timer(object,endt){
    var starttime=new Date();
    var endtime=new Date(endt);
    var times,sec,min,hour,day;
        times=parseInt((endtime-starttime)/1000);
        sec=parseInt(times%60);
        min=parseInt(times/60%60);
        hour=parseInt(times/60/60%24);
        day=parseInt(times/60/60/24);
        var str=object;
        document.body.innerHTML=str+'&nbsp;&nbsp;&nbsp;'+bl(day)+'天'+bl(hour)+'时'+bl(min)+'分'+bl(sec)+'秒';
    }
    function bl(object){
        return object<10?'0'+object:object;
    }
//引用示例
// timer('距离放假:','2019,10,10 00:00:00')   若不事先调用，会有1秒延时
// setInterval(timer,1000,'距离下课:','2019,08,14 12:30:00')