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 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
python编写暴力破解FTP密码小工具
2014/11/19 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Python requests模块session代码实例
2020/04/14 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
音乐之声观后感
2015/06/04 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书