JavaScript-计算器

作者：Gausst松鼠会 | 2024-05-31 05:20:21

踩

JavaScript-计算器

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>计算器</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box{
			width: 700px;
			height: 200px;
			margin: 100px auto;
			border: 1px solid #ccc;
		}
		.box .box1{
			width: 700px;
			height: 20px;
			margin: 20px auto;
			/*margin-bottom: 0px;*/
			margin-top: 50px;
		}
		.box .box1 span{
			margin: 20px;
			
		}
		.box .box2{
			width: 700px;
			height: 100px;
			/*margin-top: 0px;*/
		}
		#deng{
			width: 20px;
			height: 20px;
		}
	</style>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		window.onload=function(){
			var txt0;
			$("xuan").onchange=function(){
				//this指的是直接调用这个函数的对象
				txt0=this.children[this.value].innerHTML;
			}
			$("deng").onclick=function(){
				//从网页上得到的任何数据都是字符串(String),故需要进行类型转换;
				var txt1=parseInt($("option1").value);
				var txt2=parseInt($("opt2").value);
				// var opt=$("xuan").value;
				// var txt0=$("xuan").children[opt].innerHTML;
				// alert("txt1="+txt1+"txt0="+txt0+"txt2="+txt2);
				var txt;
				if(txt0)
				{
					switch(txt0)
					{
						case '+':txt = txt1+txt2;break;
						case '-':txt = txt1-txt2;break;
						case '*':txt = txt1*txt2;break;
						case '/':txt = txt1/txt2;break;
						default:break;
					}
					$("result").value=txt;
				}
				else{
					alert("请输入运算符！");
				}
			}
		}
	</script>
</head>
<body>
	<div class="box">
		<div class="box1">
			<span>输入操作数1</span>
			<span>输如操作符</span>
			<span>输入操作数2</span>
			<span>等于号</span>
			<span>结果</span>
		</div>
		<div class="box2">
			<input type="text" id="option1" />
			<select name="se" id="xuan">
				<option value="-1">---请选择---</option>
				<option value="1">+</option>
				<option value="2">-</option>
				<option value="3">*</option>
				<option value="4">/</option>
			</select>
			<input type="text" id="opt2" />
			<input type="button" id="deng" value="=" />
			<input type="text" id="result" />
		</div>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/650536