在线人数统计和动态图片教程

资源共享 · 2024-11-24 09:59

第一波检查顺利完成,现在终于能歇口气了。趁着有空,和大家分享两个实用的技术小妙招。想知道怎么在自己的博客上显示有多少人在线吗?还有,怎么让网页上的动态图片随机播放?学会这两个小技巧,你的网页设计也会更出彩、更有趣哦。

风平浪静

前天小雪,按理说正式入冬了吧。但那天的天气却出奇的好,太阳高高挂,空气中带着一丝暖意,说冷不冷,还暖呼呼的,让人几乎忘记了冬日的严寒。

从这个月的月初开始,真的很忙,忙的昏天黑地的。工作上的事情堆积如山,让人应接不暇。好在终于告一段落了,第一波坚持顺利完成。

接下来,我们准备迎接第二波检查,听彪哥(我们老大)说第二波检查会在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代码,我们成功地实现了动态图片随机显示的效果。您可以根据自己的需求进行调整,添加更多的图片和样式。希望本教程能帮助您实现您网页设计中的动态图片随机显示效果,祝您成功!

在线人数 随机图片 源码分享 随笔 事业

上一篇 : 周末时光:八音盒和烤鱼

下一篇 : 域名变更与馅饼的诱惑


  1. 凉心   访客
    2024-12-02 02:23 第80楼 中国移动iPhone · Safari

    Umami的也蛮不错的,API调用也非常灵活,界面也蛮好看的

    1. 刘郎   博主
      2024-12-02 08:40 第81楼 中国贵州省移动Linux · Google Chrome
      @凉心

      确实 萝卜白菜各有所爱吧😂

  2. klcdm   访客
    2024-11-30 03:03 第74楼 中国广东省湛江市移动Windows 10 · Google Chrome

    这在线人数还挺好玩

    1. klcdm   访客
      2024-11-30 03:27 第75楼 中国香港特别行政区Windows 10 · Google Chrome
      @klcdm

      之前看到就想整,今天无聊整了感觉怪怪的有点多余又去掉了(苦笑)

      1. 刘郎   博主
        2024-11-30 03:43 第76楼 中国北京市新国信通信有限公司Linux · Google Chrome
        @klcdm

        哈哈 看具体情况嘛

  3. Huo   Lv1
    2024-11-29 18:52 第71楼 中国河北省邢台市电信iPhone · Safari

    又来学习干货了,不错不错

    1. 刘郎   博主
      2024-11-29 22:55 第72楼 中国北京市新国信通信有限公司Linux · Google Chrome
      @Huo

      欢迎

  4. 沧海   访客
    2024-11-28 23:48 第69楼 中国四川省德阳市广汉市电信Windows 10 · Google Chrome

    我现在的随机图api就是手写的php文件,因为服务器本身承载力差所以干脆放S3储存桶里所以这个api其实就是一个随机数生成拼接url,再加上一个鉴权,但是这样实际用起来虽然效果正常,但是不知道是因为线路问题还是因为301重定向,有时候整个网页都加载完了还要等图片加载就比较难受

    1. 刘郎   博主
      2024-11-28 23:53 第70楼 中国贵州省黔南州联通Linux · Google Chrome
      @沧海

      给你的网站和S3储存桶加个靠谱点的CDN 再试试看

  5. 2024-11-27 15:12 第67楼 中国云南省昆明市电信Windows 10 · Google Chrome

    看得出来博主写这篇文章还是花了些心思的。之前也看过类似的文章,这篇再有说服力。

    1. 刘郎   博主
      2024-11-27 17:10 第68楼 中国贵州省移动Linux · Google Chrome
      @熊妈妈分享

      谢谢 欢迎常来🫱🏻‍🫲🏼

  6. 2024-11-27 13:03 第65楼 中国河南省漯河市联通Windows 10 · Google Chrome

    这么麻烦,那就不折腾了。

    1. 刘郎   博主
      2024-11-27 13:05 第66楼 中国贵州省移动Linux · Google Chrome
      @网友小宋

      不麻烦😳

  7. 卟言   访客
    2024-11-26 14:34 第62楼 中国广西桂林市电信Windows 10 · Google Chrome

    跟我四年前写的有一股异曲同工之妙😉,没错我四年前就写了这个功能,到现在还在使用,教程也还在

    1. 刘郎   博主
      2024-11-26 14:57 第63楼 中国贵州省移动Linux · Google Chrome
      @卟言

      好东西不管过了多长时间 只要能用上 那就值得分享给大家

      1. 卟言   访客
        2024-11-26 15:04 第64楼 中国广西桂林市电信Windows 10 · Google Chrome
        @刘郎

        是的,所以我四年前写的这个功能目前仍然在用,也是跟你这个差不多,只不过我是用Session记录的🤪

  8. 肖寒武   Lv1
    2024-11-26 11:57 第60楼 中国浙江省杭州市联通Windows 10 · Google Chrome

    所以这个的原理是每秒统计一下当前访问IP是吗,挺巧妙的。

    1. 刘郎   博主
      2024-11-26 12:00 第61楼 中国贵州省移动Linux · Google Chrome
      @肖寒武

      准确的来说是单位时间内(自定义时间/秒) 统计当前停留在站点的实时ip数量

  9. mcenahle   访客
    2024-11-26 11:26 第58楼 中国上海市电信Windows 10 · Google Chrome

    v6.51.la 上也有类似的在线人数统计,感觉也不错。

    1. 刘郎   博主
      2024-11-26 11:29 第59楼 中国贵州省移动Linux · Google Chrome
      @mcenahle

      是挺不错 但使用外接代码时最好做好站点优化 不然很容易被源码投毒😂

      1. 晚夜   Lv1
        2024-11-30 21:10 第78楼 中国江苏省扬州市电信Windows 10 · Google Chrome
        @刘郎

        51la黑料挺多的,最好别用

        1. 刘郎   博主
          2024-11-30 22:08 第79楼 中国贵州省移动Linux · Google Chrome
          @晚夜

          确实刷到过关于51la代码被投毒的文章 现在已经弃用了 还用自己的

  10. 2024-11-26 09:14 第51楼 中国江苏省苏州市电信Windows 10 · Google Chrome

    自己动手的放心用,学习了。

    1. 刘郎   博主
      2024-11-26 09:16 第52楼 中国贵州省移动Linux · Google Chrome
      @文案姐笔记

      是的 数据放在自家裤兜里 心里踏实

      1. 2024-11-26 09:21 第53楼 中国江苏省苏州市电信Windows 10 · Google Chrome
        @刘郎

        对呀 自己折腾还可以涨姿势,用人家的不收费就是有后门我经历过。突然一天后台登录上显示系统重要文件被破坏!请访问xxxxx下载最新文件覆盖本目录。吓人不!!

        1. 刘郎   博主
          2024-11-26 09:23 第54楼 中国贵州省移动Linux · Google Chrome
          @文案姐笔记

          被人留了一手😂 哈哈 所以啊 把资源放到自己本地 才是最安全 最可靠的

          1. 2024-11-26 09:26 第55楼 中国江苏省苏州市电信Windows 10 · Google Chrome
            @刘郎

            热门你想要的功能,别人也在关注呀!博客这块还是比较干净的,那些商用程序真的很可怕。很多功能脚本都是完全加密的

            1. 刘郎   博主
              2024-11-26 09:32 第56楼 中国贵州省移动Linux · Google Chrome
              @文案姐笔记

              是啊 博客这块自主权还是蛮高的 至于你说的那些商用程序嘛 不止商用程序哦 还有一些后改的源码程序 都有很大的可能被别人恶意植入毒代码 就比如我之前用的51La就…… 别人访问我的站点时 就会莫名其妙的就跳到… 所以 网站数据安全也很重要

              1. 2024-11-26 09:34 第57楼 中国江苏省苏州市电信Windows 10 · Google Chrome
                @刘郎

                就是就是

| 黔ICP备2024020400号 | 萌ICP备20246777号 | | 当前有 1 人在线 |
本站已加入BLOGS·CN
订阅
Sitemap
博友圈 星球穿梭
开往-友链接力