<!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. 求解数组环中最大子数组和的问题(java)

    //石家庄铁道大学 信1405-1 班 唐炳辉 在上一次作业中,对于普通数组的最大子数组的求解问题的基础上,将普通的数组变成一个首尾相接的环,求这个环的最大子数组.类似的,只要改变普通数组的数组位置, ...

  2. Java-Eclipse插件开发学习笔记

    Eclipse插件 学习笔记 作者   Rick- Bao 开始日期  2014年8月26日 结束日期  2014年8月27日 一 . CVS(current version system) 版本控制 ...

  3. UVA 11552 四 Fewest Flops

    Fewest Flops Time Limit:2000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Statu ...

  4. FZU 2143 Board Game

    Board Game Accept: 95    Submit: 246Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Descri ...

  5. MySQL(五) —— 子查询

    子查询(SubQuery)是指出现在其他SQL语句内的SELECT语句. 如: SELECT * FROM t1 WHERE col1 = (SELECT col2 FROM t2); 其中 SELE ...

  6. SQL Server 字符串处理

    ) SET @str='AP-FQC-2014072300004' --获取指定字符第一次出现的位置 SELECT PATINDEX('%-%',@str) --返回:3 --获取指定字符第一次出现的 ...

  7. 流媒体基础实践之——RTMP直播推流

    一.RTMP推流:用户可将RTMP视频流推送到阿麦提供的打流地址.地址格式类似于: rtmp://livepush.myqcloud.com/live 现在可以支持哪些直播源?和那些直播软件?推流参数 ...

  8. 笔记本_hp

    1.技术支持 http://support.hp.com/cn-zh 2.搜到的信息:“http://forum.51nb.com/thread-1080424-1-1.html” Product N ...

  9. Json知识总结

    JSON对象是一个无序的"名称/值"对的集合它开始于“{”,结束于“}”.每一个属性名和值间用“:”提示,属性间用“,”分隔.一个数组开始于"[",结束于&qu ...

  10. thinkphp模板调用函数用法

    注意:自定义函数要放在项目应用目录/common/common.php中. 这里是关键. 模板变量的函数调用格式为: {$varname|function1|function2=arg1,arg2,# ...