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. PHP如何判断一个数组是一维数组或者是二维数组？用什么函数？

    如题:如何判断一个数组是一维数组或者是二维数组?用什么函数? 判断数量即可 <?php if (count($array) == count($array, 1)) { echo '是一维数组' ...

  2. PHP获取当前页面的URL

    /** * 获取当前页面完整URL地址 * * @author 52php.cnblogs.com */ function http_get_page_url() { global $_G; if ( ...

  3. Ubuntu 登录锐捷 网卡被禁用 网口灯不亮解决

    cd rjsupplicantchmod +x rjsupplicant.sh sudo ./rjsupplicant.sh -u username-p password -d 1 sudo serv ...

  4. 批量导出oracle中的对象

    背景 Oracle数据库中有table,view,procedure,function,package,type等对象,需要将这些对象导出到不同的文件中.常用的方法有3种:1. 通过开发工具直接导出. ...

  5. AlertDialog错误

    Unable to add window token null is not for an application AlertDialog.Builder localBuilder = new Ale ...

  6. 关于git的简单实用命令

    时代在进步啊,现在已经不是svn的时代了,好多人都在使用git.所以自己也稍微学习了下git的使用. 常见的通过git提交代码步骤: git status :查看文件状态 :该命令显示你工程内修改的所 ...

  7. laravel安装笔记

    一.安装composer 安装之前将\php\php.ini文件中的php_openssl.dll扩展库开启,否则composer在安装过程中会出现错误提示. (我在安装过程中发现apache目录下的 ...

  8. mysql触发器，答题记录表同步教学跟踪（用户列表）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABVQAAAOOCAIAAABgEw4AAAAgAElEQVR4nOy92VcT27r/zX+xLtflvt

  9. ASP.NET 保存txt文件

    public void ProcessRequest(HttpContext context) { context.Response.Clear(); context.Response.Buffer ...

  10. jquery获取不到append出来的新元素的解决办法

    jquery获取不到append出来的新元素的解决办法 $('body').on("click","property",function(){}) jq1.7+ ...