版权声明:未经博主同意,禁止转载 https://blog.csdn.net/weixin_42130471/article/details/84573011
向HTML网页中嵌入JavaScript,能再浏览器上运行,整个网页代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function calc(){
// alert("ok");
//获取两个操作数和一个运算符
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
var oper=document.getElementById("oper").value;
var result;
if(isNaN(num1)||isNaN(num2)){
document.getElementById("result").innerHTML="<span style='color: red;'>必须是数字</span>";
return;
}
if(oper=='/'&&num2=='0'){
document.getElementById("result").innerHTML="<span style='color: red;'>除数不能为零</span>";
return;
}
switch(oper){
case "+":result=parseFloat(num1)+parseFloat(num2);break;
case "-":result=parseFloat(num1)-parseFloat(num2);break;
case "*":result=parseFloat(num1)*parseFloat(num2);break;
case "/":result=parseFloat(num1)/parseFloat(num2);break;
}
document.getElementById("result").innerHTML=result;
}
</script>
</head>
<body>
<form action="">
第一个数<input type="text" id="num1" name="name1" value="123"/><br/>
第二个数<input type="text" id="num2" name="name2" /><br>
运算符 <select id="oper" nume="oper">
<option value="+">加</option>
<option value="-">减</option>
<option value="*">乘</option>
<option value="/">除</option>
</select>
<input type="button" value="提交" onclick="calc()"/>
<div id="result">结果</div>
</form>
</body>
</html>
要点:
1.触发事件用onclik="calc()";即,点击事件发生后调用在js中定义的calc()函数来计算
2.JavaScript中获取HTML中元素是通过元素id来获取,如:getElementById("num1"),
getElementById("num2"),getElementById("num3")
3.将结果写到网页的指定位置document.getElementById("result").innerHTML=result;其中document.getElementById("result").innerHTML是通过ID获取网页指定位置并修改指定位置的文本内容,这样结果就呈现在网页上了。
4.要判断输入内容只能为数字且除数不能为零,
结果截图: