【娱乐项目】竖式算术器

Demo先容

   一个加减法随机数天生器，它可以大概天生随机的加减法标题，而且支持用户输入答案。体系会根据用户输入的答案判定是否准确，统计准确和错误的次数，并表现汗青记载和错题记载。该工具适适用于数学练习，尤其恰当练习根本的加减法运算。
  JavaScript 代码

  

• 变量初始化
  

   

   

• correctCount 和 wrongCount：用于存储用户答对和答错的次数   
  
• randomNum：控制天生的随机数的范围，默认是 20   
  
• previousEquations：存储用户复兴的全部算式   
  
• correctEquations 和 wrongEquations：分别记载答对和答错的算式   
  
• showWrongRecords 控制是否表现错题记载  
  

  

  

• 焦点功能
  

   

   

• **编辑功能：**点击“修改”按钮可以编辑 randomNum，即加减法标题标最大值范围。修改后，点击“确定”会禁用输入框   
  
• **计时功能：**通过 setInterval 每秒更新一次计时器，表现自页面加载以来的耗时  
  

   

   

• 随机数天生和算式天生：  
  

  

   

• generateRandomNumber()：天生 1 到 randomNum 之间的随机整数   
  
• generateRandomOperation()：以 50% 概率天生“加法”或“减法”   
  
• generateRandomEquation()：根据天生的两个随机数和运算符构建一个加减法算式。假如是加法且结果大于 randomNum，则改为减法；假如是减法且第一个数小于第二个数，则交换两个数的次序。  
  

   

   

• 答案判定：  
  

  

   

• checkAnswer()：监听用户输入，按回车键后查抄用户输入的答案是否准确。若准确，增长准确次数并将算式添加到准确记载中；若错误，增长错误次数并将算式添加到错误记载中   
  
• eval() 用于盘算天生的算式的结果  
  

   

   

• 更新和表现标题：  
  

  

   

• 每次用户复兴准确后，调用 generateNewEquation() 函数天生一个新的随机算式   
  
• 表现标题：equation 表现算式，equation2 表现带等号的算式，showRes 表现算式的树形结构（即数字在上下排布的样式，资助用户明白运算次序）  
  

   

   

• 汗青记载：  
  

  

   

• 使用 previousEquations 存储全部的算式和对应的答案，汗青记载可以按次序表现   
  
• 通过点击“切换记载”按钮，可以切换检察错题记载（错误的算式）和汗青记载（包罗准确和错误的算式）  
  

   

   

• 统计功能：
  页面右侧表现准确复兴次数和错误复兴次数  
  

   

   

• 键盘变乱监听：
  使用 document.addEventListener(‘keypress’, checkAnswer) 来监听用户的输入，并在用户按下回车键时举行答案查抄  
  

  交互流程

   

   

• 页面加载时，默认天生一个加减法算式，并表现在页面中   
  
• 用户在输入框中输入答案并按下回车键  
  

  

   

• 假如答案准确，表现“复兴准确”，并天生一个新的算式   
  
• 假如答案错误，表现“复兴错误”  
  

  

   

• 用户可以通过点击“切换记载”按钮检察汗青记载或错题记载   
  
• 用户点击“修改”按钮时，可以修改加减法标题标最大数值（默以为20）   
  
• 页面会不绝更新统计信息，表现准确和错误的次数  
  

  完备代码

1. <!DOCTYPE html>
2. <html>
4. <head>
5.     <title>加减法随机数生成器</title>
6.     <style>
7.         /* 页面样式设置 */
8.         body {
9.      
10.      
11.             margin: 0;
12.         }
14.         .calculate {
15.      
16.      
17.             height: 97vh;
18.             overflow: scroll;
19.             text-align: center;
20.             border: 8px groove #fff;
21.         }
23.         html::-webkit-scrollbar,
24.         .calculate::-webkit-scrollbar {
25.      
26.      
27.             width: 0;
28.             height: 0;
29.         }
31.         .calculate .top {
32.      
33.      
34.             position: relative;
35.         }
37.         .calculate .title {
38.      
39.      
40.             height: 40px;
41.             line-height: 40px;
42.             font-size: 32px;
43.             font-weight: bold;
44.             text-align: center;
45.         }
47.         .calculate .title input {
48.      
49.      
50.             width: 50px;
51.             height: 100%;
52.             text-align: center;
53.             font-size: 32px;
54.             font-weight: bold;
55.             border: none;
56.         }
58.         .calculate .top .btn {
59.      
60.      
61.             position: absolute;
62.             top: 5px;
63.             right: 10px;
64.             display: flex;
65.             justify-content: space-around;
66.         }
68.         .calculate .top .btn div {
69.      
70.      
71.             width: 100px;
72.             background: #7bcafc;
73.             color: #fff;
74.             border-radius: 20px;
75.             height: 35px;
76.             line-height: 35px;
77.             cursor: pointer;
78.             margin-left: 10px;
79.         }
81.         .calculate #container {
82.      
83.      
84.             display: flex;
85.             justify-content: space-around;
86.             background: rgb(241, 245, 251);
87.             height: 80%;
88.             margin: 0 auto;
89.             border-radius: 8px;
90.         }
92.         .calculate #container .title {
93.      
94.      
95.             background: #fff;
96.             border-radius: 20px;
97.             width: 50%;
98.             margin: 10px auto;
99.             height: 40px;
100.             line-height: 40px;
101.         }
103.         #timer {
104.      
105.      
106.             width: 100%;
107.             text-align: center;
108.             font-size: 20px;
109.         }
111.         #equation {
112.      
113.      
114.             font-size: 40px;
115.             font-weight: bold;
116.             text-align: center;
117.             margin-bottom: 20px;
118.             display: none;
119.         }
121.         #equation2 {
122.      
123.      
124.             font-size: 40px;
125.             font-weight: bold;
126.             text-align: center;
127.             margin-bottom: 20px;
128.             display: none;
129.         }
131.         .tree {
132.      
133.      
134.             font-size: 40px;
135.             font-weight: bold;
136.         }
138.         .tree p {
139.      
140.      
141.             line-height: 0

复制代码