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中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
关于JS中prototype的理解
Sep 07 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
js面向对象方式实现拖拽效果
Mar 03 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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
JavaScript 学习历程和心得分享
2010/12/12 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Python实现句子翻译功能
2017/11/14 Python
Python高级用法总结
2018/05/26 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
python raise的基本使用
2020/09/10 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
商务主管岗位职责
2013/12/08 职场文书
转党组织关系介绍信
2014/01/08 职场文书
数学检讨书1000字
2014/02/24 职场文书
美容院经理岗位职责
2014/04/03 职场文书
公司安全管理制度范本
2015/08/05 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python