首页 > web前端 > js教程 > 正文

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

php中文网
发布: 2016-05-16 15:17:19
原创
2144人浏览过

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

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

    效果图:

    具体代码:

    千面视频动捕
    千面视频动捕

    千面视频动捕是一个AI视频动捕解决方案,专注于将视频中的人体关节二维信息转化为三维模型动作。

    千面视频动捕 173
    查看详情 千面视频动捕
    <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程序设计有所帮助。

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号