<?php
    //首先你要有读写文件的权限，首次访问肯不显示，正常情况刷新即可
    $online_log = "slzxrs.dat"; //保存人数的文件到根目录,
    $timeout = 60;//60秒内没动作者,认为掉线
    $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);
    echo "在线人数:".$slzxrs."人";
?>

效果图：

HTML

<div class="list">
            <label><input type="checkbox">旅游</label>
            <label><input type="checkbox">娱乐</label>
            <label><input type="checkbox">学习</label>
            <label><input type="checkbox">打篮球</label>
        </div>

CSS

    .list {
                user-select: none;
                margin-top: 10px;
                text-align: center;
                height: 20px;
            }

            .list input {
                margin: 0 5px;
                /* 相对定位 */
                position: relative;
            }

            .list input::after {
                content: "";
                width: 18px;
                height: 18px;
                background-color: #8b8b8b;
                /* 绝对定位 */
                position: absolute;
                /* 圆 */
                border-radius: 50%;
                top: -3px;
                left: -3px;
            }

            .list input::before {
                position: absolute;
                content: "√";
                z-index: 2;
            }

            .list input:checked::after {
                background-color: red;
            }

            .list input:checked::before {
                color: #fff;
            }

CSS中DIV水平垂直居中方法

链接点击就自动跳转发送邮件

用于记录学习过程所遇到的问题！本站也会在学习中慢慢优化！