DeepSeek火爆全网!我用它做个数学计算题生成器

access数据库下载 redis数据库 sqlite数据库纯真ip数据库 mongodb数据库

DeepSeek火爆全网!我用它做个数学计算题生成器

技术教程gslnedu2025-05-22 10:57:594A⁺A^-

作为一名家长，你是否曾为孩子的数学作业头疼不已？每天都要手动出题，检查答案，费时费力。最近，我借助 DeepSeek 的帮助，开发了一个简单实用的“数学计算题生成器”，彻底解决了这个问题！现在，我将分享我的Ai使用过程，告诉你怎么用它做一个作品并逐渐完善。

我将会展示我的需求说明的提示词和ai回复内容，供您参考，根据这个，您也可以轻松完成一样的功能。

1简要说明需要的功能

提示词编写：

你是一个资深的前端开发工程师，现在需要你帮我写一个网页。网页需要实现以下的功能：1 、点击按钮，生成100以内整数的加减乘除的计算题。 2 在网页上可以在计算题输入内容，点击提交按钮，判断计算题输入的结果是否正确，如果输入结果正确，计算题后面绿色钩号显示，如果错误，叉号显示。要求网页只有一个html文件，打开后可以直接运行

ai回复

好的，我可以帮助你编写一个简单的 HTML 文件，实现你描述的功能。这个文件将包含 HTML、CSS 和 JavaScript 代码，并且可以直接在浏览器中运行。

以下是完整的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100以内加减乘除计算题</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
    .question {
      margin-bottom: 10px;
    }
    .question input {
      width: 60px;
      margin-left: 10px;
    }
    .result {
      margin-left: 10px;
      font-weight: bold;
    }
    .correct {
      color: green;
    }
    .incorrect {
      color: red;
    }
    button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>100以内加减乘除计算题</h1>
    <button onclick="generateQuestions()">生成计算题</button>
    <div id="questions"></div>
    <button onclick="checkAnswers()">提交答案</button>
  </div>

  <script>
    // 生成随机数
    function getRandomNumber(max) {
      return Math.floor(Math.random() * max) + 1;
    }

    // 生成随机运算符
    function getRandomOperator() {
      const operators = ['+', '-', '*', '/'];
      return operators[Math.floor(Math.random() * operators.length)];
    }

    // 生成计算题
    function generateQuestions() {
      const questionsContainer = document.getElementById('questions');
      questionsContainer.innerHTML = ''; // 清空之前的题目

      for (let i = 0; i < 10; i++) { // 生成10道题目
        const num1 = getRandomNumber(100);
        const num2 = getRandomNumber(100);
        const operator = getRandomOperator();

        // 确保除法题目能整除
        if (operator === '/') {
          const result = num1 * num2;
          const question = `${result} ${operator} ${num1}`;
          createQuestionElement(question, result / num1);
        } else {
          const question = `${num1} ${operator} ${num2}`;
          const result = eval(question); // 使用eval计算表达式结果
          createQuestionElement(question, result);
        }
      }
    }

    // 创建题目元素
    function createQuestionElement(question, correctAnswer) {
      const questionsContainer = document.getElementById('questions');
      const questionDiv = document.createElement('div');
      questionDiv.className = 'question';

      const questionText = document.createElement('span');
      questionText.textContent = question + ' = ';
      questionDiv.appendChild(questionText);

      const input = document.createElement('input');
      input.type = 'number';
      questionDiv.appendChild(input);

      const resultSpan = document.createElement('span');
      resultSpan.className = 'result';
      questionDiv.appendChild(resultSpan);

      questionsContainer.appendChild(questionDiv);
    }

    // 检查答案
    function checkAnswers() {
      const questions = document.querySelectorAll('.question');
      questions.forEach((question) => {
        const input = question.querySelector('input');
        const resultSpan = question.querySelector('.result');
        const questionText = question.querySelector('span').textContent;
        const correctAnswer = eval(questionText.replace('=', '').trim());

        if (parseFloat(input.value) === correctAnswer) {
          resultSpan.textContent = '';
          resultSpan.className = 'result correct';
        } else {
          resultSpan.textContent = '';
          resultSpan.className = 'result incorrect';
        }
      });
    }
  </script>
</body>
</html>

功能说明：

生成计算题：
点击“生成计算题”按钮，会随机生成 10 道 100 以内的加减乘除计算题。
每道题目包含一个输入框，用户可以输入答案。
提交答案：
点击“提交答案”按钮，会检查用户输入的答案是否正确。
如果答案正确，题目后面会显示绿色的钩号（）；如果错误，会显示红色的叉号（）。
确保整除：
对于除法题目，确保生成的题目能够整除，避免出现小数结果。

