使用JavaScript实现网站运行时间动态更新的效果记录

的卢马 技术深潜 23

问题的原因在于,你的 PHP 代码仅在页面加载时执行一次,然后生成静态的 HTML 输出。PHP 是一种服务器端语言,它在服务器上运行,将结果发送到客户端(浏览器)后,就不再运行了。因此,页面加载后,显示的“已运行时间”是固定的,不会动态更新。为了实现动态更新的效果,你需要使用 JavaScript,它可以在客户端(浏览器)上运行,并根据时间的变化实时更新页面内容。以下是改进后的代码示例:

<?php if (basename(__FILE__) == basename($_SERVER['SCRIPT_FILENAME'])) {     echo "防火防盗!需要购买模板可发邮件至service@51340.com!";     exit; } // 计算网站开始运行的时间(服务器端) $site_start_time = strtotime('2004-11-25 00:00:00'); // 设置网站创建时间 ?> <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>网站运行时间</title>     <style>         p {             color: #999;         }     </style> </head> <body>     <p id="runtime">本站已运行:加载中...</p>     <script>         // 定义网站开始运行的时间(与 PHP 保持一致)         const siteStartTime = <?php echo $site_start_time * 1000; ?>; // 转换为毫秒         function updateRuntime() {             const now = Date.now(); // 当前时间(毫秒)             const elapsedTime = now - siteStartTime; // 已运行时间(毫秒)             const days = Math.floor(elapsedTime / (1000 * 60 * 60 * 24));             const hours = Math.floor((elapsedTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));             const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));             const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);             // 更新页面内容             document.getElementById('runtime').innerText = `本站已运行:${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;         }         // 每秒更新一次         setInterval(updateRuntime, 1000);         // 页面加载时立即调用一次,避免等待 1 秒         updateRuntime();     </script> </body> </html>

代码说明

  1. PHP 部分:

    • 使用 PHP 计算网站的开始运行时间($site_start_time),并将其转换为 JavaScript 可用的时间戳(以毫秒为单位)。

  2. JavaScript 部分:

    • 定义 siteStartTime,存储 PHP 传递的网站开始运行时间。

    • 使用 setInterval 每秒调用一次 updateRuntime 函数,动态更新页面上的时间。

    • updateRuntime 函数计算当前时间与网站开始运行时间的差值,并将其转换为天、小时、分钟和秒,然后更新页面内容。

  3. 页面加载时立即更新:

    • 调用 updateRuntime() 确保页面加载时立即显示正确的时间,而不是等待 1 秒。

效果

  • 页面加载后,会显示网站已运行的时间,并且时间会每秒自动更新,无需刷新页面。

注意事项

  • 确保服务器时间和客户端时间一致(或接近),否则可能会显示不准确的时间。

  • 如果需要更精确的时间同步,可以考虑使用服务器端的时间 API 或其他同步机制。


标签: JS 网站 运行 时间 动态 更新 效果 记录

发布评论 0条评论)

  • Refresh code

还木有评论哦,快来抢沙发吧~