js简单计算器

最新推荐文章于 2023-04-02 14:42:37 发布

long_w66

最新推荐文章于 2023-04-02 14:42:37 发布

阅读量283

点赞数 2

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

本文链接：https://blog.csdn.net/m0_56286631/article/details/115458781

版权

js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端界面

1 篇文章 0 订阅

订阅专栏

JS布局一个简易计算器，能够进行简单的加减乘除

一、思路

点击数字或符号，将其值放入input文本框中；
利用eval()方法对文本框的数据进行计算
处理“.”“符号”重复的问题；
处理0开头的问题

二、代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计算器</title>

		<style>
			*{
		            padding:0;
		            margin:0;
		        }
		        table{
		            width:400px;
					height: 500px;
		            margin:auto;
		            border:1px solid bisque;
		            border-collapse: collapse;/*列与列的间距*/
		        }
		       td {
		           width: 100px;
		           border: 1px  bisque;
		       }
		        td input{
		            width:98.7%;
		            height:100px;
		            outline: none;
		            text-align: right;
		            font-size: 30px;
		            background: burlywood;
		        }
		        td button{
		            width:100%;
		            height:80px;
		            font-size: 22px;
		            background: blanchedalmond;
		        }
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="4"><input id="text" type="text" value="0" /></td>
			</tr>
			<tr>
				<td colspan="2"><button class="btn">del</button></td>
				<td colspan="2"><button class="btn">c</button></td>
			</tr>
			<tr>
				<td><button class="btn">9</button></td>
				<td><button class="btn">8</button></td>
				<td><button class="btn">7</button></td>
				<td><button class="btn">+</button></td>
			</tr>
			<tr>
				<td><button class="btn">6</button></td>
				<td><button class="btn">5</button></td>
				<td><button class="btn">4</button></td>
				<td><button class="btn">-</button></td>
			</tr>
			<tr>
				<td><button class="btn">3</button></td>
				<td><button class="btn">2</button></td>
				<td><button class="btn">1</button></td>
				<td><button class="btn">*</button></td>
			</tr>
			<tr>
				<td><button class="btn">0</button></td>
				<td><button class="btn">.</button></td>
				<td><button class="btn">=</button></td>
				<td><button class="btn">/</button></td>
			</tr>
		</table>

		<script>
			//1.获取计算器各按钮对象
			var buttonal = document.getElementsByClassName("btn");
			//2.获取表单显示对象
			var textal = document.getElementById("text");
			//3.绑定按钮单击事件
			for (var i = 0; i < buttonal.length; i++) {
				buttonal[i].onclick = addclick;
			}

			//4.单击事件方法
			function addclick() {
				//输入为数字
				if (!isNaN(this.innerHTML) || "." == this.innerHTML) {
					//小数点不能重复
					if ("." == this.innerHTML) {
						if ("." != textal.value.charAt(textal.value.length - 1)) {
							textal.value += this.innerHTML;
						}
						return;
					}

					//除数不能为0
					if (0 == this.innerHTML) { //charAt() 方法可返回指定位置的字符。
						if ("/" == textal.value.charAt(textal.value.length - 1)) {
							textal.value = "不能除以0";
							return;
						}
					}
					//判断是不是初次输入
					if ("0" == textal.value) {
						textal.value = this.innerHTML;
					} else {
						textal.value += this.innerHTML;
					}
				} else { //非数字
					switch (this.innerHTML) {
						case "+":
							symol(this);
							break;
						case "-":
							symol(this);
							break;
						case "/":
							symol(this);
							break;
						case "*":
							symol(this);
							break;
						case "=":
							var result = eval(textal.value);
							textal.value = result;
							break;
						case "del": //功能：从后往前一个一个的减数字
							//substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
							if (1 != textal.value.length) {
								textal.value = textal.value.substr(0, textal.value.length - 1);
							} else {
								textal.value = "0";
							}
							break;
						case "c": //功能表单值变为0，计算器初始化
							textal.value = "0";
							break;
					}
				}
			}

			function symol(sy) {
				//判断上一次输入的是否为"+" "-" "*" "/",是则取本次符号,删除上次符号
				var str = textal.value.charAt(textal.value.length - 1); //charAt() 方法可返回指定位置的字符。
				if ("+" == str || "-" == str || "*" == str || "/" == str) {
					textal.value = textal.value.substr(0, textal.value.length - 1) + sy.innerHTML; //substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
				} else {
					textal.value += sy.innerHTML;
				}
			}
		</script>

	</body>
</html>

三、计算器样式

在这里插入图片描述

long_w66

关注

2
点赞
踩
5

收藏

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

js简单计算器用JS布局一个简易计算器，能够进行简单的加减乘除一、思路点击数字或符号，将其值放入input文本框中；利用eval()方法对文本框的数据进行计算处理“.”“符号”重复的问题；处理0开头的问题二、代码块<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>计算器</title> <style> *{
复制链接

扫一扫