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提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 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多个版本的分析解释
2011/07/21 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
JS查看对象功能代码
2008/04/25 Javascript
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
python输入错误后删除的方法
2019/10/12 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
基于Python fminunc 的替代方法
2020/02/29 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
String和StringBuffer的区别
2015/08/13 面试题
工商管理专业毕业生求职信
2014/05/26 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
python munch库的使用解析
2021/05/25 Python
Python实现机器学习算法的分类
2021/06/03 Python