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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
javascript中var的重要性分析
Feb 11 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
js实现拾色器插件(ColorPicker)
May 21 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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
js随机生成一个验证码
2017/06/01 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python 操作文件的基本方法总结
2017/08/10 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
Python调用Redis的示例代码
2020/11/24 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
银行类自荐信
2014/02/04 职场文书
人事专员的职责
2014/02/26 职场文书
设计专业自荐信
2014/06/19 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
防灾减灾标语
2014/10/07 职场文书
给医院的感谢信
2015/01/21 职场文书
2015年端午节活动总结
2015/02/11 职场文书
教师个人总结范文
2015/02/11 职场文书
中标通知书范本
2015/04/17 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
教师工作证明范本
2015/06/12 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
python对文档中元素删除,替换操作
2022/04/02 Python