zoukankan      html  css  js  c++  java
  • 实时显示系统时间

    1.概述

         在浏览很多网站时,都会发现在网站中加入了显示当前系统时间的功能,在网页中显示当前系统时间,不仅可以方便浏览者掌握当前时间,而且还美化了网页。

    2.技术要点

         利用Date对象来实现。首先创建一个表示当前系统时间的Date()对象,然后通过Date对象的getXxx()方法获得当前系统时间的年、月、日、小时、分、秒和星期的值,接下来将获得的这些值组合成一个日期时间字符串,并将日期时间字符串设置成为<div>标签的内容,最后通过window对象的setTimeout()函数每隔1秒调用一个实时显示系统时间的函数。

    3.具体实现

    (1)新建index.jsp页,编写实时显示系统时间的JavaScript函数,关键代码如下:

          /**
          *实时显示系统时间
    */
    function getLangDate(){
                var dateObj = new Date();             //表示当前系统时间的Date对象 
                var year = dateObj.getFullYear();           //当前系统时间的完整年份值
                var month = dateObj.getMonth()+1;       //当前系统时间的月份值 
                var date = dateObj.getDate();         //当前系统时间的月份中的日
                var day = dateObj.getDay();    //当前系统时间中的星期值
                var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
                var week = weeks[day];         //根据星期值,从数组中获取对应的星期字符串 
                var hour = dateObj.getHours();              //当前系统时间的小时值 
                var minute = dateObj.getMinutes(); //当前系统时间的分钟值
                var second = dateObj.getSeconds();       //当前系统时间的秒钟值
                //如果月、日、小时、分、秒的值小于10,在前面补0
                if(month<10){
                      month = "0"+month;
                }
                if(date<10){
                      date = "0"+date;
                }
                if(hour<10){
                      hour = "0"+hour;
                }
                if(minute<10){
                      minute = "0"+minute;
                }
                if(second<10){
                      second = "0"+second;
                }
                var newDate = year+"年"+month+"月"+date+"日  "+week+" "+hour+":"+minute+":"+second;
                document.getElementById("dateStr").innerHTML = "系统公告:[ "+newDate+" ]";
                setTimeout("getLangDate()",1000);//每隔1秒重新调用一次该函数 
    }    

    (2)在页面<body>标签中通过onload事件加载步骤(1)中编写的JavaScript函数,并在页面的适当位置加入<div>标签,id为“dateStr“,关键代码如下:

    <body onLoad="getLangDate()">
                <div id="dateStr" class="word_grey"></div>
    </body>

    在实现实时显示系统时间时,还可以使用window对象的setIntervar()方法,setInterval()方法类似于setTimeout()方法。不同之处是调用window对象的setIntervar()方法后,会一直执行setIntervar()方法所调用的JavaScript方法,而setTimeout()方法只能被执行一次。如果要通过setTimeout()方法一直执行某个JavaScript方法,setTimeout()必须写在被调用的JavaScript方法体内。

  • 相关阅读:
    hdu 4614 线段树 二分
    cf 1066d 思维 二分
    lca 最大生成树 逆向思维 2018 徐州赛区网络预赛j
    rmq学习
    hdu 5692 dfs序 线段树
    dfs序介绍
    poj 3321 dfs序 树状数组 前向星
    cf 1060d 思维贪心
    【PAT甲级】1126 Eulerian Path (25分)
    【PAT甲级】1125 Chain the Ropes (25分)
  • 原文地址:https://www.cnblogs.com/zkn11199/p/5587605.html
Copyright © 2011-2022 走看看