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中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
JS数组的赋值介绍
Mar 10 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
原生JS实现飞机大战小游戏
Jun 09 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 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
模拟xcopy的函数
2006/10/09 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
js实现放大镜特效
2017/05/18 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
Python中is和==的区别详解
2018/11/15 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python的几种主动结束程序方式
2019/11/22 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
实习护士自我鉴定
2013/10/13 职场文书
给导游的表扬信
2014/01/10 职场文书
英语课外活动总结
2014/08/27 职场文书
英文产品推荐信
2015/03/27 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
英语教学课后反思
2016/02/15 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android