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

avatar 2017年02月11日12:02:34 4 4088 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
刚才在憧憬博客，看到有人问怎么实现上方的时间和星期，如图



我试着复习一下js，于是生成下面一个demo.html
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>页面时钟</title>
  7.     <script type="text/javascript">
  8.         function check(val) {
  9.             if (val < 10) {
  10.                 return ("0" + val);
  11.             } else {
  12.                 return (val);
  13.             }
  14.         }
  16.         function ShowTime() {
  17.             var date = new Date();
  18.             var year = date.getFullYear();
  19.             var month = date.getMonth() + 1;
  20.             var day = date.getDate();
  21.             var hour = date.getHours();
  22.             var minutes = date.getMinutes();
  23.             var second = date.getSeconds();
  24.             var isnDay = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日");
  26.             var timestr = year + "年" + month + "月" + day + "日" + "<br/>" + isnDay[date.getDay()] + "<br/>" + check(hour) + ":" + check(minutes) + ":" + check(second);
  27.             document.getElementById("stime").innerHTML = timestr;
  28.             var timerID = setTimeout('ShowTime()', 1000);
  29.         }
  30.     </script>
  31. </head>
  33. <body onload="ShowTime();">
  34.     <span id="stime"></span>
  35. </body>
  37. </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

转载请务必注明
历史上的今天
二月
11日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

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

  

已通过评论：2   待审核评论数：0
  1. avatar 是是是
    回复 2018年04月21日 17:12:20

    很棒！

  2. avatar 狂放
    回复 2017年06月30日 18:14:25

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