<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>倒计时</title>

	<style type="text/css">

        body,div{margin:0;padding:0;font-family:"微软雅黑";font-size:16px;}

        #div1{letter-spacing:3px;width:300px;height:50px;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-50px;background:#ff6000;line-height:50px;text-align:center;}

	</style>

</head>

<body>

	 <div id="div1">fr</div>

	 <script type="text/javascript">

	     function addZero(val){

	     	  return val<10?("0"+val):val

	     }

	     function getTimer(nowTime,targetTime){

	         if(targetTime>nowTime){

		          var spanTime = targetTime.getTime()-nowTime.getTime(); //

		          // 总的毫秒差 =指定时间距离1970.1.1的毫秒差 -当前时间距离1970.1.1的毫秒差

		          var spanDay = Math.floor(spanTime/(1000*60*60*24));    // 总的毫秒数换算成天数

		          var aDay = spanDay*24*60*60*1000;   // 天数占用的毫秒数

		          var spanHours = Math.floor((spanTime-aDay)/(1000*60*60)); //总的毫秒差 换算成小时

		          var aHours =spanHours*60*60*1000; // 小时占用的毫秒

		          var spanMinute = Math.floor((spanTime-aDay-aHours)/(1000*60)); //总的毫秒差换算成分钟

		          var aMinute = spanMinute*1000*60;  // 分钟暂用的毫秒数

		          var spanSec = Math.floor((spanTime-aDay-aHours-aMinute)/1000); //总的毫秒差换算成秒

		          var str = "倒计时："+addZero(spanDay)+"天"+addZero(spanHours)+"时"+addZero(spanMinute)+"分"+addZero(spanSec);

	          }else{

	          	  var str="00:00:00"

	          }

	          return str;

        }  

        var nowTime = new Date();  // 获取当前时间

        var targetTime = new Date("2015/4/23 01:00:00");  // 获取指定时间

        var oDiv =document.getElementById("div1");

        oDiv.innerHTML  =getTimer(nowTime,targetTime);

        var timer = setInterval(function(){

        	var nowTime = new Date();  // 获取当前时间

	        var targetTime = new Date("2015/4/23 01:00:00");  // 获取指定时间

	        var oDiv =document.getElementById("div1");

            oDiv.innerHTML=getTimer(nowTime,targetTime);

        },1000)

	 </script>

</body>

</html>

　　

倒计时原生js的更多相关文章

  1. 原生js 当前时间 倒计时代码

    源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...

  2. 原生 JS 实现手机验证码倒计时

    可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...

  3. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  4. 实现倒计时功能js

    <p>系统将会在<strong id="endtime"></strong>秒后跳转到登录页!</p> [原生js实现] <s ...

  5. 原生JS实现的h5小游戏-植物大战僵尸

    代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...

  6. 使用原生JS，实现鼠标点击爱心效果 ！！！

    使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...

  7. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  8. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  9. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

随机推荐

  1. Ecplise软件Devices看到两个相同设备问题

    Ecplise软件Devices看到两个相同设备问题 在使用过程中,连接一台设备,在Ecplise软件的Devices界面下突然看到2个设备,如下图: 图1 解决方案:先 kill-server, 再 ...

  2. eclipse中LogCat有时不显示信息的简单解决办法

    android的开发中,经常需要使用到LogCat查看打印的信息. 但是eclipse中的LagCat,有时会刷新不出打印的日志. 特别是在点击ClearLog按钮后,经常会出现上面说的这种情况. 一 ...

  3. 摩托罗拉SE4500 德州仪器TI Omap37xx/AM3715/DM3730/AM3530 wince6.0/Windows Mobile 6.5平台 二维软解调试记录及相关解释

    现在安卓大行其道,不是高通,就是MTK,甚至于很多人不知道还有德州仪器这个平台了,关于如何在德州仪器Omap37xx平台上调试SE4500,网络上除了针对SE4500的几个pdf文档介绍之外,没有任何 ...

  4. Task<TResult>的使用

    https://msdn.microsoft.com/en-us/library/dd321424(v=vs.110).aspx Represents an asynchronous operatio ...

  5. jQuery 预习视频

    1.事件补充 <input type="button" onclick="CheckAll('#edit_mode','#tb1');" value=&q ...

  6. phpcms 在后台增加了一个模型的话，在数据库中就会相应的增加数据库表

    在phpcms后台管理系统中,我们如果增加一个新的模型的话,例如名为:测试模型,英文名:test 在添加完成后,我们在数据库中发现增加了两个数据表:v9_test,v9_test_data;

  7. redis系列

    1.redis windows下的环境搭建 2.redis初学系列

  8. iOS - Swift available 平台判断

    前言 Swift 语言中的 @available 和 #available,Swift 2.0 中,引入了可用性的概念.对于函数,类,协议等,可以使用 @available 声明这些类型的生命周期依赖 ...

  9. [转载] 高效 MacBook 工作环境配置

    原文: http://mp.weixin.qq.com/s?__biz=MjM5NzMyMjAwMA==&mid=208231200&idx=1&sn=8a76ddc56c1f ...

  10. [转载] Linux进程关系

    在工作中, 主进程创建了子进程, 而子进程又创建了孙子进程, 然而子进程被莫名其妙的 kill 了, 结果主进程又启动了一个子进程, 子进程又尝试创建孙子进程, 但是这时候就有问题了, 因为孙子进程还 ...