当前位置： 首页 > article >正文

用JavaScript和python实现简单四则运算出题机

article 2025/1/9 16:24:29

用JavaScript和python实现简单四则运算出题机

实现自动出题（加减乘除）四则运算的并能判断用户输入答案对错，确保减法结果不出现负值，并且除法能够整除。

用户可以点击下一题按钮生成新的题目。每次点击下一题按钮时，会生成新的题目。

预备知识

JavaScript 中用于生成一个 1 到 10 之间的随机整数 的表达式

Math.floor(Math.random() * 10) + 1 的作用是生成一个 1 到 10 之间的随机整数，包括 1 和 10。

解析：

Math.random() 是 JavaScript 中的一个内置函数，用于生成一个 0 到 1 之间的随机小数（包括 0，但不包括 1）。

例如，Math.random() 可能返回 0.123, 0.567, 0.999 等。

Math.random() * 10

将 Math.random() 的结果乘以 10，可以将随机数的范围从 [0, 1) 扩展到 [0, 10)。

例如：

如果 Math.random() 返回 0.123，那么 Math.random() * 10 的结果是 1.23。

如果 Math.random() 返回 0.567，那么 Math.random() * 10 的结果是 5.67。

如果 Math.random() 返回 0.999，那么 Math.random() * 10 的结果是 9.99。

Math.floor() 是 JavaScript 中的一个内置函数，用于将一个数字 向下取整，即返回小于或等于该数字的最大整数。

例如：

Math.floor(1.23) 返回 1。

Math.floor(5.67) 返回 5。

Math.floor(9.99) 返回 9。

Math.floor(Math.random() * 10) 的结果加 1，可以将随机数的范围从 [0, 9] 调整为 [1, 10]。

例如：

如果 Math.floor(Math.random() * 10) 返回 0，那么加 1 后结果是 1。

如果 Math.floor(Math.random() * 10) 返回 5，那么加 1 后结果是 6。

如果 Math.floor(Math.random() * 10) 返回 9，那么加 1 后结果是 10。

Python 中生成一个 1 到 10 之间的随机整数 的表达式

在 Python 中，可以使用 random 模块实现类似的功能：

import random

random_number = random.randint(1, 10)  # 生成 1 到 10 之间的随机整数

解析：

random 是 Python 标准库中的一个模块，提供了生成随机数的函数。

random.randint() 的特点

包含边界值：random.randint(a, b) 生成的随机整数包括 a 和 b。

例如，random.randint(1, 10) 可能返回 1 或 10。

用HTML+ JavaScript实现

界面如下：

源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四则运算自动出题</title>
    <script>
        //generateQuestion() 函数用于生成一个数学问题
        function generateQuestion() {
            let num1 = Math.floor(Math.random() * 10) + 1;
            let num2 = Math.floor(Math.random() * 10) + 1;
            let operator = Math.floor(Math.random() * 4); // 0: +, 1: -, 2: *, 3: /
            let question;
            let answer;

            switch (operator) {
                case 0:
                    question = num1 + " + " + num2;
                    answer = num1 + num2;
                    break;
                case 1:
                    // 确保减法结果不为负数
                    if (num1 < num2) {
                        [num1, num2] = [num2, num1]; // 交换 num1 和 num2
                    }
                    question = num1 + " - " + num2;
                    answer = num1 - num2;
                    break;
                case 2:
                    question = num1 + " * " + num2;
                    answer = num1 * num2;
                    break;
                case 3:
                    // 确保除法能够整除
                    while (num1 % num2 !== 0) {
                        num1 = Math.floor(Math.random() * 10) + 1;
                        num2 = Math.floor(Math.random() * 10) + 1;
                    }
                    question = num1 + " / " + num2;
                    answer = num1 / num2; // 整除结果
                    break;
            }

            document.getElementById("question").innerHTML = question;
            document.getElementById("answer").value = "";  // 清空用户回答
            document.getElementById("result").innerHTML = ""; // 清空结果提示
            document.getElementById("correctAnswer").value = answer; // 正确答案存储在隐藏的输入框中
        }
        
        // checkAnswer() 函数用于检查用户输入的答案是否正确。
        function checkAnswer() {
            let userAnswer = parseFloat(document.getElementById("answer").value);
            let correctAnswer = parseFloat(document.getElementById("correctAnswer").value);
            let result;

            if (userAnswer === correctAnswer) {
                result = "回答正确！";
            } else {
                result = "回答错误！正确答案是 " + correctAnswer;
            }

            document.getElementById("result").innerHTML = result;
        }
    </script>
</head>
<body>
    <h1>简单四则运算题目</h1>
    <p id="question"></p>
    <input type="number" id="answer" placeholder="请输入答案">
    <button onclick="checkAnswer()">提交</button>
    <button onclick="generateQuestion()">下一题</button>
    <p id="result"></p>
    <input type="hidden" id="correctAnswer">
    <script>
        generateQuestion(); // 初始化第一题
    </script>
