JavaScript电子时钟倒计时


Posted in Javascript onJanuary 09, 2016

本文实例讲解了JavaScript电子时钟倒计时的详细代码,分享给大家供大家参考,具体内容如下
JavaScript时间类
1、获取时分秒:
         getHours()
         getMinutes();
         getSeconds();
2、获取年月日:
         getFullYear();
         getMonth() + 1;//获取的月份需要+1;
         getDate(); //日期
         getDay(); //获取的是星期,0--》星期天

效果图:

JavaScript电子时钟倒计时

实例:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>电子时钟</title>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 #wrap{
  width: 200px;
  height: 100px;
  background-color: black;
 }
 #time{
  color: #fff;
  display: block;
  font-size: 24px;
  margin: 0 auto;
  padding-top: 20px;
  /*border: 1px solid red;*/
  text-align: center;
  width: 100px;
 }
 #timer{
  color: green;
  display: block;
  font-size: 18px;
  margin: 0 auto;
  padding-top: 10px;
  /*border: 1px solid red;*/
  text-align: center;
  /*width: 100px;*/
 }
 </style>
</head>
<body>
 <div id="wrap">
  <span id="time"></span>
  <span id="timer"></span>
 </div>
 <script type="text/javascript">
 var time =document.getElementById("time");
 var timer =document.getElementById("timer");

 setInterval(function() {

 var date = new Date();
 var hours = date.getHours();
 var minutes = date.getMinutes();
 var seconds = date.getSeconds(); 
 var years = date.getYear();
 var dates = date.getDate();
 var monts = date.getMonth()+1; 
 var day = date.getDay();
 var parses = date.getMilliseconds()%60;

 switch(day){
  case 0:
  day="日";
  case 1:
  day="一";
  case 2:
  day="二";
  case 3:
  day="三";
  case 4:
  day="四";
  case 5:
  day="五";
  case 6:
  day="六";
 }
 //如果秒数小于十,在秒数面前连接一个0
 if(seconds < 10) {
  seconds = "0" + seconds;
 }
 //如果分钟数小于十,在分钟数面前连接一个0
 if(minutes < 10) {
  minutes = "0" + minutes;
 }
 //如果小时数小于十,在小说数面前连接一个0
 if(hours < 10) {
  hours = "0" + hours;
 }
 if(years<1900) {
  years = years+1900;
 }
 if(dates<10) {
  dates = "0" + dates;
 }
 if(monts<10) {
  monts = "0" + monts;
 }
 if(parses<10) {
  // parses = "0" + parses;
 }

 
 timer.innerHTML = years +"年" +monts+ "月" +dates +"号"+"星期"+day;
  time.innerHTML = hours + ":" + minutes + ":" + seconds + ":" + parses;
 // date.getTime()//返回的是一个从1970年到当前的毫秒数(时间戳)(ms)
 // date.getMonth()//返回的是月份,从0开始算
 // date.getFullYear();
 
 },10)
 </script>
</body>
</html>

以上就是本文的详细内容,希望对大家的学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
javascript实现tab切换特效
Nov 12 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 #Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 #Javascript
学习JavaScript设计模式之状态模式
Jan 08 #Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 #Javascript
js实现对ajax请求面向对象的封装
Jan 08 #Javascript
javascript弹性运动效果简单实现方法
Jan 08 #Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 #Javascript
You might like
PHP技术开发技巧分享
2010/03/23 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
javascript Keycode对照表
2009/10/24 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
python实现神经网络感知器算法
2017/12/20 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
银行毕业实习自我鉴定
2013/09/19 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
初中数学教学随笔
2015/08/15 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang