120.页面小闹钟

最新推荐文章于 2022-07-26 22:13:16 发布

weixin_34061555

最新推荐文章于 2022-07-26 22:13:16 发布

阅读量54

点赞数

原文链接：https://my.oschina.net/springMVCAndspring/blog/1820245

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.效果

2.代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>时间闹钟</title>
       <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
       <script>
           //自定义获取系统时间
           var getCurrentTime= function(){
               var span = document.getElementById("clock");
               var date= new Date();
               span.innerHTML= date.toLocaleString();
               }
           //定时加载
           $(function(){
               getCurrentTime();//页面加载完成调用一次
               window.setInterval(getCurrentTime,1000);//每隔一秒调用一次
           })
       </script>

   </head>
   <body>
       <span id="clock"></span>
   </body>
</html>

3. 完善增加了星期显示

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间闹钟</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
//自定义获取系统时间
var getCurrentTime= function(){
   var span = document.getElementById("clock");
                           var date= new Date();
                               var day = new Array("日", "一", "二", "三", "四", "五", "六");
                               var week = new Date().getDay();
                           span.innerHTML= date.toLocaleString()+",星期"+day[week];
}
//定时加载
$(function(){
getCurrentTime();//页面加载完成调用一次
window.setInterval(getCurrentTime,1000);//每隔一秒调用一次
})
</script>

</head>
<body>
<span id="clock"></span>
</body>
</html>