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 相关文章推荐
web基于浏览器的本地存储方法应用
Nov 27 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
简单实现js浮动框
Dec 13 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
Python安装selenium包详细过程
2019/07/23 Python
python中自带的三个装饰器的实现
2019/11/08 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
详解Python中namedtuple的使用
2020/04/27 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
5.1手机促销活动
2014/01/17 职场文书
上课迟到检讨书
2014/01/19 职场文书
暑期培训班策划方案
2014/08/26 职场文书
党代会心得体会
2014/09/04 职场文书
招标保密承诺书
2015/01/20 职场文书
介绍信模板
2015/01/31 职场文书
寒假安全保证书
2015/02/28 职场文书
庆七一活动简报
2015/07/20 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Python+Tkinter制作专属图形化界面
2022/04/01 Python
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers