JavaScript电子时钟倒计时第二款


Posted in Javascript onJanuary 10, 2016

本文实例讲解了JavaScript电子时钟倒计时的详细代码,分享给大家供大家参考,具体内容如下
JavaScript时间类
1、获取时分秒:
getHours()
getMinutes();
getSeconds();
2、获取年月日:
getFullYear();
getMonth() + 1;//获取的月份需要+1;
getDate(); //日期
getDay(); //获取的是星期,0--》星期天

效果图:

JavaScript电子时钟倒计时第二款

具体代码:

<!doctype html> 
<html> 
<meta charset="utf-8"> 
<title>倒计时</title>
<head> 

   <style type="text/css">
   *{
     margin: 0;
     padding: 0;

   }
    .wrap{
      width: 350px;
      height: 100px;
      background-color: black;
    }
    #dates{
      color: #fff;
      margin-top: 10px;
      display: block;
      margin-left: 15px;
    }
    p{
      color: #fff;
    }
   </style>
</head> 
<body> 
<div class="wrap">
  <p>距离2016年02月08号00时00分00秒春节倒计时:</p>
  <!-- <p>距离2016年01月07号23时59分59秒倒计时:</p> -->
  <span id="dates"></span>
</div>
<script type="text/javascript"> 
var dates = document.getElementById("dates");
function getRTime(){ 
var EndTime= new Date('2016/02/07 23:59:59'); //截止时间 
var NowTime = new Date(); 
var t =EndTime.getTime() - NowTime.getTime(); 

var d=Math.floor(t/1000/60/60/24); 
var h=Math.floor(t/1000/60/60%24); 
var m=Math.floor(t/1000/60%60); 
var s=Math.floor(t/1000%60); 
var p=Math.floor(t%60);
if(d<10){
  d="0"+d;
}
if(h<10){
  h="0"+h;
}
if(m<10){
  m="0"+m;
}
if(s<10){
  s="0"+s;
}
if(p<10){
  p="0"+p;
}

dates.innerHTML=d+ "日" + h + "小时"+ m +"分" + s +"秒"+p+"毫秒";
} 
setInterval(getRTime,1); 
</script> 
</body> 
</html>

以上就是本文的详细内容,希望对大家的学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
HTML的select控件美化
Mar 27 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
浅析vue深复制
Jan 29 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
vue实例的选项总结
Jun 09 Javascript
js实现简单的随机点名器
Sep 17 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 #Javascript
Node.js静态文件服务器改进版
Jan 10 #Javascript
实例讲解javascript注册事件处理函数
Jan 09 #Javascript
详解javascript事件冒泡
Jan 09 #Javascript
js父页面中使用子页面的方法
Jan 09 #Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 #Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 #Javascript
You might like
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python六大开源框架对比
2015/10/19 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python实现求最长回文子串长度
2018/01/22 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python可以实现栈的结构吗
2020/05/27 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
新员工培训个人的自我评价
2013/10/09 职场文书
工程项目经理任命书
2014/06/05 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
古诗之感恩老师
2019/10/24 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang