5个可直接运行的PHP实用特效代码实例

📅 2026-08-07 👍 0点赞 💬 0 条评论

1. 实时动态数字时钟（带日期和星期）

一个直接在浏览器端走动的时钟，适合放在网站顶部或后台面板。

<?php
// clock.php
$timezone = 'Asia/Shanghai';
date_default_timezone_set($timezone);
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PHP动态时钟</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#1a1a2e;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:'Segoe UI',sans-serif}
.clock-wrap{background:#16213e;padding:40px 50px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.5);text-align:center;color:#fff}
.date{font-size:18px;color:#a0aec0;margin-bottom:15px}
.time{font-size:64px;font-weight:700;letter-spacing:4px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.seconds{font-size:32px;color:#f093fb;vertical-align:super}
.ampm{font-size:24px;margin-left:10px;color:#4fd1c5}
</style>
</head>
<body>
<div class="clock-wrap">
    <div class="date" id="dateDisplay">加载中...</div>
    <div class="time">
        <span id="hours">00</span>:<span id="minutes">00</span>
        <span class="seconds" id="seconds">00</span>
        <span class="ampm" id="ampm">AM</span>
    </div>
</div>
<script>
function updateClock(){
    const now=new Date();
    const days=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    const year=now.getFullYear();
    const month=String(now.getMonth()+1).padStart(2,'0');
    const day=String(now.getDate()).padStart(2,'0');
    const weekDay=days[now.getDay()];
    document.getElementById('dateDisplay').innerText=`${year}年${month}月${day}日 ${weekDay}`;
    let h=now.getHours(), m=now.getMinutes(), s=now.getSeconds();
    const ampm=h>=12?'PM':'AM';
    h=h%12||12;
    document.getElementById('hours').innerText=String(h).padStart(2,'0');
    document.getElementById('minutes').innerText=String(m).padStart(2,'0');
    document.getElementById('seconds').innerText=String(s).padStart(2,'0');
    document.getElementById('ampm').innerText=ampm;
}
updateClock();
setInterval(updateClock,1000);
</script>
</body>
</html>

效果：深色渐变背景 + 炫彩字体，秒针跳动，自动更新日期和星期。

2. 访客 IP 归属地与设备信息展示卡片

访问页面时自动获取并显示来访者的IP、城市、运营商和浏览器信息。

<?php
// visitor.php
function getClientIP(){
    $ip='未知';
    foreach(['HTTP_X_FORWARDED_FOR','HTTP_CLIENT_IP','REMOTE_ADDR'] as $key){
        if(!empty($_SERVER[$key])){
            $ips=explode(',',$_SERVER[$key]);
            $ip=trim($ips[0]);
            break;
        }
    }
    return filter_var($ip,FILTER_VALIDATE_IP)?$ip:'未知';
}

$clientIP=getClientIP();

// 调用 ip-api.com 免费接口获取位置（无需API Key）
$geoData=null;
if($clientIP!=='未知' && $clientIP!=='127.0.0.1' && $clientIP!=='::1'){
    $apiUrl="http://ip-api.com/json/{$clientIP}?lang=zh-CN";
    $ch=curl_init();
    curl_setopt_array($ch,[
        CURLOPT_URL=>$apiUrl,
        CURLOPT_RETURNTRANSFER=>true,
        CURLOPT_TIMEOUT=>5,
        CURLOPT_SSL_VERIFYPEER=>false
    ]);
    $response=curl_exec($ch);
    curl_close($ch);
    $geoData=json_decode($response,true);
}

$ua=$_SERVER['HTTP_USER_AGENT']??'未知';
$isMobile=preg_match('/Mobile|Android|iPhone|iPad/i',$ua);
$browser='其他';
if(preg_match('/Edge/i',$ua)) $browser='Edge';
elseif(preg_match('/Chrome/i',$ua)) $browser='Chrome';
elseif(preg_match('/Firefox/i',$ua)) $browser='Firefox';
elseif(preg_match('/Safari/i',$ua)) $browser='Safari';

$os='其他';
if(preg_match('/Windows NT 10/i',$ua)) $os='Windows 10/11';
elseif(preg_match('/Windows NT 6/i',$ua)) $os='Windows 7/8';
elseif(preg_match('/Mac OS X/i',$ua)) $os='macOS';
elseif(preg_match('/Linux/i',$ua)) $os='Linux';
elseif(preg_match('/Android/i',$ua)) $os='Android';
elseif(preg_match('/iPhone|iPad/i',$ua)) $os='iOS';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>访客信息卡</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#f0f4ff;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:'Segoe UI',sans-serif}
.card{background:#fff;border-radius:16px;padding:35px 45px;box-shadow:0 20px 60px rgba(0,0,0,.08);max-width:480px;width:90%;transition:.3s}
.card:hover{transform:translateY(-5px);box-shadow:0 25px 70px rgba(0,0,0,.12)}
h2{color:#2d3748;margin-bottom:20px;font-size:22px;border-left:4px solid #667eea;padding-left:14px}
.item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #edf2f7;font-size:15px}
.item:last-child{border-bottom:none}
.label{color:#718096;font-weight:500}
.value{color:#2d3748;font-weight:600;word-break:break-all}
.badge{display:inline-block;background:#ebf4ff;color:#3182ce;padding:2px 10px;border-radius:12px;font-size:12px;margin-left:8px}
</style>
</head>
<body>
<div class="card">
    <h2>📡 访客信息</h2>
    <div class="item"><span class="label">🌐 IP地址</span><span class="value"><?=htmlspecialchars($clientIP)?></span></div>
    <?php if($geoData && $geoData['status']==='success'): ?>
    <div class="item"><span class="label">📍 地理位置</span><span class="value"><?=htmlspecialchars($geoData['city'])?> · <?=htmlspecialchars($geoData['regionName'])?></span></div>
    <div class="item"><span class="label">🏢 运营商</span><span class="value"><?=htmlspecialchars($geoData['isp']?:'未知')?></span></div>
    <?php endif; ?>
    <div class="item"><span class="label">💻 操作系统</span><span class="value"><?=htmlspecialchars($os)?></span></div>
    <div class="item"><span class="label">🌍 浏览器</span><span class="value"><?=htmlspecialchars($browser)?><span class="badge"><?=$isMobile?'移动端':'桌面端'?></span></span></div>
    <div class="item"><span class="label">🕒 访问时间</span><span class="value"><?=date('Y-m-d H:i:s')?></span></div>
</div>
</body>
</html>

效果：一张干净的信息卡片，展示访客的IP、城市、运营商、系统、浏览器以及精确到秒的访问时间。

3. 极简在线备忘录 / 便签板

纯文件存储，不需要数据库，增删改查全在一个页面完成。

<?php
// memo.php
session_start();
$file='memos.json';
$memos=file_exists($file) ? json_decode(file_get_contents($file),true) : [];

// 添加
if($_SERVER['REQUEST_METHOD']==='POST' && isset($_POST['content']) && trim($_POST['content'])!==''){
    $memos[]=[
        'id'=>uniqid(),
        'content'=>htmlspecialchars(trim($_POST['content'])),
        'time'=>date('Y-m-d H:i')
    ];
    file_put_contents($file,json_encode($memos,JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE));
    header('Location: '.$_SERVER['PHP_SELF']);
    exit;
}

// 删除
if(isset($_GET['del'])){
    $delId=$_GET['del'];
    $memos=array_filter($memos,fn($m)=>$m['id']!==$delId);
    file_put_contents($file,json_encode(array_values($memos),JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE));
    header('Location: '.$_SERVER['PHP_SELF']);
    exit;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>📝 我的备忘录</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#fef9ef;font-family:'Segoe UI',sans-serif;padding:40px 20px}
.container{max-width:650px;margin:0 auto}
h1{color:#2d3748;text-align:center;margin-bottom:30px;font-weight:300;font-size:28px}
.form-area{display:flex;gap:10px;margin-bottom:35px}
.form-area input[type="text"]{flex:1;padding:14px 18px;border:2px solid #e2e8f0;border-radius:12px;font-size:16px;outline:none;transition:.2s}
.form-area input[type="text"]:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.15)}
.form-area button{padding:14px 28px;background:#667eea;color:#fff;border:none;border-radius:12px;font-size:16px;cursor:pointer;transition:.2s;white-space:nowrap}
.form-area button:hover{background:#5a67d8;transform:scale(1.02)}
.memo-item{background:#fff;border-radius:12px;padding:16px 20px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:.2s}
.memo-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.memo-content{flex:1;font-size:15px;color:#2d3748;line-height:1.5}
.memo-time{color:#a0aec0;font-size:12px;margin-right:15px;white-space:nowrap}
.del-btn{background:transparent;border:none;color:#fc8181;font-size:20px;cursor:pointer;padding:0 5px;transition:.2s;line-height:1}
.del-btn:hover{color:#e53e3e;transform:scale(1.2)}
.empty{text-align:center;color:#a0aec0;padding:60px 0;font-size:16px}
</style>
</head>
<body>
<div class="container">
    <h1>📝 我的备忘录</h1>
    <form method="post" class="form-area">
        <input type="text" name="content" placeholder="写点什么..." required autocomplete="off" autofocus>
        <button type="submit">添加</button>
    </form>
    <?php if(count($memos)>0): ?>
        <?php foreach(array_reverse($memos) as $memo): ?>
        <div class="memo-item">
            <span class="memo-content"><?=$memo['content']?></span>
            <span class="memo-time"><?=$memo['time']?></span>
            <a href="?del=<?=urlencode($memo['id'])?>" class="del-btn" onclick="return confirm('确定删除这条备忘吗？')">✕</a>
        </div>
        <?php endforeach; ?>
    <?php else: ?>
        <div class="empty">还没有备忘录，在上面添加一条吧 ✨</div>
    <?php endif; ?>
</div>
</body>
</html>

效果：清新风格，输入即存，每条备忘带时间戳，点击叉号可删除，数据保存在 memos.json 文件中。

4. 多彩渐变背景生成器（带CSS代码预览）

每次刷新随机生成一组渐变色，并显示对应的CSS代码，方便复制使用。

<?php
// gradient.php
function randomColor(){
    return sprintf('#%06X',mt_rand(0,0xFFFFFF));
}
$color1=randomColor();
$color2=randomColor();
$angle=mt_rand(0,360);
$cssCode="background: linear-gradient({$angle}deg, {$color1}, {$color2});";
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>渐变背景生成器</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',sans-serif;min-height:100vh;display:flex;justify-content:center;align-items:center;
background: linear-gradient(<?=$angle?>deg, <?=$color1?>, <?=$color2?>);
transition:background .5s}
.card{background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-radius:20px;padding:40px;max-width:450px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.card h2{color:#2d3748;margin-bottom:20px;font-weight:400}
.color-row{display:flex;justify-content:center;gap:20px;margin-bottom:20px}
.color-box{width:60px;height:60px;border-radius:12px;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.code-box{background:#1a202c;color:#a0aec0;padding:16px 20px;border-radius:12px;font-family:'Courier New',monospace;font-size:14px;text-align:left;word-break:break-all;margin-bottom:20px;user-select:all}
.copy-btn{background:#667eea;color:#fff;border:none;padding:12px 36px;border-radius:12px;font-size:16px;cursor:pointer;transition:.2s}
.copy-btn:hover{background:#5a67d8;transform:scale(1.03)}
.refresh-link{display:inline-block;margin-top:15px;color:#667eea;text-decoration:none;font-size:14px}
.refresh-link:hover{text-decoration:underline}
</style>
</head>
<body>
<div class="card">
    <h2>🎨 渐变背景生成器</h2>
    <div class="color-row">
        <div class="color-box" style="background:<?=$color1?>"></div>
        <div class="color-box" style="background:<?=$color2?>"></div>
    </div>
    <div class="code-box" id="cssCode"><?=htmlspecialchars($cssCode)?></div>
    <button class="copy-btn" onclick="copyCode()">📋 复制 CSS</button>
    <br>
    <a href="" class="refresh-link">🔄 换一组颜色</a>
</div>
<script>
function copyCode(){
    const code=document.getElementById('cssCode').innerText;
    navigator.clipboard.writeText(code).then(()=>{
        alert('✅ CSS 代码已复制！');
    }).catch(()=>{
        // fallback
        const ta=document.createElement('textarea');
        ta.value=code;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        alert('✅ CSS 代码已复制！');
    });
}
</script>
</body>
</html>

效果：页面背景本身就是生成的渐变色，同时展示两个色块和完整CSS代码，一键复制，刷新即可换色。

5. 简易倒计时 / 距离目标日

设定一个未来日期，页面会实时计算并显示剩余的天、时、分、秒。

<?php
// countdown.php
$targetDate='2026-12-31 23:59:59'; // ← 在这里修改目标日期
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>⏳ 倒计时</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0f0c29;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:'Segoe UI',sans-serif;color:#fff}
.countdown-wrap{text-align:center;padding:40px}
.title{font-size:22px;font-weight:300;margin-bottom:40px;opacity:.8}
.timer{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}
.block{background:rgba(255,255,255,.05);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:25px 30px;min-width:120px;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.block .num{font-size:52px;font-weight:700;background:linear-gradient(135deg,#f093fb,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.block .label{font-size:14px;color:#a0aec0;margin-top:8px;letter-spacing:2px;text-transform:uppercase}
.target-info{margin-top:40px;font-size:14px;color:#718096}
</style>
</head>
<body>
<div class="countdown-wrap">
    <div class="title">⏳ 距离目标日还有</div>
    <div class="timer" id="timer">
        <div class="block"><div class="num" id="days">00</div><div class="label">天</div></div>
        <div class="block"><div class="num" id="hours">00</div><div class="label">时</div></div>
        <div class="block"><div class="num" id="minutes">00</div><div class="label">分</div></div>
        <div class="block"><div class="num" id="seconds">00</div><div class="label">秒</div></div>
    </div>
    <div class="target-info">目标：<?=htmlspecialchars($targetDate)?></div>
</div>
<script>
const target=new Date("<?=$targetDate?>").getTime();
function updateCountdown(){
    const now=Date.now();
    let diff=target-now;
    if(diff<=0){
        document.querySelector('.title').innerText='🎉 时间到了！';
        document.querySelectorAll('.num').forEach(el=>el.innerText='00');
        return;
    }
    const d=Math.floor(diff/86400000);
    const h=Math.floor((diff%86400000)/3600000);
    const m=Math.floor((diff%3600000)/60000);
    const s=Math.floor((diff%60000)/1000);
    document.getElementById('days').innerText=String(d).padStart(2,'0');
    document.getElementById('hours').innerText=String(h).padStart(2,'0');
    document.getElementById('minutes').innerText=String(m).padStart(2,'0');
    document.getElementById('seconds').innerText=String(s).padStart(2,'0');
}
updateCountdown();
setInterval(updateCountdown,1000);
</script>
</body>
</html>

效果：太空渐变背景 + 毛玻璃数字块，每秒跳动更新，到达目标日后自动显示“时间到了”。

部署说明

  1. 将以上任意一段代码保存为 .php 文件（例如 clock.php、visitor.php 等）。
  2. 上传到你的 PHP 服务器（Apache/Nginx/IIS，需 PHP 7.4+）。
  3. 直接在浏览器访问该文件即可运行。

所有代码均不依赖外部数据库或第三方服务（访客信息卡使用了 ip-api.com 免费接口查询位置），开箱即用。你可以根据自己的喜好修改样式、颜色或功能逻辑。

💬 评论列表 (0)

暂无评论，快来抢沙发吧！

发表评论

×
preview