<!--在文本框分别输入两个数,实现两个数的+、-、*、/运算,点击“=按钮”将结果显示在文本框中。-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Operation</title>
<script type="text/javascript" src="../JS/jquery-3.4.1.min.js"></script>
<script>
function operate() {
var n1 = $("#num1").val();
var n2 = $("#num2").val();
var op = $("#op").val();
var res = $("#result").val();
var reg = /(^[\-0-9][0-9]*(.[0-9]+)?)$/; //判断是否为数字
if (!reg.test(n1) || !reg.test(n2)) {
alert("检测到非数字,请您重新输入!");
return false;
} else if (op == '/' && n2 == 0) {
alert("除数不能为0,请重新输入!");
n2 = '';
return false;
} else {
// 如果参数是表达式,则eval计算表达式
res = eval(n1 + op + n2);
f.result.value = res;
return true;
}
}
</script>
</head>
<body style="width: 50%; margin: 200px auto">
<form name="f">
请输入两个数进行简单的运算:<br><br>
<!-- 输入第一位数-->
<input type="text" id="num1" value=""/>
<!-- 算数选择器-->
<select id="op">
<option value='+'> +</option>
<option value='-'> -</option>
<option value='*'> ×</option>
<option value='/'> ÷</option>
</select>
<!-- 输入第二位数-->
<input type="text" id="num2" value=""/>
<!-- 添加'='按钮-->
<input type="button" value="=" onclick="operate()"/>
<!-- 输出结果:只可查看-->
<input type="text" id="result" value="" readonly/>
</form>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
Web基础-JavaScript.zip
![preview](https://csdnimg.cn/release/downloadcmsfe/public/img/white-bg.ca8570fa.png)
共3个文件
html:3个
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
需积分: 5 0 下载量 45 浏览量
2024-07-03
22:53:13
上传
评论
收藏 2KB ZIP 举报
温馨提示
1. 编写一个html页面,使用Javascript完成数字的平方计算。 2、要求文本框中只能输入字母,参考如下:(可使用JavaScript内置对象String的方法测试数字和字母) 3、在文本框分别输入两个数,实现两个数的+、-、*、/运算,点击“=按钮将”结果显示在文本框中。界面设计可参考下图。注意对文本框输入的数据是否是数字要进行判断。
资源推荐
资源详情
资源评论
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
收起资源包目录
![package](https://csdnimg.cn/release/downloadcmsfe/public/img/package.f3fc750b.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/HTML.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/HTML.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/HTML.png)
共 3 条
- 1
资源评论
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/e26ed4a076b04a08b7733b7ea0ccdd63_m0_67830223.jpg!1)
布丁椰奶冻
- 粉丝: 1005
- 资源: 19
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)