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. hdwiki 数据库结构说明

    HDWiki数据库结构说明          以下标有“A”的表示该列为自增列,标有“P”的表示该列为主码,标有“I”的表示该列为索引列,标有“U”的表示该列为唯一列,标有“F”的表示全文搜索.   ...

  2. 错误描述: 抱歉，该商品的交易金额与原先的不一致，请重新创建交易付款。 错误代码: TRADE_TOTALFEE_NOT_MATCH

    由于在支付宝最后支付,出现了问题导致未能支付成功,而支付宝已经记录了当前的网站订单号(out_trade_no),所以下次再以同一张订单进行支付时,就必须与之前的金额一致,否则就报上面的错. 解决方法 ...

  3. Wormholes 分类： POJ 2015-07-14 20:21 21人阅读 评论(0) 收藏

    Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 35235   Accepted: 12861 Descr ...

  4. 关于接收json以及使用json

    Common: FileIO.cs using System; using System.Collections.Generic; //using System.Linq; using System. ...

  5. Log4net使用指南

    请在这里下载示例代码 1           简介 1.1          Log4net的优点: 几乎所有的大型应用都会有自己的用于跟踪调试的API.因为一旦程序被部署以后,就不太可能再利用专门的 ...

  6. CSS之盒子模型

    CSS核心内容 源文件目录: D:\Users\ylf\Workspaces\MyEclipse 10 标准流 盒子模型 浮动 定位 标准流/非标准流: 标准流:就是普通的 非标准流:实际工作中要打破 ...

  7. hdu 1452 Happy 2004 膜拜这推导过程

    Happy 2004 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  8. 学习java annotation

    Annotation介绍 内置注解 自定义注解 元注解 /** * 测试自定义注解的使用 * */ @SxtAnnotation01 public class Demo02 { @Annotation ...

  9. Datagrid扩展方法InitEditGrid{支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

  10. C语言培训第一天

    下面是一些命令,先来谈谈今天的若干收获吧! 计算机中的一切文件都是以二进制补码的形式存在,问题也就来了. 第一个问题 如果我们给一个无符号的数赋值一个负数,他会读取到什么,又会输出什么?(似乎问题和上 ...