登录  /  注册
博主信息
博文 27
粉丝 0
评论 0
访问量 17084
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
计算器-9.12
Yyk.的博客
原创
634人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	
	</style>
</head>
<body>
	<div class="box">
		<form>
			<table>
				<tr>
					<td><input type="text" name="num1" placeholder="请输入数1"></td>
					
					<td><select name="option" id="">
                        <option value="null">请选择操作</option>
                        <option value="add">+</option>
                        <option value="sub">-</option>
                        <option value="mul">*</option>
                        <option value="div">/</option>
                    </select>
					</td>
					
					<td><input type="text" name="num2" placeholder="请输入数2"></td>
					
					<td><button type="button">计算</button></td>
				</tr>
				<tr>
					<td><h3>结果</h3></td>
					<td><h3 id="result"></h3></td>
				</tr>
			
			</table>
		</form>
	
	</div>
	<script>
	//获取对象
	let num1 = document.getElementsByName('num1')[0];
	let num2 = document.getElementsByName('num2')[0];
	
	let opt = document.getElementsByName('option')[0];
	let btn =document.getElementsByTagName('button')[0];
	
	let result = document.getElementById('result');
	
	btn.onclick = function(){
		
	let a1 = num1.value;
	let a2 = num2.value;
	

	//检测操作数的正确
	if(num1.value.length ===0){
		alert('不能为空');
		num1.focus();
		return false;
	}else if(isNaN(num1.value)){
		alert('必须为数字');
		num1.focus();
		return false;
	}else if(num2.value.length ===0){
		alert('不能为空');
		num2.focus();
		return false;
	}else if(isNaN(num2.value)){
		alert('必须为数字');
		num2.focus();
		return false;
	}

	//处理操作符
	let option = opt.value;
	let flag = '';
	let res ;
	switch(option){
		case 'null':
				alert('请选择操作类型');
				opt.focus();
				return false
			
		case 'add':
				flag = '+';
				res = a1 + a2;
				break;
			
		case 'sub':
				flag = '-';
				res = a1-a2;
				break;
			
		case 'mul':
				flag = '*';
				res = a1*a2;
				break;
			
		case 'div':
				flag = '/';
				if(a2 === 0){
					alert('除数不能为0');
					num2.focus();
					return false;
				 }else{
					res =a1/a2;
					res = Math.round(res * 100)/100;
				 }
				break;
				 }
	
		let str ='<span style="color:red">';
		str +=a1 + flag + a2 + '=' +res;
			
		str +='</span>';
			
		result.innerHTML = str;
			
	
	}
	
	
	
	
	
	
	
	
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

个人总结:

1.<input type="text" name="num1" placeholder="请输入数1"> ~~let num1;

     想要获取输入的值 必须是 num1.value,而不是直接用num。

2.注意switch的用法

 switch(){

 case 0:     //注意这里是冒号

  break;

}



        

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学