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

刚才在憧憬博客,看到有人问怎么实现上方的时间和星期,如图

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

我试着复习一下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-->

如图

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

 

最终效果图如下

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

 

本文链接:https://liuyanzhao.com/1676.html

转载请务必注明

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  2   博主  1

    • avatar 是是是

      很棒!

      • avatar 狂放

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

          • avatar 言曌  博主

            @狂放 是的,每次没错