js制作简易计算器

╰+哭是因爲堅強的太久メ 2023-06-06 10:50 81阅读 0赞

制作能进行加减乘除的简易计算器，主要是练习动态注册事件。因以练习为主，所以包含了较多基础方法。

**效果图**

![20191011122912532.gif][]

**代码**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>简易计算器</title>
    		<script type="text/javascript">
    			window.onload = function(){ 
    				document.onclick = function(){ 
    					var ipts = document.getElementsByTagName("input");
    					for (var i = 0; i < ipts.length; i++) { //得到值和符号
    						if (ipts[i].type == "text") { 
    							switch (i){ 
    								case 0:
    									num1 = ipts[i].value;
    									num1 = Number(num1);
    									break;
    								case 1:
    									opt = ipts[i].value;
    									break;
    								case 2:
    									num2 = ipts[i].value;
    									num2 = Number(num2);
    									break;
    							}
    						}
    					}
    					var res;//结果
    					switch (opt){ //通过得到的值和符号进行计算
    						case "+":
    							res = num1 + num2;
    							break;
    						case "-":
    							res = num1 - num2;
    							break;
    						case "*":
    							res = num1 * num2;
    							break;
    						case "/":
    							res = num1 / num2;
    							break;
    					}
    					
    					var r = document.getElementById("result");
    					r.value = res;
    				}	
    			}
    		</script>
    	</head>
    	<body>
    		<input type="text">
    		<input type="text">
    		<input type="text">=
    		<input type="text" id="result">
    		<input type="button" value="计算" id="btn">
    	</body>
    </html>

[20191011122912532.gif]: /images/20230601/8424643f6eb24f0db008272629c77d71.png

发表评论取消回复

表情：

评论列表（有 0 条评论，81人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML+CSS+JavaScript制作简易计算器

一运行效果图 ![a80d38fb4b3f4962be0e809829fb51a6.png][]二代码 <!DOCTYPE html> <htm

亦凉/ 2024年02月05日 12:40/ 0 赞/ 52 阅读

相关通过VUE制作简易计算器

> <!DOCTYPE html> > <html lang="en"> > <head> > <meta charset="UTF-8

绝地灬酷狼/ 2023年10月11日 19:39/ 0 赞/ 52 阅读

相关利用python制作简易四则计算器

以下代码仅仅是实现了在输入框内输入数字与运算符进行计算，使用按钮进行输入的功能由于时间问题尚未开发出来，稍后有时间会继续开发的，未完待续… from tkinter

分手后的思念是犯贱/ 2023年07月05日 10:22/ 0 赞/ 136 阅读

相关 js制作简易计算器

制作能进行加减乘除的简易计算器，主要是练习动态注册事件。因以练习为主，所以包含了较多基础方法。效果图 ![20191011122912532.gif][] 代码

╰+哭是因爲堅強的太久メ/ 2023年06月06日 10:50/ 0 赞/ 82 阅读

相关利用原生javascript制作简易计算器

第一步：利用html构建好计算器的大概形状样式 <table> <tr> <td colspan="4" ><input i

港控/mmm°/ 2022年11月25日 11:43/ 0 赞/ 218 阅读

相关 js制作简单计算器

在学校学习过程中，老师总是让我们做各种各样小案例(demo)。但是我们在做的过程，总会遇到一些问题，会使我们绞尽脑汁。那让我们一起来看看这个案例吧！先看看效果 ![在

电玩女神/ 2022年11月12日 01:45/ 0 赞/ 216 阅读

相关 java制作简易计算器

1.首先思考一下制作计算器需要哪些Swing组件，下面列出一些制作计算器的一些常用组件： JFrame Jpanel JButton JTextField 2.选用布局管理

忘是亡心i/ 2022年07月15日 11:07/ 0 赞/ 253 阅读

相关 JS实现简易网页计算器

js实现简易计算器。计算器的布局不像表格那么公正对称，所以布局这块相对比较繁琐，但是也可以通过这来练习一下CSS。一、实现功能 1. 完成计算器的加减乘除的基本计算功能

女爷i/ 2022年05月17日 10:52/ 0 赞/ 329 阅读

相关利用JavaScript制作一个简易计算器

在学习javascript过程中，利用了标签和标签，制作了一个简单的计算器。 function jia()\{ var n1 =doc

拼搏现实的明天。/ 2022年05月13日 22:35/ 0 赞/ 269 阅读

相关 JavaScript初学入门（JS打印9*9乘法表，JS制作简易计算器）

目录网页的三部分组成： Java和JavaScript的关系： JavaScript的三种使用方式： Js的5种输出方式： Js的语法初始： js中值的

柔光的暖阳◎/ 2021年10月18日 16:24/ 0 赞/ 175 阅读