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 相关文章推荐
JavaScript日历实现代码
Sep 12 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
京东优选小程序的实现代码示例
Feb 25 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
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python之PyUnit单元测试实例
2014/10/11 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Django发送邮件功能实例详解
2019/09/02 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
python中upper是做什么用的
2020/07/20 Python
python实现磁盘日志清理的示例
2020/11/05 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
给校长的建议书600字
2014/05/15 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
查摆剖析材料范文
2014/09/30 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
云台山导游词
2015/02/03 职场文书