js_实现网页中简易计算器

最新推荐文章于 2023-04-03 17:24:20 发布

zl202111

最新推荐文章于 2023-04-03 17:24:20 发布

阅读量804

点赞数 2

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/zl202111/article/details/128223849

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在网页中事件简易计算器

实现网页中的计算器

实现网页中的计算器

使其可以进行加减乘除，结果显示在文本框中
效果图：
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<div class ='box_num1'>
				整数1:&nbsp;
				<input type='text' class='num1' value="">
			</div><p>
			<div class ='box_num2'>
				整数2:&nbsp;
				<input type='text' class='num2' value="">
			</div><p>
			<div class = 'box_button'>
				<input type="button" name="" onclick="add()" value="相加" />
				<input type="button" name="" onclick="sub()" value="相减" />
				<input type="button" name="" onclick="ride()" value="相乘" />
				<input type="button" name="" onclick="divide()" value="相除" />
			</div><p>
			<div class ='box_result'>
				结果:&nbsp;&nbsp;
				<input type='text' class='result' value="">
			</div>

			<script type="text/javascript">
				var num1 = document.querySelector('.num1')
				var num2 = document.querySelector('.num2')
				var result = document.querySelector('.result')
				
				function add(){
					if(isNaN(Number(num1.value)) || isNaN(Number(num2.value))){
						alert("请输入数字")
					} else {
						result.value = +num1.value + +num2.value
						console.log(result.value)
					}
				}
				
				function sub() {
					if(isNaN(Number(num1.value)) || isNaN(Number(num2.value))){
						alert("请输入数字")
					} else{
						result.value = num1.value - num2.value;
						console.log(result.value)
					}
				}
				
				function ride() {
					if(isNaN(Number(num1.value)) || isNaN(Number(num2.value))){
						alert("请输入数字")
					} else {
						result.value = num1.value * num2.value;
						console.log(result.value)
					}
				}
				
				function divide() {
					if(isNaN(Number(num1.value)) || isNaN(Number(num2.value))){
						alert("请输入数字")
					} else {
						if (num2.value != 0){
							result.value = num1.value / num2.value;
							console.log(result.value)
						} else {
							alert('除数不能为0')
						}
					}
				}
			</script>
	</body>
</html>