Emlog添加阅读文章时间计时代码

张凯 网络杂苑>Emlog CMS 2016-10-21 12:00 2326字 1020 0 字号: | |

本段Emlog添加访客阅读文章时运行的时间计时代码代码由张凯个人博客原创,转载请@张凯个人博客,谢谢!

    这段计时代码说白了就是js计时器:00:00:00,时间从秒开始,打开html页面后开始计时。先给大家看一下效果图:

时间计时.jpg
    该代码是HTML代码,大家可以在桌面新建一个TXT,粘贴上以下代码,保存后更改为HTML文件,查看一下效果。(仅是测试代码,如何安装到Emlog在下文)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta charset="utf-8" /> 
  <title></title> 
  <style>
        #mytime {
            text-align: center;
        }
    </style> 
  <script>
        function two_char(n) {
            return n >= 10 ? n : "0" + n;
        }
        function time_fun() {
            var sec=0;
            setInterval(function () {
                sec++;
                var date = new Date(0, 0)
                date.setSeconds(sec);
                var h = date.getHours(), m = date.getMinutes(), s = date.getSeconds();
                document.getElementById("mytime").innerText = two_char(h) + ":" + two_char(m) + ":" + two_char(s);
            }, 1000);
        }
    </script> 
 </head> 
 <body onload="time_fun()"> 
  张凯个人博客之计时代码运行范例:<h1 id="mytime">00:00:00</h1>  
 </body>
</html>

    现在教大家如何将上述代码转换并安装到Emlog:
    1.首先打开你主题的header.php,查找到<body>,替换为<body onload="time_fun()">,onload故名思语就是“页面加载完成后执行的动作”,一般就写在body里面。
    2.打开side.php,末尾插入以下JavaScript脚本:

<script>
        function two_char(n) {
            return n >= 10 ? n : "0" + n;
        }
        function time_fun() {
            var sec=0;
            setInterval(function () {
                sec++;
                var date = new Date(0, 0)
                date.setSeconds(sec);
                var h = date.getHours(), m = date.getMinutes(), s = date.getSeconds();
                document.getElementById("mytime").innerText = "	阅读计时:您阅读本文已花了" +two_char(h) + "小时" + two_char(m) + "分钟" + two_char(s)+ "秒;";
            }, 1000);
        }
    </script>
    3.在合适地方插入以下代码:
<div id="mytime">阅读计时:您阅读本文已花了00小时00分钟00秒;</div>

    ok,保存更新一下,在打开一篇文章察看效果吧!


2017-09-05 23:09:40

    注:一定要将调用代码和使用代码放在同一个页面里,否则使用失败浏览器会报错!

本文链接:http://www.aswait.com/emlog/2878.html 百度已收录
版权申明:文章如未标注转载均为本站原创,转载请注明出处"张凯博客"。

发表评论

电子邮件地址不会被公开。必填项已用*标注

Ɣ回顶部
00:00 / 00:00
顺序播放