JavaScript时间类

     获取时分秒：
         getHours()
         getMinutes();
         getSeconds();
      获取年月日：
         getFullYear();
         getMonth() + 1;//获取的月份需要+1；
         getDate(); //日期
         getDay(); //获取的是星期，0--》星期天
     实例：（效果图）
                         

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>电子时钟</title>
  6.     <style type="text/css">
  7.     *{
  8.         margin: 0;
  9.         padding: 0;
  10.     }
  11.      #wrap{
  12.          width: 200px;
  13.          height: 100px;
  14.          background-color: black;
  15.      }
  16.      #time{
  17.           color: #fff;
  18.           display: block;
  19.           font-size: 24px;
  20.           margin: 0 auto;
  21.           padding-top: 20px;
  22.           /*border: 1px solid red;*/
  23.           text-align: center;
  24.           width: 100px;
  25.      }
  26.      #timer{
  27.          color: green;
  28.           display: block;
  29.           font-size: 18px;
  30.           margin: 0 auto;
  31.           padding-top: 10px;
  32.           /*border: 1px solid red;*/
  33.           text-align: center;
  34.           /*width: 100px;*/
  35.      }
  36.     </style>
  37. </head>
  38. <body>
  39.        <div id="wrap">
  40.             <span id="time"></span>
  41.          <span id="timer"></span>
  42.        </div>
  43.      <script type="text/javascript">
  44.        var time =document.getElementById("time");
  45.         var timer =document.getElementById("timer");
  46.  
  47.        setInterval(function() {
  48.  
  49.         var date = new Date();
  50.         var hours = date.getHours();
  51.         var minutes = date.getMinutes();
  52.         var seconds = date.getSeconds();
  53.         var years = date.getYear();
  54.         var dates = date.getDate();
  55.         var monts = date.getMonth()+1;
  56.     var day = date.getDay();
  57.         var parses = date.getMilliseconds()%60;
  58.  
  59.      switch(day){
  60.           case 0:
  61.           day="日";
  62.            case 1:
  63.           day="一";
  64.            case 2:
  65.           day="二";
  66.            case 3:
  67.           day="三";
  68.            case 4:
  69.           day="四";
  70.            case 5:
  71.           day="五";
  72.            case 6:
  73.           day="六";
  74.      }
  75.         //如果秒数小于十，在秒数面前连接一个0
  76.         if(seconds < 10) {
  77.             seconds = "0" + seconds;
  78.         }
  79.         //如果分钟数小于十，在分钟数面前连接一个0
  80.         if(minutes < 10) {
  81.             minutes = "0" + minutes;
  82.         }
  83.         //如果小时数小于十，在小说数面前连接一个0
  84.         if(hours < 10) {
  85.             hours = "0" + hours;
  86.         }
  87.         if(years<1900) {
  88.             years = years+1900;
  89.         }
  90.         if(dates<10) {
  91.             dates = "0" + dates;
  92.         }
  93.         if(monts<10) {
  94.             monts = "0" + monts;
  95.         }
  96.         if(parses<10) {
  97.             // parses = "0" + parses;
  98.         }
  99.  
  100.         timer.innerHTML =  years +"年" +monts+ "月" +dates +"号"+"星期"+day;
  101.             time.innerHTML = hours + ":" + minutes + ":" + seconds + ":" + parses;
  102.         // date.getTime()//返回的是一个从1970年到当前的毫秒数（时间戳）（ms）
  103.         // date.getMonth()//返回的是月份，从0开始算
  104.         // date.getFullYear();
  105.  
  106.     },10)
  107.      </script>
  108. </body>
  109. </html>

2.倒计时

  1.  <!doctype html>
  2. <html>
  3. <meta charset="utf-8">
  4. <title>倒计时</title>
  5. <head> 
  6.  
  7.      <style type="text/css">
  8.      *{
  9.          margin: 0;
  10.          padding: 0;
  11.  
  12.      }
  13.        .wrap{
  14.            width: 350px;
  15.            height: 100px;
  16.            background-color: black;
  17.        }
  18.        #dates{
  19.            color: #fff;
  20.            margin-top: 10px;
  21.            display: block;
  22.            margin-left: 15px;
  23.        }
  24.        p{
  25.            color: #fff;
  26.        }
  27.      </style>
  28. </head>
  29. <body>
  30. <div class="wrap">
  31.     <p>距离2016年02月08号00时00分00秒春节倒计时：</p>
  32.     <!-- <p>距离2016年01月07号23时59分59秒倒计时：</p> -->
  33.     <span id="dates"></span>
  34. </div>
  35. <script type="text/javascript">
  36. var dates = document.getElementById("dates");
  37. function getRTime(){
  38. var EndTime= new Date('2016/02/07 23:59:59'); //截止时间
  39. var NowTime = new Date();
  40. var t =EndTime.getTime() - NowTime.getTime(); 
  41.  
  42. var d=Math.floor(t/1000/60/60/24);
  43. var h=Math.floor(t/1000/60/60%24);
  44. var m=Math.floor(t/1000/60%60);
  45. var s=Math.floor(t/1000%60);
  46. var p=Math.floor(t%60);
  47. if(d<10){
  48.    d="0"+d;
  49. }
  50. if(h<10){
  51.    h="0"+h;
  52. }
  53. if(m<10){
  54.    m="0"+m;
  55. }
  56. if(s<10){
  57.    s="0"+s;
  58. }
  59. if(p<10){
  60.    p="0"+p;
  61. }
  62.  
  63. dates.innerHTML=d+ "日" + h + "小时"+ m +"分" + s +"秒"+p+"毫秒";
  64. }
  65. setInterval(getRTime,1);
  66. </script>
  67. </body>
  68. </html>

