HTML部分:

     <div class="div">
<div id="div"> </div>
</div>

  CSS部分:

    *{margin:; padding:;}
.div{width:100%;height:636px;background: linear-gradient(to top, #333 0%, #fff 100%);}
#div{box-sizing: border-box;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-100%);font-family: STXingkai;font-size: 50PX;}

  

  JS部分:

      function biao2(){
var div = document.getElementById("div");
var dt = new Date("2018-1-12 12:00:00") - new Date(); //假设倒计时时间为明天十二点开始减去今天的时间, 算出明天距离今天所剩的毫秒数
if(dt>0){
hours=Math.floor(dt/1000/60/60%24);
min=Math.floor(dt/1000/60%60);
sec=Math.floor(dt/1000%60);
}
div.innerHTML="倒计时:"+hours+"时"+min+"分"+sec+"秒";
}
setInterval("biao2()",1000);

JS实现倒计时的更多相关文章

  1. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

  2. 一个简单的js实现倒计时函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  4. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  5. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  6. JS实现倒计时(天数,时,分,秒)

    <!DOCTYPE html> <html> <head>   <meta charset="utf-8" >   <titl ...

  7. 使用html+css+js实现倒计时,开启你痛苦的倒计时吧

    使用html+css+js实现倒计时,开启你痛苦的倒计时吧 效果图: 这是我痛苦的倒计时,呜呜呜 好啦,再痛苦还是要分享代码,代码如下,复制即可使用: <!DOCTYPE html> &l ...

  8. js网页倒计时精确到秒级

    网页实时倒计时,精确到秒级,和天数倒计时原理一样. 一个很好用的js倒计时!网页实时倒计时,精确到秒级,和天数倒计时原理一样.js倒计时一般用于商城网站团购,特卖,很多地方都可用到!希望能够给大家带来 ...

  9. js实现倒计时60秒的简单代码

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  10. 用JS实现倒计时(日期字符串作为参数)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. python基础(八)生成器,迭代器,装饰器,递归

    生成器 在函数中使用yield关键字就会将一个普通的函数变成一个生成器(generator),普通的函数只能使用return来退出函数,而不执行return之后的代码.而生成器可以使用调用一个next ...

  2. 【Win 10 应用开发】MIDI 音乐合成——更改乐器音色

    在开始今天的吹 BB 博文之前,说点题外话. 首先,上次老周给大伙伴们介绍完发送 MIDI 音符,本来说好的接着说一下如何更改乐器音色,为啥这么久都没更新呢.特特来解释一下,最近老周接了一个 ASP. ...

  3. 深入理解JVM(五)——垃圾回收器

    轻松学习JVM(五)——垃圾回收器 上一篇我们介绍了常见的垃圾回收算法,不同的算法各有各的优缺点,在JVM中并不是单纯的使用某一种算法进行垃圾回收,而是将不同的垃圾回收算法包装在不同的垃圾回收器当中, ...

  4. 千万别在开发阶段用 uglify 插件了!(from Requirejs to Webpack)

    webpack 各种好用,打算把 sf.gg 的前端构建工具从 gulp+requirejs 尝试着迁移到 webpack,没想到刚迈出第一步随即翻车. 因为 sf.gg 本质是个后端路由项目,每个页 ...

  5. python基础的输入字符串的格式化

    name = input("name:") age = input ("age:") job = input ("job") info = ...

  6. 简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js

    cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...

  7. poj1830:开关问题

    链接:http://poj.org/problem?id=1830 某天“佐理慧学姐”突然来问了我这道题. 诶,窝只会线性基,但是好像搞不了方案数啊…… 啃题解吧. woc!线性代数哦,就是那种我不会 ...

  8. HDU 1019 Least Common Multiple【gcd+lcm+水+多个数的lcm】

    Least Common Multiple Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  9. 我的第二个网页制作:p,hn,br标签的使用

    <html> <head> <title>这是我的第二个html代码</title> <body> <!-- <p>Hel ...

  10. Codeforces Round #332 (Div. 2)_B. Spongebob and Joke

    B. Spongebob and Joke time limit per test 2 seconds memory limit per test 256 megabytes input standa ...