js实现倒计时及时间对象

JS实现倒计时效果代码如下：

 1 <!doctype html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8">

 5 <title>无标题文档</title>h

 6 <style>

 7 #box {

 8     width: 100%;

 9     height: 400px;

10     background: black;

11     color: #fff;

12     font-size:40px;

13     line-height:400px;

14     text-align:center;

15 }

16 </style>

17 <script>

18 window.onload = function(){

19     var oBox = document.getElementById('box');

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

21     oDate.setFullYear(2016,11,31);//自动进位；

22     oDate.setHours(0,0,0,0);

23

24     function countDown(){

25         //未来时间戳减去现在时间的时间戳;

26         var ms = oDate.getTime() - new Date().getTime();

27

28         //毫秒转换成秒

29         var oSec = parseInt(ms/1000);

30

31         //秒转换成天

32         var oDay = parseInt(oSec/86400);

33

34         //不到一天剩下的秒数;

35         oSec%=86400;

36

37         //转换成小时

38         var oHour = parseInt(oSec/3600);

39

40         //不到一小时剩下的秒数;

41         oSec%=3600;

42

43         //转换成分钟

44         var oMin = parseInt(oSec/60);

45

46         //不到一分钟剩下的秒数;

47         oSec%=60;

48

49         oBox.innerHTML = '距离2016年12月31日还有:'+oDay+'天'+oHour+'时'+oMin+'分'+oSec+'秒';

50     }

51     countDown();

52     setInterval(countDown,1000);

53 }

54 </script>

55 </head>

56

57 <body>

58 <div id="box">距离2016年12月31日还有:xx天xx时xx分xx秒</div>

59 </body>

60 </html>

实现效果入下：

时间戳：1970年1月日至今的毫秒数:oDate.getTime(); //不要问我为什么是1970年1月至今哦！自个儿百度啦！ 
时间对象:
   获取时间:       var oDate = new Date();       oYear = oDate.getFullYear();       oMon = oDate.getMonth();       oDay = oDate.getDate();       oHou = oDate.getHours();       oMin = oDate.getMinutes();       oSec = oDate.getSeconds();       oWeek = oDate.getDay();        设置时间:       oDate.setFullYear(年,月,日);       oDate.setMonth(月);       oDate.setDate(日);       oDate.setHours(时,分,秒,毫秒);       时间会自动进位;
这是一个小效果，如果有不对的是地方，互相交流；

js-------》(小效果)实现倒计时及时间对象的更多相关文章

  1. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  2. 【JS小技巧】JavaScript 函数用作对象的隐藏问题

    用户反馈 @消失的键盘 在论坛反馈了一个问题,在 AppBoxMvc 中的 Title 模型中,如果将 Name 属性改名为小写的 name 属性,就会报错: 因为这是一个 ASP.NET MVC 的 ...

  3. 【JS小技巧】JavaScript 函数用作对象的隐藏问题（F.ui.name）

    用户反馈 @消失的键盘 在论坛反馈了一个问题,在 AppBoxMvc 中的 Title 模型中,如果将 Name 属性改名为小写的 name 属性,就会报错: 因为这是一个 ASP.NET MVC 的 ...

  4. js小效果-轮播图

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  5. js小效果：返回顶部 scrollTop 。 滚屏：animate

    返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...

  6. JS小知识--获取当前日期的时间和上周五时间

    获取当前日期的时间和上周五时间 var today=new Date();//获取当前时间var weekday=today.getDay();//获取星期几    var monday=new Da ...

  7. js小效果-全选

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  8. js小效果-简易计算器

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. js小效果-双色球

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

随机推荐

  1. jquery中用jqzoom实现放大镜效果

    使用的jqzoom 插件实现的放大镜的效果 jqzoom 里面的代码 : 直接copy就好 //**************************************************** ...

  2. git 冲突

    git中冲突会用特殊的标记 (<<<<<<<=======>>>>>>>) 特殊标记<<<< ...

  3. [HTML]网页开发学习笔记

    为了要开发一套教学使用的教师管理系统,(客户需求使用网页做教师控制端口)我便学习了一下HTML网页开发. 很不错的学习开发的网站:http://www.w3school.com.cn/index.ht ...

  4. 【转】学习总结--Cookie & Session总结

    转载地址:http://www.phperzone.cn/portal.php?aid=718&mod=view 一.状态管理 1)什么是状态管理?   将浏览器与web服务器之间多次交互过程 ...

  5. 周赛-Integration of Polynomial 分类： 比赛 2015-08-02 08:40 10人阅读 评论(0) 收藏

    Integration of Polynomial Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/O ...

  6. Drainage Ditches 分类： POJ 图论 2015-07-29 15:01 7人阅读 评论(0) 收藏

    Drainage Ditches Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 62016 Accepted: 23808 De ...

  7. IP Address 分类： POJ 2015-06-12 19:34 12人阅读 评论(0) 收藏

    IP Address Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 19125   Accepted: 11053 Desc ...

  8. 分组排序SQL

    SELECT * FROM (SELECT columns,ROWNUM AS RN FROM (SELECT DISTINCT columns FROM table WHERE 1=1)) T WH ...

  9. uml中定义的关系详细详解

    uml定义的关系主要有六种:依赖.类属.关联.实现.聚合和组合.下面对其定义和表示方法逐一说明. 依赖(Dependency):元素A的变化会影响元素B,但反之不成立,那么B和A的关系是依赖关系,B依 ...

  10. android 引入phonegap

    步骤: 1.复制cordova-2.9.0.jar 到lib文件下 2.在assets文件下创建www文件夹及其cordova.js .jquery.js.jquery.mobile-1.3.2.cs ...