<!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. 在C++工程中设置全局函数

    在头文件中对该函数进行全局函数的声明: extern void Test(); 在cpp文件中进行函数的定义: void Test() { MessageBox(NULL,L"调用了C++的 ...

  2. Linux下mysql备份 恢复

    转载自http://blog.chinaunix.net/uid-20577907-id-161611.html 比如我们要备份mysql中已经存在的名为linux的数据库,要用到命令mysqldum ...

  3. C#占位符与格式化字符串

    原文地址:http://www.cnblogs.com/fumj/articles/2380290.html 在c#中有两种方式可以输出多个字符 其中的一种: static void Main()   ...

  4. 【leetcode❤python】387. First Unique Character in a String

    #-*- coding: UTF-8 -*- class Solution(object):    def firstUniqChar(self, s):        s=s.lower()     ...

  5. CodeForces 508C Anya and Ghosts

     Anya and Ghosts Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u S ...

  6. Debian8 远程登录Permission Denied,please try again

    多数是系统没有开启Root登录的权限. 修改root的ssh权限: ① vi /etc/ssh/sshd_config ② 找到配置项PermitRootLogin 将此项的值改为yes ③ 重启ss ...

  7. 作用域内优先级及this指针

    函数声明>变量声明 作用域:顶部----------------------> 函数声明会覆盖变量声明,但不会覆盖变量赋值 this指针不是变量.当调用括号的左边不是引用类型而是其它类型, ...

  8. 是时候改变你的开发方式了-XAF信息系统快速框架介绍

    我是一名.Net开发者,从DOS时代Turbo c 算起(1996年),马上满20年了.想想写过的代码真是不少,却做了很多重复反复的编码工作.当然中间也带过团队做过几个大项目,但是代码仍没写够,还是每 ...

  9. placeholder在ie浏览器里不显示的问题解决

    <script type="text/javascript"> if( !('placeholder' in document.createElement('input ...

  10. 转 cocos2dx内存优化 (之二)

    一.cocos2dx之如何优化内存使用(高级篇) 本文由qinning199原创,转载请注明:http://www.cocos2dx.net/?p=93 一.内存优化原则 为了优化应用内存,你应该知道 ...