目前有个小项目，在首页头部导航栏里需要一个电子时钟的效果，于是我就采用如下代码实现了一个电子时钟的效果。不过不完美，第一种方式容易导致网页莫名其妙的异常，后来觉得可能是做的操作太多了，然后又编写了如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. Linux常见设备及相应/dev/xxx文件名、Mount Point、挂载点、Mount命令、fstab、挂载分区

    Linux 中的设备有2种类型:字符设备(无缓冲且只能顺序存取).块设备(有缓冲且可以随机存取).这些设备中,有些设备是对实际存在的物理硬件的抽象,而有些设备则是内核自身提供的功能(不依赖于特定的物理 ...

  2. SqlServer——阻止保存要求重新创建表的更改

    场景: 修改已有数据的列宽时,提示“阻止保存要求重新创建表的更改”. 解决: 工具-〉选项-〉左侧有个 设计器-〉表设计器和数据库设计器 -> 阻止保存要求重新创建表的更改(右侧) 把钩去掉即可 ...

  3. 几个关于wcf、rest服务的好帖子

    //http://blog.csdn.net/fangxing80/article/details/6247297  //http://msdn.microsoft.com/zh-cn/magazin ...

  4. C#跟踪和调试程序-Debug类使用

    摘要: 怎样在 Visual C# .NET 中跟踪和调试?当程序运行时,您可以使用 Debug 类的方法来生成消息,以帮助您监视程序执行顺序.检测故障或提供性能度量信息.默认情况下,Debug 类产 ...

  5. spark transformation与action操作函数

    一.Transformation map(func) 返回一个新的分布式数据集,由每个原元素经过函数处理后的新元素组成 filter(func) 返回一个新的数据集,经过fun函数处理后返回值为tru ...

  6. 加密--win7下安装openssl

    http://www.cnblogs.com/ZhouL3777/archive/2012/10/21/2732890.html http://www.cnblogs.com/ZhouL3777/ar ...

  7. ylbtech-dbs:ylbtech-4,PurpleHouse(房地产楼盘销售系统)

    ylbtech-dbs:ylbtech-4,PurpleHouse(房地产楼盘销售系统) -- =============================================-- Crea ...

  8. 使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结

    1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...

  9. eclipse中安装tomcat插件

    一.软件下载 Eclipse3.6 IDE for Java EE Developers: 下载地址:http://eclipse.org/downloads/ Tomcat Eclipse Plug ...

  10. 播放wav聲音格式

    1. #import <AudioToolbox/AudioToolbox.h> 2.聲明 成員变量 SystemSoundID soundID; 3.播放 - (void)playSou ...