目前有个小项目，在首页头部导航栏里需要一个电子时钟的效果，于是我就采用如下代码实现了一个电子时钟的效果。不过不完美，第一种方式容易导致网页莫名其妙的异常，后来觉得可能是做的操作太多了，然后又编写了如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. Erlang库 -- 有意思的库汇总

    抄自这里 首先,库存在的目的大致可分为:1.提供便利2.尽可能解决一些痛点 首先,我们先明确一下Erlang编程语言的一些痛点(伪痛点):1,单进程问题Erlang虚拟机属于抢占式调度,抢占式调度有很 ...

  2. 黄聪：如何用Jquery或者插件解除网页禁用右键复制的限制（转）

    1.随便打开一个网址,放到收藏夹中. 2.复制下面的代码,替换原来网址的URL 选中复制以下代码 javascript:(function(){var doc=document;var bd=doc. ...

  3. C# ASP.NET 开发指引简要

    推荐学习交流社区:博客园http://www.cnblogs.com/ 里面有很多技术.职业圈子等信息的分享,新手必逛社区. 电子书等资源下载:csdn下载 http://download.csdn. ...

  4. 将List<Map>中的datas转换为json格式写入文件

    private static boolean writeToTextFileByJson(List<Map<String, Object>> datas, String tit ...

  5. Grid_Oracle Grid Infrastructure概念介绍（概念）

    2014-03-09 Created By BaoXinjian Thanks and Regards

  6. linux命令（9）设定固定ip

    一.使用命令设置ubuntu的ip地址 1.修改配置文件blacklist.conf禁用IPV6: sudo vi /etc/modprobe.d/blacklist.conf 2.在文档最后添加 b ...

  7. Git的撤消操作 - 重置, 签出 和 撤消（转载）

    From:http://gitbook.liuhui998.com/4_9.html http://ihower.tw/blog/archives/2622 相较于SVN这种commit就推送到远端伺 ...

  8. wireshark1.8捕获无线网卡的数据包——找不到无线网卡！

    问题说明:奇怪的是,我线网卡明明有的,是interl的型号,可是wireshark总是找不到,如下: 奇了怪了,没有!原来是如下的: 实际上这块无线网卡是存在的,只不过由于兼容或驱动的原因无法显示型号 ...

  9. .NET Session操作

    public class SessionHelper { /// <summary> /// 根据session名获取session对象 /// </summary> /// ...

  10. Font-Awesome for android

    Font-Awesome 是为Bootstrap设计的一个图标集合字体,里面包含了300多个常用图标.使用Font-Awesome还具有如下优点: 1. 减少了图标的绘制工作 2. 可以设置图标的颜色 ...