使用方法：

将上述代码保存为一个 .html 文件（例如 math-quiz.html）。
双击打开该文件，即可在浏览器中运行。

示例截图：

生成题目后：
复制
23 + 45 = [输入框] 67 - 12 = [输入框] 8 * 9 = [输入框] 100 / 5 = [输入框]
提交答案后：
复制
23 + 45 = 68 67 - 12 = 55 8 * 9 = 72 100 / 5 = 20

2 功能增加

提示词编写：

现在需要增加一个新的需求，加减乘除的计算可以通过一个下拉框来选择，下拉框有五个选项，分别是加法，减法，乘法，除法和随机。当下拉框内容是加法时，点击按钮只会生成加法的计算题，减法，乘法，除法以此类推，当下拉框选择随机时，生成的加减乘除的计算题可以随机出现。需要增加一个输入框，里面可以输入整数，当点击生成计算题的按钮时，根据输入框的数字生成对应数量的计算题

ai回复

好的，我明白你的需求。我们需要增加一个下拉框来选择运算符类型，并增加一个输入框来指定生成的计算题数量。以下是更新后的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100以内加减乘除计算题</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
    .question {
      margin-bottom: 10px;
    }
    .question input {
      width: 60px;
      margin-left: 10px;
    }
    .result {
      margin-left: 10px;
      font-weight: bold;
    }
    .correct {
      color: green;
    }
    .incorrect {
      color: red;
    }
    button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    .controls {
      margin-bottom: 20px;
    }
    .controls label {
      margin-right: 10px;
    }
    .controls input {
      width: 60px;
      padding: 5px;
    }
    .controls select {
      padding: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>100以内加减乘除计算题</h1>
    <div class="controls">
      <label for="operator">选择运算符：</label>
      <select id="operator">
        <option value="+">加法</option>
        <option value="-">减法</option>
        <option value="*">乘法</option>
        <option value="/">除法</option>
        <option value="random">随机</option>
      </select>
      <label for="count">题目数量：</label>
      <input type="number" id="count" min="1" max="100" value="10">
      <button onclick="generateQuestions()">生成计算题</button>
    </div>
    <div id="questions"></div>
    <button onclick="checkAnswers()">提交答案</button>
  </div>

  <script>
    // 生成随机数
    function getRandomNumber(max) {
      return Math.floor(Math.random() * max) + 1;
    }

    // 生成随机运算符
    function getRandomOperator() {
      const operators = ['+', '-', '*', '/'];
      return operators[Math.floor(Math.random() * operators.length)];
    }

    // 生成计算题
    function generateQuestions() {
      const questionsContainer = document.getElementById('questions');
      questionsContainer.innerHTML = ''; // 清空之前的题目

      const operator = document.getElementById('operator').value;
      const count = parseInt(document.getElementById('count').value, 10);

      for (let i = 0; i < count; i++) {
        const num1 = getRandomNumber(100);
        const num2 = getRandomNumber(100);
        let selectedOperator = operator;

        if (operator === 'random') {
          selectedOperator = getRandomOperator();
        }

        // 确保除法题目能整除
        if (selectedOperator === '/') {
          const result = num1 * num2;
          const question = `${result} ${selectedOperator} ${num1}`;
          createQuestionElement(question, result / num1);
        } else {
          const question = `${num1} ${selectedOperator} ${num2}`;
          const result = eval(question); // 使用eval计算表达式结果
          createQuestionElement(question, result);
        }
      }
    }

    // 创建题目元素
    function createQuestionElement(question, correctAnswer) {
      const questionsContainer = document.getElementById('questions');
      const questionDiv = document.createElement('div');
      questionDiv.className = 'question';

      const questionText = document.createElement('span');
      questionText.textContent = question + ' = ';
      questionDiv.appendChild(questionText);

      const input = document.createElement('input');
      input.type = 'number';
      questionDiv.appendChild(input);

      const resultSpan = document.createElement('span');
      resultSpan.className = 'result';
      questionDiv.appendChild(resultSpan);

      questionsContainer.appendChild(questionDiv);
    }

    // 检查答案
    function checkAnswers() {
      const questions = document.querySelectorAll('.question');
      questions.forEach((question) => {
        const input = question.querySelector('input');
        const resultSpan = question.querySelector('.result');
        const questionText = question.querySelector('span').textContent;
        const correctAnswer = eval(questionText.replace('=', '').trim());

        if (parseFloat(input.value) === correctAnswer) {
          resultSpan.textContent = '';
          resultSpan.className = 'result correct';
        } else {
          resultSpan.textContent = '';
          resultSpan.className = 'result incorrect';
        }
      });
    }
  </script>
</body>
</html>

更新内容：

下拉框选择运算符：
增加了一个 <select> 元素，用户可以选择加法、减法、乘法、除法或随机。
根据选择的值，生成对应类型的计算题。
输入框指定题目数量：
增加了一个 <input> 元素，用户可以输入生成的计算题数量（1 到 100 之间的整数）。
点击“生成计算题”按钮时，根据输入的数量生成对应数量的题目。
随机运算符：
如果选择“随机”，则生成的题目会随机包含加减乘除运算。

使用方法：

将上述代码保存为一个 .html 文件（例如 math-quiz.html）。
双击打开该文件，即可在浏览器中运行。

示例操作：

选择“加法”，输入题目数量为 5，点击“生成计算题”按钮，生成 5 道加法题目。
选择“随机”，输入题目数量为 10，点击“生成计算题”按钮，生成 10 道随机类型的题目。
输入答案后，点击“提交答案”按钮，检查答案并显示结果。

3 功能增加

提示词编写：

增加一个输入框，输入框可以填写数字，当我输入后，点击生成计算题的按钮时，可以生成输入数字以内的计算题，例如：我输入10，只会生成10以内的计算题，我输入10，只会生成100以内的计算题，以此类推。还需要增加一个下拉框，下拉框名字叫是否小数，有两个下拉选项，是和否，当选择是时，点击生成计算题的按钮时，生成的计算题目可以有小数，选择否时，生成的题目只能有整数。还要新增一个按钮，名字叫下载，当我点击这个按钮的时候，可以把生成的计算题目下载下来。对网页的样式增加美化，使页面看起来更美观

ai回复

好的，我理解你的需求。以下是更新后的代码，满足以下功能：

新增输入框：用于设置生成计算题的最大数值范围（例如 10 以内、100 以内）。
新增下拉框：用于选择是否允许生成小数计算题。
新增下载按钮：点击后可以将生成的计算题下载为文本文件。
美化页面样式：使用 CSS 对页面进行美化。

以下是完整的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数学计算题生成器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .container {
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      max-width: 600px;
      width: 100%;
    }
    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
    }
    .controls label {
      font-weight: bold;
      color: #555;
    }
    .controls input,
    .controls select,
    .controls button {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 14px;
    }
    .controls button {
      background-color: #007bff;
      color: #fff;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .controls button:hover {
      background-color: #0056b3;
    }
    .question {
      margin-bottom: 10px;
      padding: 10px;
      background-color: #f9f9f9;
      border-radius: 5px;
      display: flex;
      align-items: center;
    }
    .question input {
      width: 80px;
      margin-left: 10px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .result {
      margin-left: 10px;
      font-weight: bold;
    }
    .correct {
      color: green;
    }
    .incorrect {
      color: red;
    }
    .download-btn {
      background-color: #28a745;
      margin-top: 20px;
      width: 100%;
    }
    .download-btn:hover {
      background-color: #218838;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>数学计算题生成器</h1>
    <div class="controls">
      <label for="maxNumber">最大数值：</label>
      <input type="number" id="maxNumber" min="1" value="100">
      <label for="operator">运算符：</label>
      <select id="operator">
        <option value="+">加法</option>
        <option value="-">减法</option>
        <option value="*">乘法</option>
        <option value="/">除法</option>
        <option value="random">随机</option>
      </select>
      <label for="decimal">是否小数：</label>
      <select id="decimal">
        <option value="no">否</option>
        <option value="yes">是</option>
      </select>
      <label for="count">题目数量：</label>
      <input type="number" id="count" min="1" max="100" value="10">
      <button onclick="generateQuestions()">生成计算题</button>
    </div>
    <div id="questions"></div>
    <button class="download-btn" onclick="downloadQuestions()">下载题目</button>
    <button onclick="checkAnswers()">提交答案</button>
  </div>

  <script>
    // 生成随机数
    function getRandomNumber(max, allowDecimal) {
      if (allowDecimal) {
        return parseFloat((Math.random() * max).toFixed(2));
      } else {
        return Math.floor(Math.random() * max) + 1;
      }
    }

    // 生成随机运算符
    function getRandomOperator() {
      const operators = ['+', '-', '*', '/'];
      return operators[Math.floor(Math.random() * operators.length)];
    }

    // 生成计算题
    function generateQuestions() {
      const questionsContainer = document.getElementById('questions');
      questionsContainer.innerHTML = ''; // 清空之前的题目

      const operator = document.getElementById('operator').value;
      const count = parseInt(document.getElementById('count').value, 10);
      const maxNumber = parseInt(document.getElementById('maxNumber').value, 10);
      const allowDecimal = document.getElementById('decimal').value === 'yes';

      for (let i = 0; i < count; i++) {
        const num1 = getRandomNumber(maxNumber, allowDecimal);
        const num2 = getRandomNumber(maxNumber, allowDecimal);
        let selectedOperator = operator;

        if (operator === 'random') {
          selectedOperator = getRandomOperator();
        }

        // 确保除法题目能整除
        if (selectedOperator === '/') {
          const result = num1 * num2;
          const question = `${result} ${selectedOperator} ${num1}`;
          createQuestionElement(question, result / num1);
        } else {
          const question = `${num1} ${selectedOperator} ${num2}`;
          const result = eval(question); // 使用eval计算表达式结果
          createQuestionElement(question, result);
        }
      }
    }

    // 创建题目元素
    function createQuestionElement(question, correctAnswer) {
      const questionsContainer = document.getElementById('questions');
      const questionDiv = document.createElement('div');
      questionDiv.className = 'question';

      const questionText = document.createElement('span');
      questionText.textContent = question + ' = ';
      questionDiv.appendChild(questionText);

      const input = document.createElement('input');
      input.type = 'number';
      input.step = 'any'; // 允许输入小数
      questionDiv.appendChild(input);

      const resultSpan = document.createElement('span');
      resultSpan.className = 'result';
      questionDiv.appendChild(resultSpan);

      questionsContainer.appendChild(questionDiv);
    }

    // 检查答案
    function checkAnswers() {
      const questions = document.querySelectorAll('.question');
      questions.forEach((question) => {
        const input = question.querySelector('input');
        const resultSpan = question.querySelector('.result');
        const questionText = question.querySelector('span').textContent;
        const correctAnswer = eval(questionText.replace('=', '').trim());

        if (parseFloat(input.value) === correctAnswer) {
          resultSpan.textContent = '';
          resultSpan.className = 'result correct';
        } else {
          resultSpan.textContent = '';
          resultSpan.className = 'result incorrect';
        }
      });
    }

    // 下载题目
    function downloadQuestions() {
      const questions = document.querySelectorAll('.question');
      let content = '';

      questions.forEach((question) => {
        const questionText = question.querySelector('span').textContent;
        content += questionText + '\n';
      });

      const blob = new Blob([content], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'math_questions.txt';
      a.click();
      URL.revokeObjectURL(url);
    }
  </script>
</body>
</html>

更新内容：

新增输入框：
用户可以输入最大数值范围（例如 10、100），生成的计算题数值不会超过该范围。
新增下拉框：
选择“是否小数”，如果选择“是”，生成的计算题可以包含小数；选择“否”，则只生成整数计算题。
新增下载按钮：
点击“下载题目”按钮，可以将生成的计算题保存为文本文件（math_questions.txt）。
美化页面样式：
使用 CSS 对页面进行了美化，包括按钮、输入框、下拉框和题目区域的样式优化。

示例操作：

在“最大数值”输入框中输入 10，选择“加法”，选择“否”，点击“生成计算题”按钮，生成 10 以内的加法题目。
在“最大数值”输入框中输入 100，选择“随机”，选择“是”，点击“生成计算题”按钮，生成 100 以内的随机类型题目（可能包含小数）。
点击“下载题目”按钮，将生成的计算题保存为文本文件。

将如上代码复制到文件里面，修改后缀名为html，直接打开就可以看到结果了，不得不说DeepSeek真的牛逼。

最终运行结果显示：

点击这里复制本文地址以上内容由朽木教程网整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！

html下拉框

上一篇：JOKER低代码平台-如何管理组件数据

下一篇：安卓Chrome新版发布:支持网页下拉刷新

DeepSeek火爆全网!我用它做个数学计算题生成器

1简要说明需要的功能

功能说明：

使用方法：

示例截图：

2 功能增加

更新内容：

使用方法：

示例操作：

3 功能增加

更新内容：

示例操作：

相关文章