JavaScript时间类

     获取时分秒：
         getHours()
         getMinutes();
         getSeconds();
      获取年月日：
         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>

2.倒计时

 <!doctype html>

<html>

<meta charset="utf-8">

<title>倒计时</title>

<head> 

     <style type="text/css">

     *{

         margin: 0;

         padding: 0;

     }

       .wrap{

           width: 350px;

           height: 100px;

           background-color: black;

       }

       #dates{

           color: #fff;

           margin-top: 10px;

           display: block;

           margin-left: 15px;

       }

       p{

           color: #fff;

       }

     </style>

</head>

<body>

<div class="wrap">

    <p>距离2016年02月08号00时00分00秒春节倒计时：</p>

    <!-- <p>距离2016年01月07号23时59分59秒倒计时：</p> -->

    <span id="dates"></span>

</div>

<script type="text/javascript">

var dates = document.getElementById("dates");

function getRTime(){

var EndTime= new Date('2016/02/07 23:59:59'); //截止时间

var NowTime = new Date();

var t =EndTime.getTime() - NowTime.getTime(); 

var d=Math.floor(t/1000/60/60/24);

var h=Math.floor(t/1000/60/60%24);

var m=Math.floor(t/1000/60%60);

var s=Math.floor(t/1000%60);

var p=Math.floor(t%60);

if(d<10){

   d="0"+d;

}

if(h<10){

   h="0"+h;

}

if(m<10){

   m="0"+m;

}

if(s<10){

   s="0"+s;

}

if(p<10){

   p="0"+p;

}

dates.innerHTML=d+ "日" + h + "小时"+ m +"分" + s +"秒"+p+"毫秒";

}

setInterval(getRTime,1);

</script>

</body>

</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. 与或左移右移操作在ARM寄存器配置中的作用

    逻辑运算: 与运算&:与0清零  清零用与运算 或运算 |:或1置一  置一用或运算 异或 ^:不同为1  /*****单个寄存器清零置一*************************** ...

  2. [Data Structure & Algorithm] 七大查找算法

    查找是在大量的信息中寻找一个特定的信息元素,在计算机应用中,查找是常用的基本运算,例如编译程序中符号表的查找.本文简单概括性的介绍了常见的七种查找算法,说是七种,其实二分查找.插值查找以及斐波那契查找 ...

  3. Linux服务器，PHP的10大安全配置实践

    PHP被广泛用于各种Web开发.而当服务器端脚本配置错误时会出现各种问题.现今,大部分Web服务器是基于Linux环境下运行(比如:Ubuntu,Debian等).本文例举了十大PHP最佳安全实践方式 ...

  4. PHP图像裁剪为任意大小的图像，图像不变形，不留下空白

    <?php /** * 说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ fu ...

  5. 巧用dimens适配多个分辨率

      让应用自动适配多个分辨率的屏幕,是每个android程序员的基本功,就好像前端工程师熟练编写CSS Hack一样.适配工作中一个重要的工作就是对页面的调整. 对于页面的适配,有很多的方法和技巧.比 ...

  6. JS中的call()和apply()方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  7. ToolStripMenuItem

    MenuStrip 类 为窗体提供菜单系统. 继承层次结构 System.Object  System.MarshalByRefObject    System.ComponentModel.Comp ...

  8. HTML头部

    1.文档声明 html5的声明类型为  <!DOCTYPE html> 2.head部分 2.1 <title></title> 2.2 <base href ...

  9. Factorization Machine因子分解机

    隐因子分解机Factorization Machine[http://www. w2bc. com/article/113916] https://my.oschina.net/keyven/blog ...

  10. imageNamed和imageWithContentsOfFile区别

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