首页 > web前端 > js教程 > 基于javascript实现动态显示当前系统时间_javascript技巧

基于javascript实现动态显示当前系统时间_javascript技巧

WBOY
发布: 2016-05-16 15:17:19
原创
1914 人浏览过

本文实例讲解了javascript实现动态显示当前系统时间的详细代码,具体内容如下

  • (1)时间日期信息,应该在一个
    中来显示
  • (2)定时器:每隔一秒再次访问系统时间,window对象的setTimeout()
  • (3)时钟显示的时机(事件):当网页加载完成后才显示,事件onload
  • (4)如何将 时间日期信息 写入到指定的
    中,DOM对象中的innerHTML属性

    效果图:

    具体代码:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    
    
    //定义函数:构建要显示的时间日期字符串
    function showTime()
    {
     //创建Date对象
     var today = new Date();
     //分别取出年、月、日、时、分、秒
     var year = today.getFullYear();
     var month = today.getMonth()+1;
     var day = today.getDate();
     var hours = today.getHours();
     var minutes = today.getMinutes();
     var seconds = today.getSeconds();
     //如果是单个数,则前面补0
     month  = month<10  &#63; "0"+month : month;
     day  = day <10  &#63; "0"+day : day;
     hours  = hours<10  &#63; "0"+hours : hours;
     minutes = minutes<10 &#63; "0"+minutes : minutes;
     seconds = seconds<10 &#63; "0"+seconds : seconds;
     
     //构建要输出的字符串
     var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
     
     //获取id=result的对象
     var obj = document.getElementById("result");
     //将str的内容写入到id=result的<div>中去
     obj.innerHTML = str;
     //延时器
     window.setTimeout("showTime()",1000);
    }
    </script>
    <style type="text/css">
    #result{
     width:500px;
     border:1px solid #CCCCCC;
     background:#FFFFCC;
     margin:50px auto;
     font-size:24px;
     color:#FF0000;
     padding:20px;
    }
    </style>
    </head>
    
    <body onload="showTime()">
    <div id="result"></div>
    </body>
    </html>
    
    登录后复制

    希望本文所述对大家的javascript程序设计有所帮助。

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板