第一波检查顺利完成,现在终于能歇口气了。趁着有空,和大家分享两个实用的技术小妙招。想知道怎么在自己的博客上显示有多少人在线吗?还有,怎么让网页上的动态图片随机播放?学会这两个小技巧,你的网页设计也会更出彩、更有趣哦。
风平浪静
前天小雪,按理说正式入冬了吧。但那天的天气却出奇的好,太阳高高挂,空气中带着一丝暖意,说冷不冷,还暖呼呼的,让人几乎忘记了冬日的严寒。
从这个月的月初开始,真的很忙,忙的昏天黑地的。工作上的事情堆积如山,让人应接不暇。好在终于告一段落了,第一波坚持顺利完成。
接下来,我们准备迎接第二波检查,听彪哥(我们老大)说第二波检查会在12月份过来,也就是下个月的样子。索性该补的资料和需要检查的记录都已经完成了99%,所以我是不着急的。
在第一波检查未到来之前,就听说公司高管也要过来开会,顺道检查一番。因此,这段时间公司和厂部也是前所未有的整洁,大概也是为了公司高管们的突击检查做好预备工作吧。所以这段时间,大家都在忙碌中保持着警惕,确保一切井然有序。
第一波检查过后,似乎一切又恢复了些许平静。趁此机会,也可以好好缓两天。虽然我知道,说不定看似平静的风浪,后面是更大的暴风雨也说不准,但至少现在,一切都显得那么正常,也便是一切安好吧。
一段简单的代码,实现"在线人数"
之前看到别人的博客底部都有一个"在线人数"的功能,对于初来乍到的我来说,很实用、也很酷。我想着要是可以在我的博客中也弄一个,那就酷毙了。结果……
去Typecho官网和Joe主题相关的插件库找了好多有关的插件,大多都是没用(或者叫你付费的),像我这样一穷二白的人,让我付费(根本就不可能, 主要还是因为穷啊 )。接着我又去百度、Gitee、Github、CSDN找……总之,不是操作流程太复杂就是让你付费!
算了,还是自己慢慢捣鼓吧。皇天不负有心人,终于还是让我给弄出来了(虽然方法很简陋、很低端),但对于我来说,功能已经足够使用了。
效果展示
以最原始的方法,实现最简单的事!
具体操作
方法1
1.新建文件
在网站根目录(www、public_html、html、public、web、httpdocs、htdocs…)下创建一个 online.log 文件(用于记录、更新网站实时访问者的ip地址)
2.复制代码
复制下面代码到你的主题目录的footer.php文件中,路径:你的域名/usr/themes/Joe-master/public ,位置大概在网站运行天数的附近(看你自己放哪里)
<?php
$timeout = 60; // 超时时间(单位:秒)
$online_log = "online.log"; // 在线人数记录文件路径
$temp = array();
$entries = "";
$fp = fopen($online_log, "r");
if ($fp) {
while (!feof($fp)) {
$entry = fgets($fp);
$entry = trim($entry);
if (!empty($entry)) {
$entry = explode(",", $entry);
if (($entry[0] != getenv('REMOTE_ADDR')) && ($entry[1] > time())) {
array_push($temp, $entry[0] . "," . $entry[1]);
}
}
}
fclose($fp);
} else {
echo "无法打开在线人数记录文件";
exit;
}
array_push($temp, getenv('REMOTE_ADDR') . "," . (time() + $timeout));
$maplers = count($temp);
$entries = implode("\n", $temp);
$fp = fopen($online_log, "w");
if ($fp) {
flock($fp, LOCK_EX);
fputs($fp, $entries);
flock($fp, LOCK_UN);
fclose($fp);
} else {
echo "无法写入在线人数记录文件";
exit;
}
echo "在线人数:" . $maplers . "人";
?>
3.回到你的网站,刷新即可!
方法2
1.复制代码
复制下面的代码,粘贴到footer.php的顶部位置(路径:根目录/usr/themes/Joe-master/public/footer.php)
<?php
//首先你要有读写文件的权限,首次访问不显示,正常情况刷新即可
$online_log = "slzxrs.dat"; //保存人数的文件到根目录,
$timeout = 30;//30秒内没动作者,认为掉线
$entries = file($online_log);
$temp = array();
for ($i=0;$i<count($entries);$i++){
$entry = explode(",",trim($entries[$i]));
if(($entry[0] != getenv('REMOTE_ADDR')) && ($entry[1] > time())) {
array_push($temp,$entry[0].",".$entry[1]."\n"); //取出其他浏览者的信息,并去掉超时者,保存进$temp
}
}
array_push($temp,getenv('REMOTE_ADDR').",".(time() + ($timeout))."\n"); //更新浏览者的时间
$slzxrs = count($temp); //计算在线人数
$entries = implode("",$temp);
//写入文件
$fp = fopen($online_log,"w");
flock($fp,LOCK_EX); //flock() 不能在NFS以及其他的一些网络文件系统中正常工作
fputs($fp,$entries);
flock($fp,LOCK_UN);
fclose($fp);
$tj= "在线人数:".$slzxrs."人";
?>
2.把下面的代码放在你想放的位置(比如:网站底部)
<?php echo $tj ?>
方法3
1.在主题目录下的 functions.php 文件中添加以下代码
/* Joe核心文件 */
require_once("core/core.php");
//在线人数
function online_users() {
$filename='online.txt'; //数据文件
$cookiename='Nanlon_OnLineCount'; //Cookie名称
$onlinetime=30; //在线有效时间
$online=file($filename);
$nowtime=$_SERVER['REQUEST_TIME'];
$nowonline=array();
foreach($online as $line){
$row=explode('|',$line);
$sesstime=trim($row[1]);
if(($nowtime - $sesstime)<=$onlinetime){
$nowonline[$row[0]]=$sesstime;
}
}
if(isset($_COOKIE[$cookiename])){
$uid=$_COOKIE[$cookiename];
}else{
$vid=0;
do{
$vid++;
$uid='U'.$vid;
}while(array_key_exists($uid,$nowonline));
setcookie($cookiename,$uid);
}
$nowonline[$uid]=$nowtime;
$total_online=count($nowonline);
if($fp=@fopen($filename,'w')){
if(flock($fp,LOCK_EX)){
rewind($fp);
foreach($nowonline as $fuid=>$ftime){
$fline=$fuid.'|'.$ftime."\n";
@fputs($fp,$fline);
}
flock($fp,LOCK_UN);
fclose($fp);
}
}
echo "$total_online";
}
2.然后在 footer.php 文件中合适的位置处添加以下代码
<?php echo online_users() ?>
"随机图片"动态显示 | 教程
在网页设计中,动态图片能够增加页面的吸引力和互动性。本教程将向您介绍如何使用CSS、PHP或HTML以及文字来实现动态图片的随机显示效果。
通过这个教程,您将学会如何为您的网页添加动态图片,并使每次访问页面时都能看到不同的图片。
具体操作
1.准备图片
首先,您需要准备一系列的图片,这些图片将在页面上进行随机显示。可以使用您自己的图片库,或者从免费图片资源网站上下载一些图片。
2.创建HTML文档
在HTML文档中,您需要创建一个图像容器,用于显示随机的图片。可以使用以下HTML代码:
<div class="image-container">
<img src="heylie.png" id="heylie" alt="Random Image">
</div>
注意:上述代码中的 heylie.png
是一个占位图片,用于在页面加载时显示。当页面加载完成后,我们将通过CSS和PHP来动态地替换这个图片。
3.编写CSS样式
在CSS样式表中,您需要设置图像容器的样式,并通过设置背景图片来实现随机显示的效果。可以使用以下CSS代码:
.image-container {
width: 400px; /* 根据您的需要设置宽度 */
height: 300px; /* 根据您的需要设置高度 */
background-size: cover;
background-position: center;
}
4.编写PHP代码
在PHP文件中,您需要编写代码来实现随机选择并替换图像的功能。可以使用以下PHP代码:
<?php
$images = array(
'heylie01.png',
'heylie02.png',
'heylie03.png',
// 添加更多的图片路径
);
$randomImage = $images[array_rand($images)];
?>
<style>
.image-container {
background-image: url("<?php echo $randomImage; ?>");
}
</style>
上述代码中,我们使用PHP的array_rand()函数
从图片数组中随机选择一个图片,并将其作为背景图像应用于图像容器。
5.保存测试
将上述HTML代码与CSS和PHP代码合并到您的网页中,保存并运行该网页。您将会看到每次刷新页面时,图像容器中显示的图片都会随机变化。
小结
通过使用CSS、PHP和HTML代码,我们成功地实现了动态图片随机显示的效果。您可以根据自己的需求进行调整,添加更多的图片和样式。希望本教程能帮助您实现您网页设计中的动态图片随机显示效果,祝您成功!
Umami的也蛮不错的,API调用也非常灵活,界面也蛮好看的
确实 萝卜白菜各有所爱吧😂
这在线人数还挺好玩
之前看到就想整,今天无聊整了感觉怪怪的有点多余又去掉了(苦笑)
哈哈 看具体情况嘛
又来学习干货了,不错不错
欢迎
我现在的随机图api就是手写的php文件,因为服务器本身承载力差所以干脆放S3储存桶里所以这个api其实就是一个随机数生成拼接url,再加上一个鉴权,但是这样实际用起来虽然效果正常,但是不知道是因为线路问题还是因为301重定向,有时候整个网页都加载完了还要等图片加载就比较难受
给你的网站和S3储存桶加个靠谱点的CDN 再试试看
看得出来博主写这篇文章还是花了些心思的。之前也看过类似的文章,这篇再有说服力。
谢谢 欢迎常来🫱🏻🫲🏼
这么麻烦,那就不折腾了。
不麻烦😳
跟我四年前写的有一股异曲同工之妙😉,没错我四年前就写了这个功能,到现在还在使用,教程也还在
好东西不管过了多长时间 只要能用上 那就值得分享给大家
是的,所以我四年前写的这个功能目前仍然在用,也是跟你这个差不多,只不过我是用Session记录的🤪
所以这个的原理是每秒统计一下当前访问IP是吗,挺巧妙的。
准确的来说是单位时间内(自定义时间/秒) 统计当前停留在站点的实时ip数量
v6.51.la 上也有类似的在线人数统计,感觉也不错。
是挺不错 但使用外接代码时最好做好站点优化 不然很容易被源码投毒😂
51la黑料挺多的,最好别用
确实刷到过关于51la代码被投毒的文章 现在已经弃用了 还用自己的
自己动手的放心用,学习了。
是的 数据放在自家裤兜里 心里踏实
对呀 自己折腾还可以涨姿势,用人家的不收费就是有后门我经历过。突然一天后台登录上显示系统重要文件被破坏!请访问xxxxx下载最新文件覆盖本目录。吓人不!!
被人留了一手😂 哈哈 所以啊 把资源放到自己本地 才是最安全 最可靠的
热门你想要的功能,别人也在关注呀!博客这块还是比较干净的,那些商用程序真的很可怕。很多功能脚本都是完全加密的
是啊 博客这块自主权还是蛮高的 至于你说的那些商用程序嘛 不止商用程序哦 还有一些后改的源码程序 都有很大的可能被别人恶意植入毒代码 就比如我之前用的51La就…… 别人访问我的站点时 就会莫名其妙的就跳到… 所以 网站数据安全也很重要
就是就是