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

    In Release mode the number in front of the exception is NOT the line of code. Instead it's an offset ...

  2. SpringMVC参数类型转化错误调试方法

  3. SchemaExport的使用

    @Test public void testCreateDB(){ Configuration cfg = new Configuration().configure(); SchemaExport ...

  4. PLSQL_基础系列02_分组函数GROUP BY / ROLLUP / CUBE（案例）

    2014-11-30 Created By BaoXinjian

  5. linux下安装easy_install的方法

    python中的easy_install工具,类似于Php中的pear,或者Ruby中的gem,或者Perl中的cpan,那是相当的爽歪歪了如果想使用 如果想使用easy_install工具,可能需要 ...

  6. JAVA 单选按钮、复选按钮

    //单选按钮和复选按钮 import java.awt.*; import javax.swing.*; public class Jiemian6 extends JFrame{ JPanel mb ...

  7. Win7家庭版开启Administrator管理员帐户的方法

    Win7家庭版开启Administrator管理员帐户的方法 发布时间:2014-11-17 18:30:06来源:系统盒浏览数:2786 很多用户安装好Win7系统第一步就是开启Administra ...

  8. 深入ThreadLocal之三（ThreadLocal可能引起的内存泄露）

    threadlocal里面使用了一个存在弱引用的map,当释放掉threadlocal的强引用以后,map里面的value却没有被回收.而这块value永远不会被访问到了. 所以存在着内存泄露. 最好 ...

  9. js实现的新闻列表垂直滚动实现详解

    js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...

  10. cshell学习

    一. 文件的读写执行: 1)读:可以显示该文件的内容 2)写:可以编辑或者删除它 3)执行:如果该文件是一个shell脚本或者程序. 如果希望一次设置目录下所有文件的权限,可使用:chmod 644 ...