JavaScript电子时钟+倒计时的更多相关文章

  1. Javascript 电子时钟源码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. JS实现电子时钟

          目前有个小项目,在首页头部导航栏里需要一个电子时钟的效果,于是我就采用如下代码实现了一个电子时钟的效果.不过不完美,第一种方式容易导致网页莫名其妙的异常,后来觉得可能是做的操作太多了,然后 ...

  3. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  4. 桌面小部件----LED电子时钟实现

    桌面控件是通过 Broadcast 的形式来进行控制的,因此每个桌面控件都对应于一个BroadcastReceiver.为了简化桌面控件的开发,Android 系统提供了一个 AppWidgetPro ...

  5. Qt - 与众不同的电子时钟

     Qt的电子时钟是个老掉牙的demo了,但是利用lcdNumber显示的样子非常老土(下图第一个显示效果),一看就知道是从qt帮助文档里摘出来的example,毫无新意. 美化一下系统时钟,抛开固有控 ...

  6. [TPYBoard-Micropython之会python就能做硬件 3] 制作电子时钟

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.TPYboard V102板  一块 2.DS3231 ...

  7. 3分钟利用TurnipBit制作电子时钟

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 TurnipBit(www.turnipbit.com)是一个面向青少年的开发板 ...

  8. Micropython TurnipBit 电子时钟 青少年编程入门

    电子时钟是一个很常用但是制作非常简单的小玩具了,对于Micropython初学者来说,制作一个电子时钟是非常简单又容易检验自己学习成果的实验了.TurnipBit相比于其他开发板,制作电子时钟就更加简 ...

  9. MFC桌面电子时钟的设计与实现

    目录 核心技术 需求分析 程序设计 程序展示 (一)核心技术 MFC(Micosoft Foundation Class Libay,微基础类库)是微基于Windows平台下的C++类库集合,MFC包 ...

随机推荐

  1. PAT MOOC dataStructure 4-1

    数据结构练习 4-1 AVL 树 1. 题目: Input Specification: Each input file contains one test case. For each case, ...

  2. MySQL Cluster 7.3.5 集群配置参数优化（优化篇）

    按照前面的教程:MySQL Cluster 7.3.5 集群配置实例(入门篇),可快速搭建起基础版的MySQL Cluster集群,但是在生成环境中,还是有很多问题的,即配置参数需要优化下, 当前生产 ...

  3. 引用项目外dll时不显示注释的解决方案

    在引用项目外的dll时,显示类库中的注释可按以下步骤: 方法或变量用summary添加注释,如:         /// <summary>发送post请求         /// < ...

  4. PHP 版去bom头

    原理: 找出文件前3个字符 如果它们对应的ASCII 值分别是  239,187,191 则判断为bom头,去掉前3个字符. 代码实现如下: $basedir = isset($_GET['dir'] ...

  5. struts2 自定义校验规则

    自定义校验规则:(了解) 在Struts2自定义校验规则: 1.实现一个Validator 接口. 2.一般开发中继承ValidatorSupport 或者 FieldValidatorSupport ...

  6. imageNamed和imageWithContentsOfFile区别

    在 Apple 官方帮助文档提供了两个加载图片的方法 imageNamed , 其参数为图片的名字 imageWithContentsOfFile , 其参数是图片文件的路径 下面主要是说一下他们的区 ...

  7. MEF Parts Sample

    namespace Microshaoft.MEF.Contracts { using System; public delegate void ExceptionEventHandler<TS ...

  8. 转换一个矩阵（2维数组）为HTML Table

    matrix[row][col],比如[ [ "Name", "Age" ], [ "Sam", 12 ] ] function (m) { ...

  9. alias实现命令别名

    需要经常进入/srv/www/app/account这个目录,每次都得重复的输入这一长串路径进入该目录,显得麻烦而费时,因此可以将"cd /srv/www/app/account" ...

  10. B站开源ijkplayer 等多个项目

    弹幕视频网 Bilibili(B 站)近日在 GitHub 网站上建立了开源工作组(BOSTF),用以分享与维护自己的开源项目,其中包括 DanmakuFlameMaster(燃烧吧!烈焰弹幕使)与 ...