自学内容网 自学内容网

HTML+JS+CSS计算练习

可填 题目数量 数字范围 计算符号

题目做完后会弹窗提示正确率、用时

效果图     源代码在图片后面 

058b109fbdb342a9becb1604308f257f.jpg

6885b9c369754487b466d779c801ef6f.jpg

8e474bd5b2f0493abd8844dd05e5d09e.jpg

 

<!DOCTYPE html>
<html lang="en">
<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;
      background-color: #f2f2f2;
    }
    
    .container {
      max-width: 400px;
      margin: 50px auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #ff4646;
    }
    
    input, select, button {
      display: block;
      width: 100%;
      margin-bottom: 10px;
      padding: 10px;
      border: none;
      border-radius: 5px;
    }
    
    button {
      background-color: #ff4646;
      color: #fff;
      cursor: pointer;
    }
    
    button:hover {
      background-color: #ff1f1f;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>数学计算练习</h2>
    <input type="number" id="numOfQuestions" placeholder="输入题目数量">
    <input type="number" id="minNumber" placeholder="输入数字范围最小值">
    <input type="number" id="maxNumber" placeholder="输入数字范围最大值">
    <select id="operation">
      <option value="add">加法</option>
      <option value="subtract">减法</option>
      <option value="multiply">乘法</option>
      <option value="divide">除法</option>
    </select>
    <button onclick="startQuiz()">开始练习</button>
  </div>
  
  <script>
    function startQuiz() {
      var numOfQuestions = document.getElementById('numOfQuestions').value;
      var minNumber = document.getElementById('minNumber').value;
      var maxNumber = document.getElementById('maxNumber').value;
      var operation = document.getElementById('operation').value;
      var correctAnswers = 0;
      var startTime = new Date().getTime();
      
      for (var i = 0; i < numOfQuestions; i++) {
        var num1 = Math.floor(Math.random() * (maxNumber - minNumber + 1)) + parseInt(minNumber);
        var num2 = Math.floor(Math.random() * (maxNumber - minNumber + 1)) + parseInt(minNumber);
        var question, answer;
        
        switch (operation) {
          case 'add':
            question = num1 + ' + ' + num2;
            answer = num1 + num2;
            break;
          case 'subtract':
            question = num1 + ' - ' + num2;
            answer = num1 - num2;
            break;
          case 'multiply':
            question = num1 + ' * ' + num2;
            answer = num1 * num2;
            break;
          case 'divide':
            if (num2 === 0) {
              continue;
            }
            question = num1 + ' ÷ ' + num2;
            answer = num1 / num2;
            break;
        }
        
        var userAnswer = prompt('第' + (i+1) + '题: ' + question + ' = ?');
        
        if (userAnswer && parseFloat(userAnswer) === answer) {
          correctAnswers++;
        }
      }
      
      var endTime = new Date().getTime();
      var totalTime = (endTime - startTime) / 1000;
      var accuracy = (correctAnswers / numOfQuestions) * 100;
      alert('练习结束,正确率:' + accuracy.toFixed(2) + '%,用时:' + totalTime.toFixed(2) + '秒');
    }
  </script>
</body>
</html>

点赞❤️ 关注 🖲 收藏 ⭐️

 


原文地址:https://blog.csdn.net/w11111xxxl/article/details/140533527

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!