Web_java script倒计时带界面案例【改进版】

最新推荐文章于 2024-05-16 18:00:36 发布

郝鑫芸

最新推荐文章于 2024-05-16 18:00:36 发布

阅读量724

点赞数 1

分类专栏：案例 js 文章标签： javascript js css web

本文链接：https://blog.csdn.net/qq_40041509/article/details/108093401

版权

js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

案例

1 篇文章 0 订阅

订阅专栏

需求:
点击按钮时获取输入框的终点时间然后跟当前时间作对比进行倒计时天数的计算
步骤:
1.获取元素 btn daotime span: day hour minute second ms
2.给btn添加点击事件
3.获取输入框输入的事件然后传入new Date里面
4.判断时间格式是否正确如果正确继续
5.启动定时器
6.把终点时间和当前时间都转换成毫秒值做减法
7.求出差值的毫秒值后转换生天小时分秒毫秒
8.分别设置到页面的span里面去
9.判断差值时间如果小于等于0 表示到计时结束清除定时器
10.替换页面文本显示倒计时结束文字样式!!!
效果展示：倒计时案例，代码含有停止计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body>
<div id="box">
    <div class="inner">
        <h1>开始倒计时</h1>
        <p class="inp">
            <label for="daotime">结束时间:</label>
            <input type="text" id="daotime" value="2020-09-01 16:22:15">
        </p>
        <p class="btn">
            <button>开始计时</button>
        </p>
        <p class="text">
            距离当前时间还有:
        </p>
        <p class="showtime">
           <span class="over">到计时结束!!!</span>
            <span class="show">
                <span class="day">0</span>
                <em>天</em>
                <span class="hour">8</span>
                <em>时</em>
                <span class="minute">26</span>
                <em>分</em>
                <span class="second">35</span>
                <em>秒</em>
                <span class="ms">768</span>
                <em>毫秒</em>
            </span>
        </p>
        <button class="stop">停止</button>
    </div>
</div>
</body>
</html>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 600px;
            height: 500px;
            background-color: black;
            margin: 0 auto;
            overflow: hidden;
            color:white;
        }
        .inner{
            width: 550px;
            height: 450px;
            margin: 25px auto;
            border: 3px solid blue;
            border-radius: 10px;
        }
        h1{
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        p{
            height: 70px;
            line-height: 70px;
        }
        p.inp{
            font-size: 20px;
            padding-left: 100px;
        }
        p.inp>label{
            margin-right: 20px;
        }
        p.inp>input{
            width: 300px;
            height: 30px;
            font-size: 20px;
        }
        p.btn{
            text-align: center;
        }
        p.btn>button{
            width: 120px;
            height: 40px;
            background-color: orange;
            color: #fff;
            outline: none;
            font-size: 20px;
            border:none;
            cursor: pointer;
        }
        p.btn>button:active{
            background-color: #ff5e11;
        }
        p.text{
            padding-left: 60px;
            font-size: 25px ;
        }
        p.showtime{
            text-align: center;
        }
        p.showtime>.show>span{
            display: inline-block;
            margin: 0 15px;
            font-size: 30px;
            color: #e4393c;
            line-height: 30px;
            vertical-align: middle;
        }
        p.showtime>.show>em{
            display: inline-block;
            vertical-align: middle;
            font-style: normal;
            font-size: 18px;
            line-height: 30px;
        }
        p.showtime>.over{
            font-size: 50px;
            display: none;
        }
    </style>

<script>
    // 1.获取元素  btn  daotime span: day hour minute second ms
    var btn=document.getElementsByTagName("button")[0];
    var btn1=document.getElementsByTagName("button")[1];
    //输入框
    var daoTime=document.getElementById("daotime");
    var daySpan=document.getElementsByClassName("day")[0];
    var hourSpan=document.getElementsByClassName("hour")[0];
    var minuteSpan=document.getElementsByClassName("minute")[0];
    var secondSpan=document.getElementsByClassName("second")[0];
    var msSpan=document.getElementsByClassName("ms")[0];
    var showTime=document.getElementsByClassName("showtime")[0];
    var show=showTime.getElementsByClassName("show")[0];
    var over=showTime.getElementsByClassName("over")[0];
    var timer;

    btn1.onclick=function () {
        clearInterval(timer)
    };
    // 2.给btn添加点击事件
    btn.onclick=function () {
    //      3.获取输入框输入的事件 然后传入new Date里面
        var val=daoTime.value;
        if(val==""){
            alert("还未输入倒计时间!");
            return;
        }
        var endTime=new Date(val);
        console.log(typeof endTime);//object
        console.log(typeof endTime.toString());//string
        // 4.判断时间格式是否正确  如果正确继续
        console.log(endTime==="Invalid Date");//false
        //此处虽然不写toString也能判断成功(前提是双等判断)  但是为了严谨最好写 toString再去比较
        if(endTime=="Invalid Date"){
            alert("输入的时间格式不对!");
            return;
        }
        // console.log(endTime);
        var endMs=endTime.getTime();
        var nowMs=new Date().getTime();
        if(endMs-nowMs<=0){
            alert("不能设置过去时间!!");
            return;
        }
        clearInterval(timer);
        var cha;
        //5.启动定时器
        timer =setInterval(function () {
            //每过一毫秒 都要重新获取一下当前时间
            nowMs=new Date().getTime();
            cha=endMs-nowMs;
            if(cha<0){
                //一旦倒计时结束 则 显示结束文本 并清除定时器
                over.style.display="inline";
                show.style.display="none";
                clearInterval(timer);
                return;
            }else{
                over.style.display="none";
                show.style.display="inline";
            }
            var day=Math.floor(cha/1000/60/60/24);
            var hour=Math.floor(cha/1000/60/60%24);
            var minute=Math.floor(cha/1000/60%60);
            var second=Math.floor(cha/1000%60);
            var ms=Math.floor(cha%1000);
            day=day>9?day:"0"+day;
            hour=hour>9?hour:"0"+hour;
            minute=minute>9?minute:"0"+minute;
            second=second>9?second:"0"+second;
            if(ms<10){
                ms="00"+ms
            }else if(ms<100){
                ms="0"+ms;
            }
            daySpan.innerHTML=day;
            hourSpan.innerHTML=hour;
            minuteSpan.innerHTML=minute;
            secondSpan.innerHTML=second;
            msSpan.innerHTML=ms;
        },1)
    }
</script>

郝鑫芸

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Web_java script倒计时带界面案例【改进版】

需求:点击按钮时获取输入框的终点时间然后跟当前时间作对比进行倒计时天数的计算步骤:1.获取元素 btn daotime span: day hour minute second ms2.给btn添加点击事件3.获取输入框输入的事件然后传入new Date里面4.判断时间格式是否正确如果正确继续5.启动定时器6.把终点时间和当前时间都转换成毫秒值做减法7.求出差值的毫秒值后转换生天小时分秒毫秒8.分别设置到页面的span里面去9.判断差值时间如果小于等于
复制链接

扫一扫