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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
FLASH 广告之外的链接
Dec 16 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
Mootools 1.2教程 类(一)
Sep 15 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 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 class类的用法详细总结
2013/10/17 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
php统计文章排行示例
2014/03/04 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
Python入门篇之面向对象
2014/10/20 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python模拟表单提交登录图书馆
2018/04/27 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
django创建超级用户过程解析
2019/09/18 Python
python next()和iter()函数原理解析
2020/02/07 Python
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
士力架广告词
2014/03/20 职场文书
食品安全汇报材料
2014/08/18 职场文书
2015年老干部工作总结
2015/04/23 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL