如何用JavaScript实现显示用户在线时长的计时器文本框？

嘿，我来帮你搞定这个在线时长统计的小功能～你的思路没问题，但代码里有几个语法和逻辑小坑，我一步步给你修正和解释：

• 语法错误：if sec<=60 不符合JS语法，条件判断必须用括号包裹，应该写成 if (sec <= 60)
• 定时器调用错误：你想实现每秒计时，得用setTimeout或者setInterval，原代码里的("showtime()",1000)完全不符合语法规范
• 元素获取不可靠：直接用box.value容易出现找不到元素的情况，最好给input加个ID来精准获取
• 代码结构问题：JS最好放在元素后面或者等页面加载完成再执行，避免DOM还没加载就调用相关逻辑

下面是可以正常运行的代码，我还给加了一些友好的细节：

<!DOCTYPE html>
<html>
<body>
  <!-- 给input加ID，方便JS精准获取 -->
  <input type="text" id="onlineTimeBox" size="30" placeholder="在线时长（秒）">

  <script>
    // 用let声明变量，比var的作用域更安全可控
    let seconds = 0;
    // 获取文本框元素
    const timeBox = document.getElementById('onlineTimeBox');
    // 存储定时器ID，方便后续需要停止计时时使用
    let timer;

    function updateOnlineTime() {
      // 更新文本框内容，显示更友好的提示文字
      timeBox.value = `已在线 ${seconds} 秒`;
      seconds += 1;
      // 每秒递归调用一次，实现持续计时
      timer = setTimeout(updateOnlineTime, 1000);
    }

    // 页面完全加载后开始计时
    window.onload = function() {
      updateOnlineTime();
    };

    // 可选：如果需要手动停止计时，调用这个函数就行
    // function stopCounting() {
    //   clearTimeout(timer);
    //   timeBox.value = `计时已停止，总在线时长：${seconds} 秒`;
    // }
  </script>
</body>
</html>

如果你想让计时到60秒就自动停止，可以修改updateOnlineTime函数：

function updateOnlineTime() {
  timeBox.value = `已在线 ${seconds} 秒`;
  if (seconds < 60) {
    seconds += 1;
    timer = setTimeout(updateOnlineTime, 1000);
  } else {
    timeBox.value = "已在线1分钟，计时自动停止";
  }
}

另外，用setInterval实现会更简洁，效果完全一致：

let seconds = 0;
const timeBox = document.getElementById('onlineTimeBox');
let timer = setInterval(() => {
  seconds += 1;
  timeBox.value = `已在线 ${seconds} 秒`;
  // 同样可以添加停止条件
  // if (seconds >= 60) {
  //   clearInterval(timer);
  //   timeBox.value = "已在线1分钟，计时停止";
  // }
}, 1000);

window.onload = function() {
  // 这里不用额外调用，setInterval会自动每秒执行一次
};

内容的提问来源于stack exchange，提问作者Yura Dolotov