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的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
基于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 list()函数的详解
2013/06/05 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
ThinkPHP模型详解
2015/07/27 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
PHP chr()函数讲解
2019/02/11 PHP
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
koa-router源码学习小结
2018/09/07 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
Python的time模块中的常用方法整理
2015/06/18 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python容器类型公共方法总结
2020/08/19 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
班主任先进事迹材料
2014/12/17 职场文书
学生会个人总结范文
2015/02/15 职场文书
指导老师鉴定意见
2015/06/05 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
人力资源部工作计划
2019/05/14 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Python中的tkinter库简单案例详解
2022/01/22 Python