目前有个小项目，在首页头部导航栏里需要一个电子时钟的效果，于是我就采用如下代码实现了一个电子时钟的效果。不过不完美，第一种方式容易导致网页莫名其妙的异常，后来觉得可能是做的操作太多了，然后又编写了如2所示的代码。代码比较简单，思路也比较简单就不多介绍了，在此做个记录，以备以后的项目中也会使用的到。

1：存在导致网页异常的现象，猜测是做的操作太多了，不过这种方式只要网页加载，就能够保证时钟一直走下去

<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <title>Show Time Page</title>

    </head>

    <body>

        <a id="time"></a>

        <script type="text/javascript">

      function timeShow()

      {

         var years,months,dates,hours,minutes,seconds,weeks;

         var intYears,intMonths,intDates,intHours,intMinutes,intSeconds,intWeeks;

         var today;

         var timeString;

         today = new Date();//获得系统当前时间

         intYears = today.getFullYear();//获得年

         intMonths = today.getMonth() + 1;//获得月份+1

         intDates = today.getDate();//获得天数

         intHours = today.getHours();//获得小时

         intMinutes = today.getMinutes();//获得分钟

         intSeconds = today.getSeconds();//获得秒

         intWeeks = today.getDay();//获得星期

         years = intYears + '年     ';

         if(intMonths < 10){

             months = '0' + intMonths + '月';

         }else{

             months = intMonths + '月';

         }

         if(intDates < 10){

             dates = '0' + intDates + '日     ';

         }else{

             dates = intDates + '日     ';

         }

         var weekArray = new Array(7);

         weekArray[0] = '星期日';

         weekArray[1] = '星期一';

         weekArray[2] = '星期二';

         weekArray[3] = '星期三';

         weekArray[4] = '星期四';

         weekArray[5] = '星期五';

         weekArray[6] = '星期六';

         weeks =weekArray[intWeeks] + ' ';

         if(intHours == 0){

             hours = '00:';

         }else if(intHours < 10){

             hours = '0' + intHours + ':';

         }else{

             hours = intHours + ":";

         }

         if(intMinutes == 0){

             minutes = '00';

         }else if(intMinutes < 10){

             minutes = '0' + intMinutes ;

         }else{

             minutes = intMinutes;

         }

         timeString = years + months + dates + weeks + hours + minutes

         $("#time").text(timeString);

         window.setInterval('timeShow()',60000);

      }

         </script>

    </body>

</html>

2：改进版，经测试没有引起网页异常的现象

<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <title>Show Time Page</title>

    </head>

    <body>

        <a id="time"></a><a id="bjtime"></a>

        <script type="text/javascript">

            /*

              进入页面加载的方法

            */

            window.onload=function()

            {

                 var date=new Date(),time=date.getTime();

                 setInterval(function() {set(time);time = Number(time);time += 1000;},1000);

                 setTodayDate(date);

            }

          /*

           设置日期的方法，针对年月日星期的显示

          */

          function setTodayDate(today)

          {

              var years,months,dates,weeks, intYears,intMonths,intDates,intWeeks,today,timeString;

              intYears = today.getFullYear();//获得年

              intMonths = today.getMonth() + 1;//获得月份+1

              intDates = today.getDate();//获得天数

              intWeeks = today.getDay();//获得星期

              years = intYears + '年     ';

              if(intMonths < 10){

                  months = '0' + intMonths + '月';

              }else{

                  months = intMonths + '月';

              }

              if(intDates < 10){

                  dates = '0' + intDates + '日     ';

              }else{

                  dates = intDates + '日     ';

              }

              var weekArray = new Array(7);

              weekArray[0] = '星期日';

              weekArray[1] = '星期一';

              weekArray[2] = '星期二';

              weekArray[3] = '星期三';

              weekArray[4] = '星期四';

              weekArray[5] = '星期五';

              weekArray[6] = '星期六';

              weeks =weekArray[intWeeks] + ' ';

              timeString = years + months + dates + weeks;

              document.getElementById('time').innerHTML=timeString;

           }

         /*

           设置北京时间的方法，针对时分秒的显示

         */

         function set(time)

         {

             var beijingTimeZone = 8;

             var timeOffset = ((-1 * (new Date()).getTimezoneOffset()) - (beijingTimeZone * 60)) * 60000;

             var now = new Date(time - timeOffset);

             document.getElementById('bjtime').innerHTML = p(now.getHours())+':'+p(now.getMinutes())+':'+p(now.getSeconds());

         }

         /*

           格式化时间的显示方式

         */

         function p(s)

         {

            return s < 10 ? '0' + s : s;

         }

         </script>

    </body>

