为何引入const data = require('./data.json')会导致startStop函数失效？

问题根源 #

你添加的const data = require("./data.json");是Node.js专属模块加载API，浏览器环境完全不支持，执行该语句会立即抛出错误，导致后续所有JavaScript代码（包括控制秒表的startStop函数）终止执行。此外，dbwrite函数中使用的fs模块也是Node.js后端文件操作API，同样无法在浏览器中运行。

解决方案 #

根据你的需求，分两种场景给出可行方案：

场景1：仅需在浏览器本地存储用户数据 #

不需要服务器，用浏览器原生的localStorage实现数据读写，完全兼容前端环境，同时修复原代码中的bug：

修改后的完整script.js代码

// 初始化用户数据（从localStorage读取，不存在则设为空数组）
let users = JSON.parse(localStorage.getItem('users')) || [];

// 秒表核心变量
let seconds = 0;
let minutes = 0;
let hours = 0;
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;
let interval = null;
let status = "stopped";

// 秒表计时逻辑（修复原代码进位bug）
function stopWatch() {
    seconds++;
    // 用>=60判断进位，避免定时器延迟导致的漏进位
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    // 格式化显示数字
    displaySeconds = seconds < 10 ? `0${seconds}` : seconds;
    displayMinutes = minutes < 10 ? `0${minutes}` : minutes;
    displayHours = hours < 10 ? `0${hours}` : hours;
    // 更新页面显示
    document.getElementById("display").textContent = `${displayHours}:${displayMinutes}:${displaySeconds}`;
}

// 启停控制函数（修复原代码DOM引用错误）
function startStop() {
    const firstInput = document.getElementById('first');
    const lastInput = document.getElementById('last');
    const idInput = document.getElementById('id');

    if (status === "stopped") {
        // 启动前验证输入完整性
        if (!firstInput.value.trim() || !lastInput.value.trim() || !idInput.value.trim()) {
            alert('请填写完整的姓名和ID编号');
            return;
        }
        interval = window.setInterval(stopWatch, 1000);
        document.getElementById("startStop").textContent = "Stop";
        status = "started";
    } else {
        // 停止时清空输入框并重置秒表
        firstInput.value = "";
        lastInput.value = "";
        idInput.value = "";
        window.clearInterval(interval);
        document.getElementById("startStop").textContent = "Start";
        status = "stopped";
        reset();
    }
}

// 重置秒表函数
function reset() {
    window.clearInterval(interval);
    seconds = 0;
    minutes = 0;
    hours = 0;
    document.getElementById("display").textContent = "00:00:00";
    document.getElementById("startStop").textContent = "Start";
    status = "stopped";
}

// 浏览器兼容的数据写入函数
function dbwrite() {
    const firstInput = document.getElementById('first');
    const lastInput = document.getElementById('last');
    const idInput = document.getElementById('id');

    const user = {
        first: firstInput.value.trim(),
        last: lastInput.value.trim(),
        id: idInput.value.trim(),
        timestamp: new Date().toISOString() // 可选：添加记录时间戳
    };

    users.push(user);
    // 写入浏览器本地存储
    localStorage.setItem('users', JSON.stringify(users));
    console.log("数据已保存到本地");
}

关键修改说明

1. 移除所有Node.js专属API，改用localStorage实现数据持久化
2. 修复秒表计时进位逻辑（原代码seconds/60 === 1会因定时器延迟漏进位）
3. 修复startStop函数中直接引用未定义DOM变量的错误
4. 添加启动前的输入验证，符合你“需输入姓名、ID后方可启动”的需求

场景2：需要将数据存储到服务器 #

如果数据需要持久化到服务器，需搭建简单Node.js后端接口，前端通过fetch发送请求：

步骤1：搭建后端server.js

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 3000;

// 解析JSON请求体
app.use(express.json());
// 托管前端静态文件（将HTML/CSS/JS放入public文件夹）
app.use(express.static('public'));

// 获取用户数据接口
app.get('/api/users', (req, res) => {
    const dataPath = path.join(__dirname, 'data.json');
    fs.readFile(dataPath, 'utf8', (err, data) => {
        if (err) {
            return err.code === 'ENOENT' ? res.json([]) : res.status(500).json({error: '读取数据失败'});
        }
        res.json(JSON.parse(data));
    });
});

// 写入用户数据接口
app.post('/api/users', (req, res) => {
    const dataPath = path.join(__dirname, 'data.json');
    const user = req.body;
    fs.readFile(dataPath, 'utf8', (err, data) => {
        const users = err ? [] : JSON.parse(data);
        users.push(user);
        fs.writeFile(dataPath, JSON.stringify(users), (err) => {
            if (err) return res.status(500).json({error: '写入数据失败'});
            res.json({success: true, message: '数据已保存'});
        });
    });
});

app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

步骤2：修改前端数据读写逻辑

移除Node.js相关代码，替换为fetch调用后端接口：

// 从后端初始化用户数据
let users = [];
async function fetchUsers() {
    const response = await fetch('/api/users');
    users = await response.json();
}
fetchUsers();

// 保留原秒表的stopWatch、startStop、reset函数（已修复bug版本）

// 修改为调用后端接口的dbwrite函数
async function dbwrite() {
    const firstInput = document.getElementById('first');
    const lastInput = document.getElementById('last');
    const idInput = document.getElementById('id');

    const user = {
        first: firstInput.value.trim(),
        last: lastInput.value.trim(),
        id: idInput.value.trim(),
        timestamp: new Date().toISOString()
    };

    try {
        const response = await fetch('/api/users', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(user)
        });
        const result = await response.json();
        console.log(result.message);
        users.push(user);
    } catch (err) {
        console.error('保存数据失败:', err);
    }
}

核心注意事项 #

• 浏览器与Node.js环境完全独立，不可混用对方专属API
• 前端如需操作服务器文件/数据库，必须通过后端接口实现
• 原代码中直接引用first/last/id变量的写法属于错误，需通过document.getElementById获取DOM元素

内容的提问来源于stack exchange，提问作者Thatcher Pacholl