JavaScript：200以内的加减法小练习

最新推荐文章于 2022-04-13 13:10:04 发布
最新推荐文章于 2022-04-13 13:10:04 发布
阅读量1.7k 收藏 15
点赞数 3
分类专栏： JavaScript学习 文章标签： js 计算题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43666825/article/details/98316252
版权

在之前一个练习题上进行改动，做了一个200以内的加减法的小练习的页面。
加减法随机生成：
如果是加法，则和在200以内。
如果是减法，则差不会为负数。

运行效果

在这里插入图片描述

源代码

<!-- /*
 * @Author: Chauncey Yuan 
 * @Date: 2019-08-01 18:25:30 
 * @Last Modified by:   Chauncey Yuan 
 * @Last Modified time: 2019-08-03 08:24:27 
 */ -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cal_game {
            width: 650px;
            margin: 0 auto;
        }
        
        table {
            margin: 0 auto;
        }
        
        td {
            width: 150px;
            height: 50px;
            text-align: center;
            line-height: 40px;
            border: 1px solid #ab15fd;
        }
        
        .btn {
            width: 150px;
            height: 50px;
            color: #ab15fd;
            border: 1px solid #ab15fd;
            background-color: #fff;
        }
        
        .btn:hover {
            background-color: #ab15fd;
            color: #fff;
            cursor: pointer;
        }
        
        input {
            height: 30px;
            border: 1px solid #999999;
        }
    </style>
</head>

<body>
    <div class="cal_game">
        <table>
            <tr>
                <td id="output" colspan="3"></td>
            </tr>
            <tr>
                <td>题目</td>
                <td id="eq" colspan="2"></td>
            </tr>
            <tr>
                <td>答案</td>
                <td><input type="text" name="" id="input" placeholder="请输入计算结果："></td>
                <td><button class="btn" onclick="xun()">计算</button></td>
            </tr>
            <tr>
                <td>正误</td>
                <td id="result" colspan="2"></td>
            </tr>
            <tr>
                <td>得分</td>
                <td id="score" colspan="2"></td>
            </tr>
            <tr>
                <td id="accuracy" colspan="3"></td>
            </tr>
        </table>
    </div>
    <script>
        // 定义题号，使用时+1
        var i = 0;
        // 定义计算正确的次数
        var right_times = 0;
        // 定义分数
        var score = 0;
        // 定义正确率
        var accuracy = 0;
        // 定义加减法符号数组，用于后边产生0或1的随机数，来确定加减法
        var sign_operation_list = ["+", "-"];
        // 生成0或者1的随机数，确定加减法
        var sign_operation = Math.floor((Math.random() * (1 - 0 + 1)) + 0);
        // 显示题号
        document.getElementById("output").innerHTML = "第" + (i + 1) + "题";
        // 如果是减法
        if (sign_operation == 1) {
            // 则被减数应该小于减数，结果才不会为负数
            // 减数范围为0-200
            var num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
            // 被减数范围为0-减数
            var num2 = Math.floor(Math.random() * (num1 - 0 + 1) + 0);
        }
        // 如果是加法
        if (sign_operation == 0) {
            // 两数和应小于200
            // 第一个数的范围是0-200
            var num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
            // 第二个数是0-（200-第一个数）
            var num2 = Math.floor(Math.random() * (200 - num1 - 0 + 1) + 0);
        }
        // 组成算式，显示给用户看
        var eq = String(num1) + sign_operation_list[sign_operation] + String(num2) + "=";
        // 页面中显示算式
        document.getElementById("eq").innerHTML = eq;
        // console.log(eq);

        // 定义函数，当按钮按下是执行一次
        function xun() {
            // console.log(num1, num2);
            // 题号加1
            i++;
            // 获取用户输入的结果
            var input = Number(document.getElementById("input").value);
            // console.log(input, num1, num2);
            // 如果是加法
            if (sign_operation == 0) {
                // 定义真实结果
                var calResult = num1 + num2;
                // 如果用户输入的结果和真实结果相同
                if (input == calResult) {
                    // 分数加10分
                    score += 10;
                    // console.log("正确！");
                    // 显示正确信息
                    document.getElementById("result").innerHTML = "正确";
                    // 正确的次数加1
                    right_times++;
                }
                // 如果用户输入的结果和真实结果不同
                if (input != calResult) {
                    // 分数减10分
                    score -= 10;
                    // console.log("错误！");
                    // 显示错误信息
                    document.getElementById("result").innerHTML = "错误";
                }
            } // 如果是减法
            if (sign_operation == 1) {
                // 定义真实结果
                var calResult = num1 - num2;
                // 如果用户输入的结果和真实结果相同
                if (input == calResult) {
                    // 分数加10分
                    score += 10;
                    // console.log("正确！");
                    // 显示正确信息
                    document.getElementById("result").innerHTML = "正确";
                    // 正确的次数加1
                    right_times++;
                }
                // 如果用户输入的结果和真实结果不同
                if (input != calResult) {
                    // 分数减10分
                    score -= 10;
                    // console.log("错误！");
                    // 显示错误信息
                    document.getElementById("result").innerHTML = "错误";
                }
            }
            // 判断结果后，用户输入框清空
            document.getElementById("input").value = "";
            // 显示分数
            document.getElementById("score").innerHTML = score;
            // 显示正确率
            document.getElementById("accuracy").innerHTML = (((right_times / i) * 100).toFixed(2)) + "%";

            // 生成0或者1的随机数，确定加减法
            sign_operation = Math.floor((Math.random() * (1 - 0 + 1)) + 0);
            // 显示题号
            document.getElementById("output").innerHTML = "第" + (i + 1) + "题";
            // 如果是减法
            if (sign_operation == 1) {
                // 则被减数应该小于减数，结果才不会为负数
                // 减数范围为0-200
                num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
                // 被减数范围为0-减数
                num2 = Math.floor(Math.random() * (num1 - 0 + 1) + 0);
            }
            // 如果是加法
            if (sign_operation == 0) {
                // 两数和应小于200
                // 第一个数的范围是0-200
                num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
                // 第二个数是0-（200-第一个数）
                num2 = Math.floor(Math.random() * (200 - num1 - 0 + 1) + 0);
            }
            // 组成算式，显示给用户看
            eq = String(num1) + sign_operation_list[sign_operation] + String(num2) + "=";
            // 页面中显示算式
            document.getElementById("eq").innerHTML = eq;
            // console.log(eq);
        }
    </script>
