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实现页面打印的三种方法
Mar 05 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
js实现表格字段排序
Feb 19 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
使用js画图之饼图
Jan 12 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
基于vue.js实现购物车
Jan 15 Javascript
基于postman获取动态数据过程详解
Sep 08 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
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
图片完美缩放
2006/09/07 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
js实现抽奖功能
2020/11/24 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python实现去除代码前行号的方法
2015/03/10 Python
Python如何为图片添加水印
2016/11/25 Python
Python开发的实用计算器完整实例
2017/05/10 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
恶意软件的定义
2014/11/12 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
日语系毕业生推荐信
2013/11/11 职场文书
英语国培研修感言
2014/02/13 职场文书
学生自我评语大全
2014/04/18 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
捐书仪式主持词
2015/07/04 职场文书