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. 别纠结mybatis啦,赶紧来瞅瞅吧

    自从用了mybatis后,被坑的次数不下于无数次,今天我们就来说说最最头疼的错误,看看有多少人入过这个坑呢. 当程序出现了 Result Maps collection already contain ...

  2. docker:(4)利用WebHook实现持续集成

    研发小伙伴可能对下列操作步骤会深有体会 写代码-->提交代码-->打包-->发布 在项目调试测试阶段,可能经常需要重复上面的步骤,以便将最新代码部署到特定环境供测试人员或其他人员使用 ...

  3. [异常解决] 奇巧淫技——VirtualBox中的linux无显示启动,并在win7上远程控制

    楼主是资深技术宅(癖),由于感觉手上的老笔记本太卡,遂狠心买了个性能至强的主机同时配了个投影仪(满足躺着打代码的意淫场景).但是体验了大概一个月发现还是坐着打代码舒服,但是如下图坐着打代码总是要抬头看 ...

  4. Python模块学习------ 多线程threading(1)

    # Method 1: 创建一个Thread实例,传给它一个函数:import threading from time import sleep, ctime loops = [4,2] def lo ...

  5. 三种ajax上传文件方法

    1.  XMLHttpRequest(原生ajax) <input class="file" type="file" id="fafafa&qu ...

  6. .net 下发送calendar

    前段时间公司系统中有一块需要发送邮件calendar outlook可以接受查看calendar 发送outlook主要是有rrule脚本的边界 网上找过一些资料,主要有两种实现方式 1.一种是已ic ...

  7. 【转】jar包和war包的介绍和区别

    JavaSE程序可以打包成Jar包(J其实可以理解为Java了),而JavaWeb程序可以打包成war包(w其实可以理解为Web了).然后把war发布到Tomcat的webapps目录下,Tomcat ...

  8. Spring boot(三)整合mybaties+thymeleaf实现基础crud

    工程结构: 首先在pom文件中引入依赖 <?xml version="1.0" encoding="UTF-8"?> <project xml ...

  9. 使用jemeter手工编写注册、登陆脚本 运用 fiddler (三)

    手工注册脚本的录制 我们可以发现  编写手工脚本 需要用到两个软件一起合作才能编写成功 工作亦是如此  养成良好的团队合作精神 是必不可少的 现在我们来看手工编写注册脚本 第一步 :我们先进入网站首页 ...

  10. 跟我一起读postgresql源码(十一)——Executor(查询执行模块之——Materialization节点(上))

    物化节点 顾名思义,物化节点是一类可缓存元组的节点.在执行过程中,很多扩展的物理操作符需要首先获取所有的元组后才能进行操作(例如聚集函数操作.没有索引辅助的排序等),这时要用物化节点将元组缓存起来.下 ...