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中Eval函数的使用说明
Oct 11 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
原生js实现3D轮播图
Mar 21 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 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
我的论坛源代码(八)
2006/10/09 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
JS实现拼图游戏
2021/01/29 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
python 合并文件的具体实例
2013/08/08 Python
go和python调用其它程序并得到程序输出
2014/02/10 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python实现数字炸弹游戏程序
2020/07/17 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
品质主管岗位职责
2014/03/16 职场文书
实习单位鉴定评语
2014/04/26 职场文书
校园文明标语
2014/06/13 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
聘任合同书
2015/09/21 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
Docker部署Mysql8的实现步骤
2022/07/07 Servers