前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

2025年03月10日

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

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

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

1简要说明需要的功能

提示词编写：

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

ai回复

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

以下是完整的代码：




  
  
  100以内加减乘除计算题
  


  

    
100以内加减乘除计算题

    
    

    
  


  <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 createquestionelementquestion result num1 else const question='`${num1}' operator num2 const result='eval(question);' eval createquestionelementquestion result function createquestionelementquestion correctanswer const questionscontainer='document.getElementById('questions');' const questiondiv='document.createElement('div');' questiondiv.classname='question' const questiontext='document.createElement('span');' questiontext.textcontent='question' input input.type='number' questiondiv.appendchildinput const resultspan='document.createElement('span');' resultspan.classname='result' questiondiv.appendchildresultspan questionscontainer.appendchildquestiondiv function checkanswers const questions='document.querySelectorAll('.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>

功能说明：

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

使用方法：

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

示例截图：

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


2 功能增加

提示词编写：

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

ai回复

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




  
  
  100以内加减乘除计算题
  


  

    
100以内加减乘除计算题

    

      
      
      
      
      
    

    

    
  


  <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 createquestionelementquestion result num1 else const question='`${num1}' selectedoperator num2 const result='eval(question);' eval createquestionelementquestion result function createquestionelementquestion correctanswer const questionscontainer='document.getElementById('questions');' const questiondiv='document.createElement('div');' questiondiv.classname='question' const questiontext='document.createElement('span');' questiontext.textcontent='question' input input.type='number' questiondiv.appendchildinput const resultspan='document.createElement('span');' resultspan.classname='result' questiondiv.appendchildresultspan questionscontainer.appendchildquestiondiv function checkanswers const questions='document.querySelectorAll('.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>

更新内容：

  1. 下拉框选择运算符：
  2. 增加了一个 元素，用户可以输入生成的计算题数量（1 到 100 之间的整数）。
  3. 点击“生成计算题”按钮时，根据输入的数量生成对应数量的题目。
  4. 随机运算符：
  5. 如果选择“随机”，则生成的题目会随机包含加减乘除运算。

使用方法：

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

示例操作：

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


3 功能增加

提示词编写：

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

ai回复

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

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

以下是完整的代码：




  
  
  数学计算题生成器
  


  

    
数学计算题生成器

    

      
      
      
      
      
      
      
      
      
    

    

    
    
  


  <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 createquestionelementquestion result num1 else const question='`${num1}' selectedoperator num2 const result='eval(question);' eval createquestionelementquestion result function createquestionelementquestion correctanswer const questionscontainer='document.getElementById('questions');' const questiondiv='document.createElement('div');' questiondiv.classname='question' const questiontext='document.createElement('span');' questiontext.textcontent='question' input input.type='number' input.step='any' questiondiv.appendchildinput const resultspan='document.createElement('span');' resultspan.classname='result' questiondiv.appendchildresultspan questionscontainer.appendchildquestiondiv function checkanswers const questions='document.querySelectorAll('.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>

更新内容：

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

示例操作：

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


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

最终运行结果显示：


标签：html下拉选择框 

作者:whsf66 , 分类:前端教程 , 浏览:4 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言