网页计算器功能【案例】【两种实现】
2023-09-11 14:16:46 时间
网页计算器
我们学完了函数,做一个网页计算器的小案例…巩固一下…
共两个案例:
案例一图:
相加:
相减
相乘
相除
代码如下:
结构:
<p>整数1: <input type="text" name="" id="num1"> </p>
<p>整数2: <input type="text" name="" id="num2"> </p>
<p>
<input type="button" value="相加" onclick="math(add)">
<input type="button" value="相减" onclick="math(fuck)">
<input type="button" value="相乘" onclick="math(doubles)">
<input type="button" value="相除" onclick="math(fucks)">
</p>
<p>结果:<input type="text" name="" id="result"></p>
<script>
function math(func) {
var result = document.getElementById('result');
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
if (isNaN(num1) || isNaN(num2)) {
alert('输入数字,你个傻吊');
return false;
} else {
result.value = func(num1, num2);
}
}
function add(num1, num2) {
return num1 + num2;
}
function fuck(num1, num2) {
return num1 - num2;
}
function doubles(num1, num2) {
return num1 * num2;
}
function fucks(num1, num2) {
return num1 / num2;
}
</script>
案例二:
案例图:(实现案例图上的功能)
<script>
while (true) {
var choose = parseInt(prompt('欢迎使用简易计算器:' + '\n' + '1.加法操作' + '\n' + '2.减法操作' + '\n' + '3.乘法操作' + '\n' + '4.除法操作' + '\n' + '5.退出'));
if (choose > 5 || choose <= 0) {
alert('请输入1-5之间的选项...');
continue;
} else {
if (choose == 1) {
alert('欢迎使用加法计算器,请输入需要计算的两个数值');
var num1 = parseFloat(prompt('第一个数值:'));
var num2 = parseFloat(prompt('第二个数值:'));
alert('结果为:' + (num1 + num2));
continue;
} else if (choose == 2) {
alert('欢迎使用减法计算器,请输入需要计算的两个数值');
var num1 = parseFloat(prompt('第一个数值:'));
var num2 = parseFloat(prompt('第二个数值:'));
alert('结果为:' + (num1 - num2));
continue;
} else if (choose == 3) {
alert('欢迎使用乘法计算器,请输入需要计算的两个数值');
var num1 = parseFloat(prompt('第一个数值:'));
var num2 = parseFloat(prompt('第二个数值:'));
alert('结果为:' + (num1 * num2));
continue;
} else if (choose == 4) {
alert('欢迎使用加法计算器,请输入需要计算的两个数值');
var num1 = parseFloat(prompt('第一个数值:'));
var num2 = parseFloat(prompt('第二个数值:'));
alert('结果为:' + (num1 / num2));
continue;
} else {
alert('欢迎再次使用');
alert('再见');
break;
}
}
}
</script>
相关文章
- 使用ueditor实现多图片上传案例——Servlet层(UploadServlet)
- 纯js实现人脸识别眨眨眼张张嘴案例——clmtrackr.js
- Python语言学习:Python语言学习之容器(列表&元组&字典&集合)简介、特点/意义/经验总结及容器魔法方法(定义可变&不可变容器的协议)的简介、案例应用之详细攻略
- C++:C++编程语言学习之数组/字符串/指针/引用/日期&I/O输入输出操作(I/O 库头文件/标准输出流cout/标准输入流cin/标准错误流/准日志流)的简介、案例应用之详细攻略
- DayDayUp:本博主预计2019下半年将会出两本书(关于人工智能算法及其实战案例应用方向、计算机算法竞赛集锦方向),如有合作意向,请留言告知
- ML之LiR:机器学习经典算法之线性回归算法LiR的简介、使用方法、经典案例之详细攻略
- ML之XGBoost:Kaggle神器XGBoost算法模型的简介(资源、调优)、安装教程、使用方法、案例应用之详细攻略
- TF之RNN:实现利用scope.reuse_variables()告诉TF想重复利用RNN的参数的案例
- 【大数据开发运维解决方案】Solr5.1案例文档导入