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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
基于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
牡丹941资料
2021/03/01 无线电
php下intval()和(int)转换使用与区别
2008/07/18 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python绘制彩虹图
2019/12/16 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
Python实现粒子群算法的示例
2021/02/14 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
Unix如何添加新的用户
2014/08/20 面试题
《天游峰的扫路人》教学反思
2014/04/25 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
营销计划书
2015/01/17 职场文书
员工给公司的建议书
2019/06/24 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python