<!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. 把int放在一个char数组里（用于处理每一位数字）

    sprintf(): #include <stdio.h> void put_int_with_space(int v) {     char str[50];    //定义一个足够大的 ...

  2. 3d中的向量

    向量基础知识 向量有且仅有的两个属性:方向长度(注意:向量性情中不包含位置信息) 向量相等就是其两个属性相等 向量处理标记位置:当向量的起始点与坐标原点重合,这样我们就可以用向量的终点坐标来描述一个处 ...

  3. [51NOD1537] 分解（递推，矩阵快速幂）

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1537 思路:一开始用二项式拆了一下,发现这个式子的形式总能变成 ...

  4. 泛型之Dictionary

    Dictionary<string, string>是一个泛型 他本身有集合的功能有时候可以把它看成数组 他的结构是这样的:Dictionary<[key], [value]> ...

  5. win7删除IE图标方法-----（注册表找不到对应的IE项）

    删除个IE图标费了半天事,硬是找不到网上说的那个 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Desk ...

  6. Nemerle Quick Guide

    This is a quick guide covering nearly all of Nemerle's features. It should be especially useful to a ...

  7. VS2013常用快捷方式

    [原文出处]http://blog.csdn.net/lushuner/article/details/23688629 1.回到上一个光标位置/前进到下一个光标位置 1)回到上一个光标位置:使用组合 ...

  8. Java Abstract class and Interface

    Abstract Class 在定义class的时候必须有abstract 关键字 抽象方法必须有abstract关键字. 可以有已经实现的方法. 可以定义static final 的常量. 可以实现 ...

  9. uiZjs入门

    具体基础的用法,可先看下这个文件做下了解,地址:http://files.cnblogs.com/dachuang/uizjs.rar 请先看完上面的文件,不然下面的可能看不懂,当然你要是之前了解过的 ...

  10. html5 和css3的小知识！

    阿里web字体的使用 (1)进入官网  点击webfont (2)输入对应的文字 然后选择添加字体 (3)可以直接引用线上地址或者本地下载,引用线上地址需要添加http,(在服务器环境下可以不用),如 ...