js实现简单时钟并显示星期几

avatar 2017年02月11日12:02:34 4 3462 views
博主分享免费Java教学视频,B站账号:Java刘哥
刚才在憧憬博客,看到有人问怎么实现上方的时间和星期,如图 我试着复习一下js,于是生成下面一个demo.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面时钟</title>
  6.     <script type="text/javascript">
  7.         function check(val) {
  8.             if (val < 10) {
  9.                 return ("0" + val);
  10.             } else {
  11.                 return (val);
  12.             }
  13.         }
  14.         function ShowTime() {
  15.             var date = new Date();
  16.             var year = date.getFullYear();
  17.             var month = date.getMonth() + 1;
  18.             var day = date.getDate();
  19.             var hour = date.getHours();
  20.             var minutes = date.getMinutes();
  21.             var second = date.getSeconds();
  22.             var isnDay = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日");
  23.             var timestr = year + "年" + month + "月" + day + "日" + "<br/>" + isnDay[date.getDay()] + "<br/>" + check(hour) + ":" + check(minutes) + ":" + check(second);
  24.             document.getElementById("stime").innerHTML = timestr;
  25.             var timerID = setTimeout('ShowTime()', 1000);
  26.         }
  27.     </script>
  28. </head>
  29. <body onload="ShowTime();">
  30.     <span id="stime"></span>
  31. </body>
  32. </html>
效果图如下 这里写图片描述   大家可以自己加样式 对于begin主题加在哪里,我也找了一下: 在主题文件夹下template/menu.php里,可以找到顶部菜单位置,但是不是这个位置,应该继续顺藤摸瓜,最终在begin/inc/user-profile.php 的大概60多行的位置,即这段代码的下面
  1. <div class="user-login"><?php echo stripslashes( zm_get_option('wel_come') ); ?>
添加如下代码,即可
  1. <!--顶部显示日期--start-->
  2. <script type="text/javascript">
  3.     function check(val) {
  4.         if (val < 10) {
  5.             return ("0" + val);
  6.         } else {
  7.             return (val);
  8.         }
  9.     }
  10.     function TopCurrentTime() {
  11.         var date = new Date();
  12.         var year = date.getFullYear();
  13.         var month = date.getMonth() + 1;
  14.         var day = date.getDate();
  15.         var isnDay = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日");
  16.         var timestr = year + "年" + month + "月" + day + "日 " + isnDay[date.getDay()];
  17.         document.getElementById("TopCurrentTime").innerHTML = timestr;
  18.         var timerID = setTimeout('TopCurrentTime()', 1000);
  19.     }
  20. </script>
  21. <span id="TopCurrentTime"></span>
  22. <script>
  23.     TopCurrentTime();
  24. </script>
  25. <!--顶部显示日期--end-->
如图   最终效果图如下   本文链接:https://liuyanzhao.com/1676.html 转载请务必注明
  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
匿名评论,评论回复后会有邮件通知

  

已通过评论:2   待审核评论数:0
  1. avatar 是是是

    很棒!

  2. avatar 狂放

    我也在憧憬博客扒到了,还有插在那里显示的位置有问题,应该插在inc/user-profile.php里