Html实现简单的四则运算--加减乘除计算(单选框默认选择)

结果示例图:
Html实现简单的四则运算--加减乘除计算(单选框默认选择)_第1张图片
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>加减乘除计算(单选框默认选择)</title>
    <style>	
		
    </style>
</head>
<body>
	<form action="" method="post" name="myform" id="myform">
		<div class="wrapper" id="_wrapper">        	
			操作数1<input type="text" name="number1" id="number1" autocomplete="off"/><br><br>
			<input type="radio" name="count" id="" value="" checked="checked"/>加法
			<input type="radio" name="count" id="" value=""/>减法
			<input type="radio" name="count" id="" value=""/>乘法
			<input type="radio" name="count" id="" value=""/>除法<br><br>
			操作数2<input type="text" name="number2" id="number2" autocomplete="off"/><br><br>	
			
			<input type="button" value="计算" id="" onclick="jisuan()"/>
			<input type="reset" value="重置" id="" /><br><br>
			
			计算结果:<input name="txtResult" type="text" id="txtResult" autocomplete="off"/>
			
		</div>
	</form>

	<script>
		
		var str;
		var num1 = 0;
		var num2 = 0;	
			
		//点击事件	//document.form的name值.input的name值.value
		function jisuan(){
			str = document.getElementsByName('count');
			num1 = parseFloat(document.myform.number1.value);
			num2 = parseFloat(document.myform.number2.value);
			//判断文本框是否为空
			//注意此处文本框获取值时使用了parseFloat转换,所以当文本框为空时是NaN,并不是""和null,所以需要用到isNaN来判断。
			if(isNaN(num1) && isNaN(num2)){
				alert("请先填写数据!");
			}
			else if(isNaN(num1)){
				alert("请填写操作数1!");
			}
			else if(isNaN(num2)){
				alert("请填写操作数2!");
			}
			else{
				danxuankuang();
			}	
		}
		
		//判断单选框是否选中
		function danxuankuang(){
			if(str[0].checked == true){
				document.myform.txtResult.value=num1+num2;
			}
			else if(str[1].checked == true){
				document.myform.txtResult.value=num1-num2;
			}
			else if(str[2].checked == true){
				document.myform.txtResult.value=num1*num2;
			}
			else if(str[3].checked == true){
				document.myform.txtResult.value=num1/num2;
			}
			else{
				alert("单选框异常,未选中!");
			}			
		}		
		
	</script>
</body>
</html>

你可能感兴趣的:(代码练习)