如何使用html单个页面完成一个简单计算并计算回答时间

Cheryl_Chanl

611人浏览 · 2025-06-17 00:26:34

Cheryl_Chanl · 2025-06-17 00:26:34 发布

首先我们需要了解html的文件格式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10以内加法练习</title>
    <style>
	    body {
	    }
     </style>
</head>
<body>
	<div class="container">
        /** div容器里面写页面的内容 **/
    </div>
    <script>
    /** 逻辑处理部分**/
    </script>

接下来看具体操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10以内加法练习</title>
    <style>
        body {
            font-family: '微软雅黑', sans-serif;`在这里插入代码片`
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f2f5;
            margin: 0;
            padding: 20px;
        }
 
        .container {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            width: 90%;
            max-width: 500px;
            text-align: center;
        }
 
        .question {
            font-size: 2rem;
            margin: 1rem 0;
            color: #333;
        }
 
        input {
            padding: 0.5rem;
            font-size: 1.2rem;
            width: 80px;
            margin: 0 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            transition: border-color 0.3s;
        }
 
        input:focus {
            outline: none;
            border-color: #4CAF50;
        }
 
        button {
            padding: 0.5rem 1.5rem;
            font-size: 1.2rem;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
 
        button:hover {
            background-color: #45a049;
        }
 
        .feedback {
            margin: 1rem 0;
            font-size: 1.2rem;
            min-height: 30px;
        }
 
        .time {
            color: #666;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>10以内加法练习</h1>
        <div class="question" id="question"></div>
        <div>
            <input type="number" id="answer" placeholder="答案">
            <button onclick="checkAnswer()">提交</button>
        </div>
        <div class="feedback" id="feedback"></div>
        <div class="time" id="timeDisplay">当前题用时：0.00秒</div>
    </div>
 
    <script>
        let num1, num2;
        let startTime;
        let currentTime = 0;
 
        // 生成新题目
        function generateQuestion() {
            // 生成两个1-9的随机数，且和≤10
            do {
                num1 = Math.floor(Math.random() * 9) + 1;
                num2 = Math.floor(Math.random() * 9) + 1;
            } while (num1 + num2 > 10);
 
            document.getElementById('question').textContent = `${num1} + ${num2} = ?`;
            document.getElementById('answer').value = '';
            startTime = Date.now(); // 记录开始时间
            updateTime(); // 开始计时
        }
 
        // 计时更新
        function updateTime() {
            currentTime = (Date.now() - startTime) / 1000;
            document.getElementById('timeDisplay').textContent = 
                `当前题用时：${currentTime.toFixed(2)}秒`;
            requestAnimationFrame(updateTime); // 持续更新时间
        }
 
        // 检查答案
        function checkAnswer() {
            const userAnswer = parseInt(document.getElementById('answer').value);
            const correctAnswer = num1 + num2;
            const feedbackEl = document.getElementById('feedback');
 
            if (isNaN(userAnswer)) {
                feedbackEl.textContent = '请输入有效的数字！';
                feedbackEl.style.color = '#ff4444';
                return;
            }
 
            if (userAnswer === correctAnswer) {
                feedbackEl.textContent = '回答正确！';
                feedbackEl.style.color = '#4CAF50';
                generateQuestion(); // 生成新题目
            } else {
                feedbackEl.textContent = `回答错误`;
                feedbackEl.style.color = '#ff4444';
            }
        }
 
        // 初始化，生成第一题
        generateQuestion();
 
        // 允许回车键提交
        document.getElementById('answer').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') checkAnswer();
        });
    </script>
</body>
</html>

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

冻库低温环境下的机器人搬运技术测评

DAMO开发者矩阵

console.log不可用解决

总的来说，这两个脚本共同构建了一个双层检测体系：第一个脚本用于识别"谁在访问"（即生成设备指纹），第二个脚本用于判断"是不是真人"（即检测机器人）。它们是Cloudflare机器人管理系统中不可或缺的一环。

DAMO开发者矩阵

ROS2 从零到一完整学习

ROS2 = Robot Operating System 2，机器人开发中间件，不是真正操作系统，运行在 Linux（主力 Ubuntu）上。作用：统一机器人硬件驱动、传感器通信、算法调度、仿真、上位机交互，支持机械臂、移动小车、人形机器人、自动驾驶。对比 ROS1：抛弃 Master 单点故障，采用 DDS 分布式通信，支持多机、实时性、嵌入式（Jetson / 单片机）。