</body>

</html>
袁成新（Chauncey Yuan）
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
写一个能自动出题（200以内的加减法）代码
qq_54935974的博客
08-02 917
今天大舅给侄女儿补数学，我在和同学开黑…… 休息的时候，大舅很懊恼的抱怨道，初三了，连两位数的加减法都还经常出错，emm…你还玩什么电脑，过来，给你侄女儿补补加减法！ 我！？给人补课？那是必不可能，像我这种调皮捣蛋的不误人子弟就不错了。 于是乎，我还是给她写一段无限循环的两位数加法题库吧！ #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <stdli...
100以内加减口算练习(按F9键自动生成)
09-28
小学1~2年的口算加减法练习，共200题；利用EXCEL公式生成，按F9键可以自动换一批新的。 A4纸排好版，下载后用打印机直接打印即可。 这是在一个朋友的启发下做出来的，当时小孩上2年级。
javascript 实现在网页上生成自定义数量和范围的加减法口算题 剔重 验证 显示答案
01-17
使用JavaScript在网页上生成自定义数量和范围的口算题，使用随机数来选择加减法，不会出现负数答案，不会出现重复题目，输入答案后可以验证答案正误或没做
JavaScript中的加法运算
weixin_30830327的博客
06-07 144
1 <input type="text" id="txt1" value="123" /> 2 <input type="text" id="txt2" value="123" /> 3 var num1= $("#txt1").val(); 4 var num2 = $("#txt2").val() 5 var total = num1+num2; 这个...
Javascript写的小学数学出题练习
07-02
Javascript写的小学数学出题练习
100以内加减法心算练习工具 1.0
02-13
100以内的整数随机出50道练习题，并可以判断您填写的答案的正确性，用javascript写成，不需要任何服务器，直接用浏览器打开即可。 声明：没有病毒，放心使用！
QuanLySinhVien:改善JavaScript的小练习
05-14
全新 改善JavaScript的小练习
JavaScript-Exercise:JavaScript练习以及各种小项目
03-22
JavaScript练习由于关于JavaScript的练习手文件太多，十分杂乱，且分布在两台电脑上，不便管理和查看所以创建此库，放置和管理杂七杂八的文件
javaScript30:30天JavaScript课程练习
05-19
javaScript30 30天JavaScript课程练习时钟-CARDIO模拟时钟第1天-练习以了解数组方法的工作方式
JavaScript：JavaScript代码和练习
02-13
JavaScript 第1天：数字，变量，字符串，字符串模板文字 第2天：如果不是，String.indexOf（），数组 第三天：对象，for循环，while循环，for循环，功能 天- 天- 天- 天-
js代码-随机列出100道100以内的加减数学题
07-15
js代码-随机列出100道100以内的加减数学题
html+js实现加减乘除运算
04-13
html+js实现加减乘除运算, blog: http://blog.csdn.net/zhulei632/article/details/23596299
10以内加减法口算(60题共多组
07-26
10以内加减法口算(60题共多组）
【教学类-06-02】20230204 20以内加法题、减法题、加减法混合题的不重复数量及题目
reasonsummer的博客
02-04 1032
【教学类-06-02】20230204 20以内加法题、减法题、加减法混合题的不重复数量及题目
html+js生成10道小学生加法题
米粉er的博客
04-13 1750
运行效果 <!DOCTYPE html> <html> <head> <title>小朋友做数学题</title> <script type="text/javascript"> var c=1 var x var i; var a; var b; function create(){
利用HTML和javaScript实现简单的加减乘除运算
热门推荐
caoshuyan的博客
03-24 1万+
一、计算方式 计算过程利用下拉菜单进行选择运算方式，输入方式则是输入到from表单的文本框中，代码分为JavaScriptt部分和HTML部分。 二、代码段 （一）JavaScript部分 <script type="text/javascript"> function calc() { var oper1=document.getElementById("nu...
开发一个QQ小程序 内容实实现100以内加减法
最新发布
09-27
### 回答1： ...通过以上步骤的实现，我们就可以创建一个简单的QQ小程序，让用户可以在其中练习100以内的加减法题目。这个小程序可以帮助用户提高他们的数学计算能力，并为他们提供一个有趣的学习工具。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值