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

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  2. java运用Comparator为对象排序

    要排序的类需要实现Comparator接口,重写compare方法: user类及实现接口的内部类: package test; import java.util.Comparator; public ...

  3. JAVA 综合布局应用

    //布局综合应用 import java.awt.*; import javax.swing.*; public class Jiemian4 extends JFrame{ JPanel mb1,m ...

  4. ubuntu更换源后报错：W: GPG error: （转载）

    From:http://www.njava.com/njava-626.html 更换163源后,更新源时出现错误. # apt-get update W: GPG error: http://ext ...

  5. htmlparser日记

    myParser = Parser.createParser(response, "utf-8");NodeFilter tableFilter = new NodeClassFi ...

  6. 服务器网页GZIP压缩怎么配置

    服务器网页GZIP压缩怎么配置     服务器网页GZIP压缩怎么配置,GZIP压缩对网页压缩来说最好不过了,下面是IIS下Gzip配置详细操作步骤:     简单来说,IIS6集成了Gzip,只不过 ...

  7. mysql 用户权限设置【转】

    在Linux下phpStudy集成开发环境中,要先进入mysql下bin目录,执行mysql ./mysql -u root -p 1.创建新用户 通过root用户登录之后创建 >> gr ...

  8. C++学习43 输入输出有关的类和对象

    输入和输出是数据传送的过程,数据如流水一样从一处流向另一处.C++形象地将此过程称为流(Stream).C++的输入输出流是指由若干字节组成的宇节序列,这些宇节中的数据按顺序从一个对象传送到另一对象. ...

  9. redis在windows上的安装

    1.下载地址:https://github.com/MSOpenTech/redis 主要支持win64的,有个msi文件可以直接安装,安装后redis会变成一个服务,对于windows来说这种最方便 ...

  10. SQL游标 更新

    --定义游标 DECLARE cur_getaddress CURSOR FOR SELECT new_a ,new_b ,new_c ,new_d FROM table WHERE (new_a i ...