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

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>h
<style>
#box {
width: 100%;
height: 400px;
background: black;
color: #fff;
font-size:40px;
line-height:400px;
text-align:center;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var oDate = new Date();//获取当前时间;
oDate.setFullYear(2016,11,31);//自动进位;
oDate.setHours(0,0,0,0); function countDown(){
//未来时间戳减去现在时间的时间戳;
var ms = oDate.getTime() - new Date().getTime(); //毫秒转换成秒
var oSec = parseInt(ms/1000); //秒转换成天
var oDay = parseInt(oSec/86400); //不到一天剩下的秒数;
oSec%=86400; //转换成小时
var oHour = parseInt(oSec/3600); //不到一小时剩下的秒数;
oSec%=3600; //转换成分钟
var oMin = parseInt(oSec/60); //不到一分钟剩下的秒数;
oSec%=60; oBox.innerHTML = '距离2016年12月31日还有:'+oDay+'天'+oHour+'时'+oMin+'分'+oSec+'秒';
}
countDown();
setInterval(countDown,1000);
}
</script>
</head> <body>
<div id="box">距离2016年12月31日还有:xx天xx时xx分xx秒</div>
</body>
</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实现倒计时及时间对象 JS实现倒计时效果代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset ...

  2. js最简洁的时间对象转成时间字符串的方法

    getTimestr(val){ let temp = val.toLocaleString() if(temp.match(/[\u4e00-\u9fa5]/g)[0]=="上" ...

  3. 一个简单的 js 时间对象创建

    JS中获取时间很常见,凑凑热闹,也获取一个时间对象试试 首先,先了解js的获取时间函数如下: var myDate = new Date();          //创建一个时间对象 myDate.g ...

  4. js时间对象格式化 format(转载)

    /** * 时间对象的格式化 */ Date.prototype.format = function(format){ /* * format="yyyy-MM-dd hh:mm:ss&qu ...

  5. js 获取时间对象代码

    /** * 获取时间对象 */function getDateObj(addDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+addDa ...

  6. js 系统时间对象

    alert(new Date()); 年是多少,月,日 var year=new Date(); var m=year.Getfullmonth; alert(m);月份特殊,必须加个数字1 数据类型 ...

  7. JS对象 Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒)。 定义一个时间对象 : var Udate=new Date();Date()的首字母须大写

    Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 定义一个时间对象 : var Udate=new Date(); 注意:使用关键字new,Date()的首 ...

  8. js 获取时间对象

    1.当前系统时间   var date=new Date(); 2.字符串转时间对象  var date=new Date("2018-01-01"); 3.获取年份: var y ...

  9. js时间对象Date()

    Date ()是一个专门用来创建时间对象的,是一个复杂数据类型,具有读写属性 语法: var time = new Date() 返回值:当前终端的时间 // 1.创建当前时间对象 var time ...

随机推荐

  1. php部分--session的三种用法

    一.在不同页面之间显示用户的信息 二.控制登录 1.登录页面 <body> <form action="loginchuli.php" method=" ...

  2. cache是什么文件?

    通常人们所说的Cache就是指缓存SRAM. SRAM叫静态内存,"静态"指的是当我们将一笔数据写入SRAM后,除非重新写入新数据或关闭电源,否则写入的数据保持不变. 由于CPU的 ...

  3. JavaScript 图片的上传前预览(兼容所有浏览器)

    功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点   ● 对于 Chrome.Fire ...

  4. 2016HUAS_ACM暑假集训3C - Til the Cows Come Home

    单源最短路径,首先想到的是Dijkstra.Dijkstra算法的思路就不啰嗦了,概括起来就是时刻保持当前节点到目标节点的距离最短. 题目大意(不进行翻译解释了,就抽离为图来表达):有N个顶点和T条边 ...

  5. The Run-Time Constant Pool The Constant Pool

    http://docs.oracle.com/javase/specs/jvms/se7/html/jvms-4.html#jvms-4.4 http://docs.oracle.com/javase ...

  6. 在package.json里面的script设置环境变量,区分开发及生产环境。注意mac与windows的设置方式不一样

    在package.json里面的script设置环境变量,区分开发及生产环境. 注意mac与windows的设置方式不一样. "scripts": { "publish- ...

  7. 为重负网络优化 Nginx 和 Node.js --引用自https://linux.cn/article-1314-1.html

    为重负网络优化 Nginx 和 Node.js 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对.他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器 ...

  8. python数据分析之pandas库的DataFrame应用二

    本节介绍Series和DataFrame中的数据的基本手段 重新索引 pandas对象的一个重要方法就是reindex,作用是创建一个适应新索引的新对象 ''' Created on 2016-8-1 ...

  9. python标准库xml.etree.ElementTree的bug

    使用python生成或者解析xml的方法用的最多的可能就数python标准库xml.etree.ElementTree和lxml了,在某些环境下使用xml.etree.ElementTree更方便一些 ...

  10. 在ios8中做的屏幕旋转功能

    http://www.cnblogs.com/smileEvday/archive/2013/04/24/Rotate2.html 思路出自这篇博主的文章. 直接上代码 -(void)willAnim ...