WordPress博客网站添加文章统计阅读时间且适用Emlog

南山大王 4,674 0

[灯笼]七夕节倒计时[灯笼]

2019年七夕节时间:2019年8月7日 星期三 农历七月初七#(玫瑰)

#(太阳)距离2019年七夕节还有[aru_89]

WordPress博客网站添加文章统计阅读时间且适用Emlog

一、前序

今天在浏览网站的时候,突然看到的这个

就简单整理了下  发出来了,简单一段代码,给访客查看文章时自动开始统计阅读文章多少分多少秒

还是很有意思的一个小功能

话不多说直接上图:

WordPress博客网站添加文章统计阅读时间且适用Emlog

注:此为精简版,本人还是比较喜欢的!

二、使用教程

精简版代码:

<p style="text-align: center;"><img src="https://www.ly522.com/wp-images/tishi.gif" alt="WordPress博客网站添加文章统计阅读时间且适用Emlog" alt="WordPress博客网站添加文章统计阅读时间且适用Emlog"</span> &nbsp;<span>您阅读这篇文章共花了:</span>
<span id="stime"></span>
<script language="JavaScript">var ss=0,mm=0,hh=0;function TimeGo(){ss++;if(ss>=60){mm+=1;ss=0}if(mm>=60){hh+=1;mm=0}ss_str=(ss<10?"0"+ss:ss);mm_str=(mm<10?"0"+mm:mm);
tMsg=""+hh+"小时"+mm_str+"分"+ss_str+"秒";document.getElementById("stime").innerHTML=tMsg;setTimeout("TimeGo()",1000)}TimeGo();</script></p>

完整版/如图

WordPress博客网站添加文章统计阅读时间且适用Emlog

完整版代码:

<div id="tingliu"><span class="tingliu2 hint--top hint--bounce" data-hint="希望这篇文章能给你带来收获,去发表评论吧!?">
<a href="##"><img src="https://www.ly522.com/wp-images/tishi.gif" alt="WordPress博客网站添加文章统计阅读时间且适用Emlog" class="tingliu5"></a>
</span> &nbsp;<span class="tingliu2">您阅读这篇文章共花了:</span>&nbsp;<span class="tingliu3" id="stime"></span></div>
<script language="JavaScript">var ss=0,mm=0,hh=0;function TimeGo(){ss++;if(ss>=60){mm+=1;ss=0}if(mm>=60){hh+=1;mm=0}ss_str=(ss<10?"0"+ss:ss);mm_str=(mm<10?"0"+mm:mm);tMsg=""+hh+"小时"+mm_str+"分"+ss_str+"秒";document.getElementById("stime").innerHTML=tMsg;setTimeout("TimeGo()",1000)}TimeGo();</script>

二者选择其一将代码加入到WordPress主题目录中的“文章页:single.php”文件合适的位置。

Emlog应该是主题目录下的:echo_log.php文件合适位置(图片需要下载出来,小编用了防盗链)

三、小编代码放置的位置可以供大家参考一下(WordPress):

WordPress博客网站添加文章统计阅读时间且适用Emlog

素材下载

点击下载

好了教程就到这,不懂的可以在下方留言哦,来了就在下方点个赞吧![害羞]

红包

发表评论 取消回复
表情 图片 链接 代码

分享
微信
微博
QQ