html+css+js制作时间倒计时（时分秒）简易版

效果图展示：

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="data: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;
}

结束语：

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

html+css+js制作时间倒计时（时分秒）简易版相关推荐

html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 引用了C ...
HTML+CSS+JS制作【飞机大战】小游戏（键盘版和鼠标版）
文章目录一.效果演示设计思路二.鼠标版飞机大战代码展示 1.HTML结构代码 2.CSS样式代码 3.JavaScript代码 js.js文件 plane.js文件三.键盘版飞机大战代码展示 ...
基于 js 制作一个倒计时
目录前言: 项目效果展示: 代码实现思路: 使用方法: 重点功能讲解: 实现代码: 总结: 前言: 很多网站在做活动时,会出现一个截止时间倒计时的提示,跟随此文做一个倒计时吧! 项目效果展示: 代码 ...
Html+Css+js实现春节倒计时效果（移动端和PC端）
目录前言导语效果预览 html部分移动端样式(mobile.css) pc端样式(style.css) js部分效果演示移动端 pc端总结下载地址前言我是歌谣我有个兄弟巅峰的时 ...
HTML+CSS+JavaScript制作结婚倒计时网页模板 520情人节表白源码HTML 七夕情人节表白源码HTML 生日祝福代码HTML...
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, ...
#3使用html+css+js制作网页番外篇使用python flask 框架 (I)
#3使用html+css+js制作网页番外篇使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
html+css+js制作简单网站首页
一个简单的网站主页主要由html+css+js制作 1.图片展示这是首页的上半部分,主要内容有:顶部标头.顶部导航栏.图片轮播图. ```css <!DOCTYPE html> < ...
使用html+css+js制作小米首页
文章目录使用html+css+js制作小米首页 1.html制作小米官网页面结构(`index.html`) 2.使用css设置公共样式(`base.css`) 3.使用css设置页面元素样式(`i ...
#3使用html+css+js制作网页制作登录网页
#3使用html+css+js制作网页制作登录网页本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...