JavaScript电子时钟倒计时

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

效果图：

实例： 

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript html5 canvas绘制时钟效果

    本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

  • JavaScript html5 canvas绘制时钟效果(二)

    JavaScript html5 canvas绘制时钟效果(二)

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了.今天我们就用canvas来做一个小小的时钟.完整的代码在这里https://github.com/wwervin72/HTML5-Clock. 那么首先在这个页面里面我使用了两个canvas,一个用来绘制静态的时钟表盘和刻度,另一个用来绘制时钟的三个指针,然后用定位让他们重合到一起.然后这里没什么

  • js实现简单的秒表走动的时钟特效

    js实现简单的秒表走动的时钟特效

    本文实例介绍了javascript实现简单的秒表走动的时钟特效.分享给大家供大家参考.具体如下:   运行效果图如下: 实现代码: <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds(

  • JavaScript电子时钟倒计时第二款

    JavaScript电子时钟倒计时第二款

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

  • js时钟翻牌效果实现代码分享

    js时钟翻牌效果实现代码分享

    先给大家上运行效果图,看看是不是特别棒! 这一张是小编抓拍时钟翻牌时的效果图: 为大家分享的JavaScript时钟翻牌效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create an Animated Flip Down Clock</title> <link rel=&quo

  • html5 canvas js(数字时钟)实例代码

    html5 canvas js(数字时钟)实例代码

    复制代码 代码如下: <!doctype html><html>    <head>        <title>canvas dClock</title>    </head>    <body>        <canvas id = "clock" width = "500px" height = "200px">            您的浏览

  • JS html时钟制作代码分享

    JS html时钟制作代码分享

    时钟效果图: 闲来无聊做了一个网页的时钟,效果模拟传统时钟的运行方式, 运用了html 的画布实现指针,背景图片引用了网络图片. 具体原理: 首先将时钟分为四个不同区域,对每个区域计算cos,sin 来确实指针顶点位置.在通过画布来绘画出指针. 通过setInterval 每秒刷新指针位置实现 传统机械表针的动态跳动. 本人是JS开发程序员,从业1年多.闲来无聊的简单页面, 欢迎大家提问,或者建议.共同进步 代码部分,直接复制HTML 文件中即可查看效果: <!DOCTYPE html> &l

  • 简单的JS时钟实例讲解

    简单的JS时钟实例讲解

    本文实例介绍了JS时钟实现代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="gb2312"> <title>Document</title> <script type="text/javascript"> function startTime

  • 基于javascript实现动态时钟效果

    基于javascript实现动态时钟效果

    本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

  • javascript入门·动态的时钟,显示完整的一些方法,新年倒计时

    时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的.还有个原因,他总按照GTM市区来计量.我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响. 演示一:动态的时钟(来个复杂的) 11:55:13 演示二:显示完整的一些方法(事实上我很讨厌有些格式了) Mon Oct 1 22:35:25 UTC+0800

随机推荐