</html>

3：代码比较简单，直接可以使用，放到文本文件中修改文件格式即可，比如：.html，用浏览器打开便可直接查看代码的效果，如下图所示：

JS实现电子时钟的更多相关文章

  1. js傻瓜式制作电子时钟

    js傻瓜式制作电子时间 使用到的知识点 setInterval函数 构建函数new Date if判断 demo: //css样式请自行设置 <span id="timer" ...

  2. Js电子时钟

    简单版电子时钟,需要以下几个步骤 1. 封装一个函数 返回当前的时分秒 2. 使用定时器使当前以获取到的系统时间走动,每间隔一面调用 3. 把获取到的时间放到span盒子里,添加样式 效果展示  实现 ...

  3. dom事件操作例题，电子时钟，验证码，随机事件

    dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...

  4. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  5. JavaScript电子时钟+倒计时

    JavaScript时间类      获取时分秒:          getHours()          getMinutes();          getSeconds();       获取 ...

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

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

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

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

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

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

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

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

随机推荐

  1. windows mobile仿真器内存调整

    1.打开VS,进入工具,选项. 2.点击设备,在右侧选中要调整的模拟器,点属性. 3.点击仿真器选项. 4.勾选 指定RAM大小. 5.重启仿真管理器.

  2. C#属性访问器

    属性的访问器包含与获取或设置属性有关的可执行语句.访问器声明可以包含 get 访问器或 set 访问器,或者两者均包含.声明采用下列形式之一:get {}set {} get 访问器get 访问器体与 ...

  3. GR&R

    ANOVA gauge R&R (or ANOVA gauge repeatability and reproducibility) is a measurement systems anal ...

  4. JAVA使用HBASE常用方法

    package HBaseTest; /** * Created by root on 11/11/22. */ import java.io.IOException; import org.apac ...

  5. CE_现金的利息设定和计算（案例）

    2014-07-15 Created By BaoXinjian 一.摘要 存款利率指客户按照约定条件存入银行帐户的货币,一定时间内利息额同贷出金额即本金的利率.有活期利率和定期利率之分,有年/月/日 ...

  6. Codeforces Round #364 (Div. 2) Cards

    Cards 题意: 给你n个牌,n是偶数,要你把这些牌分给n/2个人,并且让每个人的牌加起来相等. 题解: 这题我做的时候,最先想到的是模拟,之后码了一会,发现有些麻烦,就想别的方法.之后发现只要把它 ...

  7. 实现读入一个彩色视频文件并以灰度格式输出这个视频文件,学习opencv例2-10

    #include "cv.h"#include "highgui.h"int main(int argc,char* argv[]){ //书本中的main没有 ...

  8. HTTP 1.1与HTTP 1.0的比较

    HTTP 1.1与HTTP 1.0的比较 一个WEB站点每天可能要接收到上百万的用户请求,为了提高系统的效率,HTTP 1.0规定浏览器与服务器只保持短暂的连接,浏览器的每次请求都需要与服务器建立一个 ...

  9. [Flex] PopUpButton系列 —— 添加按钮图标

    <?xml version="1.0" encoding="utf-8"?><!--为主按钮添加默认图标 PopUpButtonIcon.mx ...

  10. javascript delete方法

    学习delete可以参考下面两个博客,写的都很好,本文大部分参考与以下两个博客 http://www.cnblogs.com/windows7/archive/2010/03/28/1698387.h ...