Javascript入门之实现简易计算
作者：互联网
描述: 输入两个数, 实现+ - * / % 5种操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Switch</title>
</head>
<body>
<!-- 1.布局, 两个输入框和一个下拉列表选择+ - * / -->
<div class="calculate">
Please input two numbers:
<input type="text" id = "num1">
<select name="operator" id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input type="text" id = "num2">
<button id = "btn">=</button>
<input type="text" id = "result">
</div>
<script>
/*
语法:
switch(条件/变量){
case 结果1:
符合结果1的时候执行的代码;
break;
case 结果2:
符合结果2的时候执行的代码;
break;
case 结果3:
符合结果4的时候执行的代码;
break;
default:
以上结果都不符合的时候执行的代码;
break;
}
switch: 更适用于条件和结果比较单一的时候
break: 防止穿透
如果不加break, 当switch匹配到一个符合的结果的时候，后面的结果都不匹配，直接执行后面所有的代码
*/
/*
1.获取元素 num1,num2, operator and btn
*/
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var btn = document.getElementById("btn");
var operator = document.getElementById("operator");
var result = document.getElementById("result");
console.log(num1,num2,btn,operator);
// 2.点击获取事件
btn.onclick = function(){
// 3. 获取输入的两个数字和具体的操作
var firstnum = parseFloat(num1.value);
var secondnum = parseFloat(num2.value);
var selectedoperator = operator.value;
console.log(firstnum, secondnum, selectedoperator);
// 4.判断所选择的运算符
switch(selectedoperator){
// 4.1 加法操作
case '+':
result.value = firstnum + secondnum;
break;
// 4.2 减法操作
case '-':
result.value = firstnum - secondnum;
break;
// 4.3 乘法操作
case '*':
result.value = firstnum * secondnum;
break;
// 4.4 除法操作
case '/':
result.value = firstnum / secondnum;
break;
// 4.5 取余操作
case '%':
result.value = firstnum % secondnum;
break;
// 4.6 默认操作
default:
alert("当前运算结果错误");
break;
}
}
</script>
</body>
</html>
标签：case,入门,Javascript,secondnum,value,break,简易,result,var 来源： https://blog.csdn.net/qq_37086980/article/details/110124038