html+css+js制作时间倒计时(时分秒)简易版

效果图展示:

html+css+js制作时间倒计时(时分秒)简易版_第1张图片

1、先了解获取时间的函数

Date():获取当前系统时间

//获取当前系统时间  
var date = new Date();  
2、获取时间的方法

getHours():获取小时值
getMinutes():获取分钟值
getSeconds():获取秒数值

var hours = date.getHours();//时
var minutes= date.getMinutes();//分
var seconds= date.getSeconds();//秒
3、解题思路

倒计时也就是当前时间(开始时间)到目标时间(结束时间)的一个差值。所以我们只需要获取这两个时间即可,一般目标时间都为自定义时间。

4、完整代码

js部分: 这里目标时间设为20:00,如果当前时间错过了目标时间,就计算距离第二天与目标时间点的差值。

<script type="text/javascript">  
        function countTime() {  
            //获取当前时间  
            var date = new Date();  
            var hours = date.getHours();//时
            var minutes= date.getMinutes();//分
            var seconds= date.getSeconds();//秒

            //统一化为秒数,方便计算				
            var kaishi = seconds + minutes * 60 + hours * 60 * 60;
            var jieshu = 20 * 60 * 60;
            
            //计算差值
            var cha;
            if(hours >= 20) cha = jieshu + 24 * 60 * 60-kaishi;
            else cha = jieshu - kaishi;
            var h,m,s; 

            h = Math.floor(cha/60/60%24);  
            m = Math.floor(cha/60%60);  
            s = Math.floor(cha%60);

            // console.log(h+":"+m+":"+s);
            document.getElementById("_h").innerHTML = h;  
            document.getElementById("_m").innerHTML = m;  
            document.getElementById("_s").innerHTML = s;   
            setTimeout(countTime,1000);  
        }  
    </script>

html部分: 图标链接shangou.png

<body onload="countTime()" >  
    <div class="tp6-1">
        <div class="time">20:00</div>
        <div class="pic-sg"><img src="image/shangou.png" alt=""></div>
        <div class="text-tip">距离开始还有</div>
        <div class="count-time">
            <i id="_h">00</i>
            <span>:</span>
            <i id="_m">00</i>
            <span>:</span>
            <i id="_s">09</i>
        </div>
    </div>  
</body>  

css部分:

.tp6-1 {
   width: 198px;
   height: 50%;
   border-top: 1px solid red;
   background-color: #eee8e8;
   text-align: center;
}
.tp6-1 .time{
   color: red;
   margin: 46px 0;
   font-size: 30px;
}

.text-tip{
   color: #786262;
   margin: 30px 0;
}
.pic-sg{
   width: 19%;
   height: 17%;
   margin: auto;
}

.pic-sg img{
   width: 100%;
   height: 100%;
}

.count-time {
   height: 12%;
   text-align: center;
}

.count-time i {
   width: 38px;
   height: 38px;
   background-color: #7f957f;
   display: inline-block;
   font-size: 26px;
}

.count-time span {
   font-size: 26px;
}
结束语:

小白初试,有什么不妥的地方,还望各位多多指点。
参考文章: 前端页面实现倒计时效果的几种方法

你可能感兴趣的:(javascript,html,css)