手动实践：网页计算器

最新推荐文章于 2024-07-29 11:53:27 发布

LAN_victory

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量235

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_57142613/article/details/122384891

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>网页计算器</title>
    </head>
    <body>
    	<p>整数1：<input id="num1" type="text"></p>
    	<p>整数2：<input id="num2" type="text"></p>
    	<p>
    		<input type="button" value="相加" onclick="calc(add)">
    		<input type="button" value="相减" onclick="calc(sub)">
    		<input type="button" value="相乘" onclick="calc(mul)">
    		<input type="button" value="相除" onclick="calc(div)">
    	</p>
    	<p>结果：<input id="result" type="text" readonly></p>

    	<!-- 获取并处理用户输入的数据，完成指定操作的函数调用 -->
    	<script type="text/javascript">
    		function calc(func) {
    			var result = document.getElementById('result');
    			var num1 = parseInt(document.getElementById('num1').value);
    			var num2 = parseInt(document.getElementById('num2').value);
    			if (isNaN(num1) || isNaN(num2)) {
    				alert('请输入数字');
    				return false;
    			}
    			result.value = func(num1, num2);
    		}

    		//实现加、减、乘、除运算
    		function add(num1, num2) {
    			return num1 + num2;
    		}
    		function sub(num1, num2) {
    			return num1 - num2;
    		}
    		function mul(num1, num2) {
    			return num1 * num2;
    		}
    		function div(num1, num2) {
    			if (num2 === 0) {
    				alert('除数不能为0');
    				return '';
    			}
    			return num1 / num2;
    		}
    	</script>
    </body>
</html>