如何使用JS和PHP获取服务器时间并隐藏clock.php的echo输出

云原生阿岚

2026-10-3

解决方案

你看到的clock.php的echo输出，本质是index.php中多余的<?php include("reloj.php"); ?>代码导致的：你把输出时间的PHP文件直接引入到了页面模板中，引入时PHP的echo会直接把内容打印到HTML源码里，自然就会显示在页面上。你本身是通过fetch异步拉取时间的，这行引入代码完全没有作用。

方案1：最小改动（不修改现有逻辑，仅清除多余输出）

直接删除index.php里的<?php include("reloj.php"); ?>这行代码即可。
删除后reloj.php的echo只会作为fetch请求的返回值传给JS，不会输出到页面上。
如果要隐藏id为serverDate的输入框，直接把input标签改为规范的隐藏域即可，不需要设置opacity属性：

<input type="hidden" id="serverDate">

方案2：优化版（去除冗余节点，修复异步逻辑bug）

你完全不需要额外的input节点存储时间，可以直接把fetch拿到的结果存到JS变量里，同时修复现有代码中异步逻辑的取值滞后问题：

优化后的reloj.php（注意统一文件名，不要和Clock.php混用）

<?php
// 建议用大写H输出24小时制时间，避免JS解析时上下午识别错误
echo date('Y-m-d H:i:s');
?>

优化后的index.php代码

<script>
let serverTime = '';

function muestraReloj () {
    fetch("reloj.php")
    .then(response => response.text())
    .then(data => {
        serverTime = data;
        console.log(serverTime);
        const fechaYHora = new Date(serverTime).toLocaleTimeString();
        console.log(fechaYHora);
        // 后续其他操作都可以在这里直接调用serverTime变量
    }); 
}
setInterval(muestraReloj, 1000);
</script>