Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Jquery/JS > 如何在页面上打印时钟?并设置每秒自动更新?
隐藏/显示侧边栏

如何在页面上打印时钟?并设置每秒自动更新?

2013-08-31 11:15    来源:http://www.cgner.com    责任编辑:admin    字号【

JavaScript如何在页面上打印时钟?通过JS怎么设置自动更新时间?
我想这道题很多前端面试都经常考到的!
下面是JS时钟自动更新的方法介绍

用到的方法很简单,会基础JS的然后查查JS手册就能搞定!
1.用到JS的内置Date()函数
2.还有就是SetInterval设置函数相隔一秒自动更新,后面有参数表示毫秒。(养成查手册的习惯,查多了,写多了,自然记得!)

 <head>
  <title> new document </title>
  <meta name="author" content="www.cgner.com" />
     <script type="text/javascript">
        clock = function(){
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth();
            var day = today.getDate();
            var hour = today.getHours();
            var minute = today.getMinutes();
            var sec = today.getSeconds();
            document.getElementById('clock').value='今天是:'+year+'年'+month+'月'+day+'日'+hour+':'+minute+':'+sec;
}
  </script>
<style type='text/css'>
    #clock{ border:0; width:100%; background:#ccc; padding:10px; font-size:20px;}
</style>
 </head>

 <body>
    <input type='text' id='clock' />
    <script type='text/javascript'>
        setInterval('clock()',1000);
    </script>
    
 </body>

其中的HTML部分,或者CSS部分,甚至是JS始终设定的格式等都可以根据自己想要的效果进行设定!

把获取到的时间写入到input文本框中能更好插入时间和更改时间,当然用其他的也可以。


更多
Tags 标签: JS打印时钟
责任编辑:admin
  • 上一篇:没有了
  • 下一篇:JQuery对象和DOM对象的区别及相互转换
  • 设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |