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 相关文章推荐
Jquery为a标签的href赋值实现代码
May 03 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 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
php 信息采集程序代码
2009/03/17 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
简单实现php上传文件功能
2017/09/21 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
layui表格实现代码
2017/05/20 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
javascript History对象原理解析
2020/02/17 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python 变量初始化空列表的例子
2019/11/28 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
致长跑运动员广播稿
2014/01/31 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
5.12护士节活动总结
2015/02/10 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
Go语言基础函数基本用法及示例详解
2021/11/17 Golang