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 当前链接激活传递参数|div的切换显示

    一.链接激活时传递参数 $("a").click(function(){ var obj=$(this).attr("field"); //获取当前field ...

  2. [算法][包围盒]球,AABB,OBB

    参考地址请看图片水印:http://www.cnblogs.com/iamzhanglei/archive/2012/06/07/2539751.html http://blog.sina.com.c ...

  3. lua代码优化(转)

    暂时转了别人一篇,以后再优化 1.使用局部变量local 这是最基础也是最有用的策略,虽然使用全局变量并不能完全避免,但还是应该尽量避免,取而代之使用局部变量即local.这里的局部变量也包括函数fu ...

  4. C Looooops(扩展欧几里得)

    C Looooops Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 20128 Accepted: 5405 Descripti ...

  5. Friendship

    Friendship Time Limit: 2000MS Memory Limit: 20000K Total Submissions: 9824 Accepted: 2720 Descriptio ...

  6. 哈夫曼树-Fence Repair 分类: 树 POJ 2015-08-05 21:25 2人阅读 评论(0) 收藏

    Fence Repair Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 32424 Accepted: 10417 Descri ...

  7. 算法大全(c,c++)

    http://www.2cto.com/kf/201109/105758.html 算法大全(C,C++)一. 数论算法 1.求两数的最大公约数function gcd(a,b:integer):in ...

  8. 第十六章:网络IPC:套接字

    16.1.引言 上一章考查了各种Unix系统所提供的经典进程间通信(IPC)机制:管道.先进先出.消息队列.信号量以及共享内存.通过这些机制,同一台计算机上运行的进程可以相互通信.本章将考查不同计算机 ...

  9. camera isp

    1. 目标手机摄像头模组用ISP功能模块的市场走向及研发方向.为能够正确认识手机摄像模组行业提供技术及市场依据.2. ISP在模组上的应用原理2.1 功能区域无论数码相机.摄像机或者摄像手机,其影像数 ...

  10. Java中通过JDBC远程连接Oracle数据库

    通过jdbc连接数据库,拢共分三步: 第一步:下载一个JDBC的驱动,然后把jar包扔到项目里并add to build path: 第二步:去本地oracle文件夹下找到“TNSNAMES.ORA” ...