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. VI命令汇总

    ia/Ao/Or + ?替换 0:文件当前行的开头$:文件当前行的末尾G:文件的最后一行开头:n :文件中第n行的开头 dd:删除一行3dd:删除3行yy:复制一行3yy:复制3行p:粘贴u:undo ...

  2. VC++平台上的内存对齐操作

    我们知道当内存的边界正好对齐在相应机器字长边界上时,CPU的执行效率最高,为了保证效率,在VC++平台上内存对齐都是默认打开的,在32位机器上内存对齐的边界为4字节:比如看如下的代码: struct ...

  3. css loading

    css /*loading*/ .loader { width: 100px; height: 101px; border: 8px solid; border-top-color: hsl(154, ...

  4. jq传统火车轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ISE14.7兼容性问题集锦

    六.WARNING:iMPACT:923 - Can not find cable, check cable setup ! 这个错误是由于驱动没有安装或者驱动安装有问题,一般ISE会在安装的时候把驱 ...

  6. Django_ajax

    AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传 ...

  7. cs231n spring 2017 lecture15 Efficient Methods and Hardware for Deep Learning 听课笔记

    1. 深度学习面临的问题: 1)模型越来越大,很难在移动端部署,也很难网络更新. 2)训练时间越来越长,限制了研究人员的产量. 3)耗能太多,硬件成本昂贵. 解决的方法:联合设计算法和硬件. 计算硬件 ...

  8. 总结过滤器,监听器,servlet的异同点,已经执行顺序。

    1.过滤器 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码.做一些业务逻辑判断等.其工作原理是,只要你在web.xml ...

  9. 配置ubuntu网络

    第一步:找到ubuntu中的网络标志,点击Edit connection 第二步:点击Add会出来一行配置网络的提示 第三步:选中Wired connectiong 1 然后点击Edit 第四步:选中 ...

  10. RabbitMQ 使用demo

    1.新建一个控制台应用程序:如图 2.代码如下: using RabbitMQ.Client;using RabbitMQ.Client.Events;using System;using Syste ...