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去掉字符串里的所有空格
Feb 08 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
vue的安装及element组件的安装方法
Mar 09 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
js canvas实现画图、滤镜效果
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
php ajax 静态分页过程形式
2011/09/02 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
PHP7 新增常量
2021/03/09 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python 变量初始化空列表的例子
2019/11/28 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
行政文员岗位职责
2013/11/08 职场文书
写好自荐信要注意的问题
2013/11/10 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
公务员个人总结
2015/02/12 职场文书
教师工作表现自我评价
2015/03/05 职场文书
校园安全学习心得体会
2016/01/18 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
python​格式化字符串
2022/04/20 Python