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方法体内。

  • 相关阅读:
    storm学习之入门篇(一)
    大数据基础知识:分布式计算、服务器集群[zz]
    weblogic 12c 配置jvm的内存大小
    JamCam创业故事:辞掉工作,去开发一个应用
    数据挖掘-关联规则分析[ZZ]
    十道海量数据处理面试题与十个方法大总结(转载)
    设计模式简单说明
    jQuery 设置select,radio的值,无法自动触发绑定的change事件
    切换node版本,node-sass安装报错
    jQuery之编写插件
  • 原文地址:https://www.cnblogs.com/zkn11199/p/5587605.html
Copyright © 2011-2022 走看看