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 相关文章推荐
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
详解React中的组件通信问题
Jul 31 Javascript
基于JSON数据格式详解
Aug 31 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
基于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 数组实例说明
2008/08/18 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
Laravel 队列使用的实现
2019/01/08 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Django中的静态文件管理过程解析
2019/08/01 Python
python实现画循环圆
2019/11/23 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
keras K.function获取某层的输出操作
2020/06/29 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
蛋白质世界:Protein World
2017/11/23 全球购物
统计系教授推荐信
2014/02/28 职场文书
技术比武方案
2014/05/19 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
2014年国庆标语
2014/06/30 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
新教师个人工作总结
2015/02/06 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
单位收入证明范本
2015/06/18 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
2019年工作总结范文
2019/05/21 职场文书
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang