JS使用random随机数实现简单的四则算数验证

1.效果图

2.代码实现

index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="input" >
    <span id="num1"></span>
    <span id="op"></span>
    <span id="num2"></span>
    <span>=</span>
    <span id="sum">?</span>
    <button id="btn" onclick="sumbit()">提交</button>
    <script src="./js/index.js"></script>
</body>
</html>

index.js

javascript 复制代码
let num1_text = document.getElementById(`num1`)
let num2_text = document.getElementById(`num2`)
let sum_text = document.getElementById(`sum`)
let input = document.getElementById(`input`)
let op_text = document.getElementById(`op`)
let num1, num2, op
//生成随机数的方法
let rand = (min, max) => {//传入随机数范围
    result= parseInt((max-min+1)*Math.random()+min)//将结果转为整数
    return result //返回结果
}
//初始化方法
let init = () => {
    num1 = rand(1, 10)//生成一个1~10之间的随机数赋给num1
    num2 = rand(1, 10)//生成一个1~10之间的随机数赋给num2
    switch (rand(1, 4)) {//随机生成四则运算符
        case 1: op_text.textContent = `+`,op=`+`; break//当随机数为1为+,并将值赋给op
        case 2: op_text.textContent = `-`, op = `-`; break
        case 3: op_text.textContent = `*`, op = `*`; break
        case 4: op_text.textContent = `/`, op = `/`; break
    }
    num1_text.textContent = `${num1}`//将当前num1的值显示到前端对应的标签中
    num2_text.textContent = `${num2}`
}
//页面加载时先执行一次
init()
//声明一个点击事件的方法
let sumbit = () => {
    //根据上面随机到的op,num1,num2结合获取到前端输入框中的值进行判断
    if (op == `+`&& parseInt(input.value)==(num1+num2)) alert("验证成功")
    else if (op == `-` && parseInt(input.value) == (num1 - num2)) alert("验证成功")
    else if (op == `*` && parseInt(input.value) == (num1 * num2)) alert("验证成功")
    else if (op == `/` && parseInt(input.value) == parseInt(num1 / num2)) alert("验证成功")
    else alert("验证失败")
    //提交后再次初始化
    init()
}
相关推荐
丘上人5 分钟前
qt 窗口(window/widget)绘制/渲染顺序 QPainter QPaintDevice Qpainter渲染 失效 无效
开发语言·qt
_.Switch17 分钟前
FastAPI 的依赖注入与生命周期管理深度解析
开发语言·前端·python·中间件·性能优化·fastapi
我想学LINUX20 分钟前
【2024年华为OD机试】 (A卷,100分)- 对称美学(Java & JS & Python&C/C++)
java·c语言·javascript·c++·python·华为od
东北赵四22 分钟前
JVM之垃圾回收器概述(续)的详细解析
java·开发语言·jvm
羊小猪~~1 小时前
数据结构C语言描述11(图文结合)--二叉搜索树(BST树)的实现(数据采用KV存储形式进行封装)
c语言·开发语言·数据结构·c++·学习·考研·算法
七里汀1 小时前
关于husky8.0 与 4.0的配置
javascript·git
花追雨1 小时前
Java - Http 通讯
java·开发语言·http
Libby博仙1 小时前
VUE3 监听器(watch)
前端·javascript·vue.js
ac-er88881 小时前
使用Go语言的http.Transport进行SSL握手的方法与注意事项
开发语言·网络协议·http·golang·ssl
金州饿霸1 小时前
HDFS异构存储和存储策略
前端·javascript·hdfs