JS简易计算器

最新推荐文章于 2023-10-14 13:34:36 发布

王妖怪2109

最新推荐文章于 2023-10-14 13:34:36 发布

阅读量166

点赞数 2

文章标签： javascript html5

本文链接：https://blog.csdn.net/qwYxK/article/details/119145435

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

使用JS编写一个简易计算器

一、使用步骤
总结

一、使用步骤

1.代码块

js代码如下（示例）：

  <script type="text/javascript">
    // 加法函数
	function add()
	{
		// 获取文本框中的数字
		var txt1 = document.getElementById("num1"); //获取元素对象
		var txt2 = document.getElementById("num2");
		// 测试能不能获取框中的值
		//alert(txt1.value+" "+txt2.value); // 获取元素对象的value属性(变量)
		//alert(txt1.id+" "+txt2.id); // 获取元素对象的id属性

		// 求和
		// 文本框中的值时字符串类型
		// Number(字符串):转字符串为数值
		var he = Number(txt1.value)+Number(txt2.value);
		//alert(he);
		// 获取span,设置结果
		var span = document.getElementById("res");
		// 通过span对象设置span的内容
		// 将he设置到span的内部内容中
		span.innerHTML = he;

		// 获取文本框对象,设置文本框的值
		var txtres = document.getElementById("txtRes");
		//alert(txtres);
		txtres.value = he;

	}
	function sub(){
		var txt1 = document.getElementById("num1"); //获取元素对象
		var txt2 = document.getElementById("num2");
		var cha = Number(txt1.value)-Number(txt2.value);
		var span = document.getElementById("res");
		span.innerHTML = cha;
		var txtres = document.getElementById("txtRes");
		txtres.value = cha;
	}
		function mult(){
		var txt1 = document.getElementById("num1"); //获取元素对象
		var txt2 = document.getElementById("num2");
		var ji = Number(txt1.value)*Number(txt2.value);
		var span = document.getElementById("res");
		span.innerHTML = ji;
		var txtres = document.getElementById("txtRes");
		txtres.value = ji;
	}
		function div(){
		var txt1 = document.getElementById("num1"); //获取元素对象
		var txt2 = document.getElementById("num2");
		var shang = Number(txt1.value)/Number(txt2.value);
		var span = document.getElementById("res");
		span.innerHTML = shang;
		var txtres = document.getElementById("txtRes");
		txtres.value = shang;
	}
  </script>

2.样式代码

代码如下（示例）：

<style type="text/css">
	span{
		border:2px solid red;
		display:inline-block;
		width:80px;
		height:30px;
	}
  </style>

3.body代码

代码如下（示例）：

<body>
  <h3>计算器</h3>
  <form>
	<p>第一个数:<input style="width:100px; height:50px" type="text" id="num1"/></p>
	<p>第二个数:<input style="width:100px; height:50px" type="text" id="num2"/></p>
	<p>
		<input style="width:100px; height:50px" type="button" value="+" onclick="add()"/>
		<input style="width:100px; height:50px" type="button" value="-" onclick="sub()"/>
		<input style="width:100px; height:50px" type="button" value="*" onclick="mult()"/>
		<input style="width:100px; height:50px" type="button" value="/" onclick="div()"/>
	</p>
	<p>
		结果:<span  id="res"></span>
			 <input style="width:100px; height:50px" type="text" id="txtRes"/>
	</p>
  </form>
 </body>

该处使用的url网络请求的数据。

总结

提示：这里对文章进行总结：
例如：写的不好，本身就是一个新手，不介意的拿去。

王妖怪2109

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS简易计算器

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档使用JS编写一个简易计算器一、使用步骤1.代码块2.样式代码3.body代码总结一、使用步骤1.代码块js代码如下（示例）： <script type="text/javascript"> // 加法函数 function add() { // 获取文本框中的数字 var txt1 = document.getElementById("num1"); //获取元素对象 var txt2 = d
复制链接

扫一扫