输入两个数加减乘除
程序员文章站
2022-05-01 15:46:13
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流程控制语句</title>
</head>
<body>
<label for="">请输入您的第一个数字:</label>
<input type="" name="" id="num1" value="" />
<label for="">请输入您的第二个数字:</label>
<input type="" name="" id="num2" value="" />
<select name="" id="list">
<option value="加">加</option>
<option value="减">减</option>
<option value="乘">乘</option>
<option value="除">除</option>
<option value="模">模</option>
</select>
<button id="btn">测试</button>
<div id="msg">
</div>
<script type="text/javascript">
//1：if（表达式）{需要执行的代码块} 这个表达式的返回结果只能是布尔类型----条件语句 代码块什么时候被执行，--只有if里面的表达式返回为true的时候
//2：if（表达式）{}else{} 表达式返回结果为false的时候执行else里面的内容
//3:多分支语句：if(表达式){}else if(表达式){}...else{}
//4switch（表达式--值不能够为布尔类型）case：要执行的代码块 break--用于跳出switch语句 default break；可以省略--以上条件都不满足时执行的内容 ：多用于条件固定时
//1：若用户在文本框内输入的值大于等于18则输出您已经成年了，否则您的年龄不符合要求
//2:简单的计算器 获取第一个文本框的值，获取第二个文本框的值，选择的是哪一个运算获得列表中用户选择的内容，点击事件，条件判断完成运算
var num1=document.getElementById("num1");
var num2=document.getElementById("num2");
var btn=document.getElementById("btn");
var msg=document.getElementById("msg");
var list=document.getElementById("list");
var result;//定义一个变量用于存放结果
//点击事件
btn.onclick=function(){
switch (list.value){
case "加":
//需要执行的代码块
result=Number(num1.value)+Number(num2.value);
break;
case "减":
//需要执行的代码块
result=Number(num1.value)-Number(num2.value);
break;
case "乘":
//需要执行的代码块
result=Number(num1.value)*Number(num2.value);
break;
case "除":
//需要执行的代码块
result=Number(num1.value)/Number(num2.value);
break;
case "模":
//需要执行的代码块
result=Number(num1.value)%Number(num2.value);
break;
default:
alert("您输入有误")
break;
}
msg.innerText=result;
}
</script>
</body>
</html>
上一篇： GitHub 注册用户数突破 200 万
下一篇： HTML5游戏开发 之 循环的控制(2)