</body>
</html>

用Python + tkinter实现

界面如下

源码如下：

import tkinter as tk
from tkinter import messagebox
import random

def generate_question():
    # 生成两个随机数
    num1 = random.randint(1, 10)
    num2 = random.randint(1, 10)
    
    # 随机选择一个运算符
    operator = random.choice(["+", "-", "*", "/"])
    
    # 根据运算符生成问题和答案
    if operator == "+":
        question = f"{num1} + {num2}"
        answer = num1 + num2
    elif operator == "-":
        # 确保减法结果不为负数
        if num1 < num2:
            num1, num2 = num2, num1  # 交换 num1 和 num2
        question = f"{num1} - {num2}"
        answer = num1 - num2
    elif operator == "*":
        question = f"{num1} * {num2}"
        answer = num1 * num2
    elif operator == "/":
        # 确保除法能够整除
        while num1 % num2 != 0:
            num1 = random.randint(1, 10)
            num2 = random.randint(1, 10)
        question = f"{num1} / {num2}"
        answer = num1 // num2  # 整除结果
    
    # 更新界面显示
    question_label.config(text=question)
    answer_entry.delete(0, tk.END)  # 清空答案输入框
    result_label.config(text="")  # 清空结果提示
    global correct_answer
    correct_answer = answer  # 存储正确答案

def check_answer():
    try:
        # 获取用户输入的答案
        user_answer = float(answer_entry.get())
        
        # 检查答案是否正确
        if user_answer == correct_answer:
            result_label.config(text="回答正确！", fg="green")
        else:
            result_label.config(text=f"回答错误！正确答案是 {correct_answer}", fg="red")
    except ValueError:
        messagebox.showerror("错误", "请输入有效的数字")

# 创建主窗口
root = tk.Tk()
root.title("简单四则运算自动出题")
root.geometry("400x300")

# 创建标题
title_label = tk.Label(root, text="四则运算题目", font=("Arial", 16))
title_label.pack(pady=10)

# 创建问题显示区域
question_label = tk.Label(root, text="", font=("Arial", 14))
question_label.pack(pady=10)

# 创建答案输入框
answer_entry = tk.Entry(root, font=("Arial", 14), width=20)
answer_entry.pack(pady=10)

# 创建提交按钮
submit_button = tk.Button(root, text="提交", font=("Arial", 14), command=check_answer)
submit_button.pack(pady=5)

# 创建下一题按钮
next_button = tk.Button(root, text="下一题", font=("Arial", 14), command=generate_question)
next_button.pack(pady=5)

# 创建结果提示区域
result_label = tk.Label(root, text="", font=("Arial", 14))
result_label.pack(pady=10)

# 初始化第一题
generate_question()

# 运行主循环
root.mainloop()


http://www.kler.cn/a/473176.html

相关文章：

  • 1.2.1-2部分数据结构的说明02_链表
  • Profinet转EtherNet/IP网关连接AB PLC的应用案例
  • 洛谷P1617————数字转英文
  • MCU 和 PSK
  • （一）使用 WebGL 绘制一个简单的点和原理解析
  • 【QT】增删改查 XML 文件的类
  • 如何在Jupyter中快速切换Anaconda里不同的虚拟环境
  • HQChart使用教程30-K线图如何对接第3方数据44-DRAWPIE数据结构
  • maven依赖的配置和排除依赖
  • 【Vim Masterclass 笔记08】第 6 章：Vim 中的文本变换及替换操作 + S06L20：文本的插入、变更、替换，以及合并操作
  • Ruby语言的并发编程
  • 2025-1-7-sklearn学习（33）数据集转换-特征提取 我不去想未来是平坦还是泥泞，只要热爱生命，一切 都在意料之中。
  • 【STM32+QT项目】基于STM32与QT的智慧粮仓环境监测与管理系统设计（完整工程资料源码）
  • 使用wav2vec 2.0进行音位分类任务的研究总结
  • HunyuanVideo: A Systematic Framework For LargeVideo Generative Models 论文解读
  • 网络基础1 http1.0 1.1 http/2的演进史
  • 【Uniapp-Vue3】创建自定义页面模板
  • C++语言的计算机基础
  • 【LeetCode】307. 区域和检索 - 数组可修改
  • GPT解释联合训练中的颜色映射概念
  • 设计模式学习笔记——结构型模式
  • C#通过外部进程调用Python
  • 计算机网络之---数据链路层的功能与作用
  • 【C++】字符串处理：从 char[] 到 string
  • 第6章——HTTP首部
  • LabVIEW调用不定长数组 DLL数组