js实现倒计时及时间对象


Posted in Javascript onNovember 15, 2016

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>

实现效果入下:

js实现倒计时及时间对象

时间戳: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(时,分,秒,毫秒);
  时间会自动进位;

大概整理的就这些,还有很多不足的地方,希望大家多提宝贵意见!互相学习!互相取经!

Javascript 相关文章推荐
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 #Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 #Javascript
js调用屏幕宽度的简单方法
Nov 14 #Javascript
jquery心形点赞关注效果的简单实现
Nov 14 #Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 #Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 #Javascript
Node.js中路径处理模块path详解
Nov 14 #Javascript
You might like
一个程序下载的管理程序(四)
2006/10/09 PHP
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python简单文本处理的方法
2015/07/10 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
初中学校军训方案
2014/05/09 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
任命书格式模板
2015/09/22 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
MySQL中order by的使用详情
2021/11/17 MySQL