用HTML实现简易版计算器

news2024/11/19 6:18:25

计算器功能:实现了加减乘除、清零、回退、四则运算、幂运算、根式运算等等。

运行结果如下:

引入的图片:back.png

8247d30ca94f45b5b9ddbedd027dd8b6.png

HTML部分:用table表格添加计算器的按键,给每个按键设置一个相应的单击事件,点击一个按键后在div块里显示相应的内容。

	<div>
		<span id="result"></span>
	</div>
	<table border="1px"  width="200px" height="300px">
		<tbody align="center">
			<tr>
				<td width="50px" onclick="leftBracket()">(</td>
				<td width="50px" onclick="rightBracket()">)</td>
				<td width="50px" onclick="ppow()">^</td>
				<td width="50px" onclick="psqrt()">√</td>
			</tr>
			<tr>
				<td onclick="c()">C</td>
				<td onclick="po('%')">%</td>
				<td width="50px" onclick="backspace()"><img src="img/back.png" width="25px"/></td>
				<td onclick="po('÷')">÷</td>
			</tr>
			<tr>
				<td onclick="pn(7)">7</td>
				<td onclick="pn(8)">8</td>
				<td onclick="pn(9)">9</td>
				<td onclick="po('×')">×</td>
			</tr>
			<tr>
				<td onclick="pn(4)">4</td>
				<td onclick="pn(5)">5</td>
				<td onclick="pn(6)">6</td>
				<td onclick="po('-')">-</td>
			</tr>
			<tr>
				<td onclick="pn(1)">1</td>
				<td onclick="pn(2)">2</td>
				<td onclick="pn(3)">3</td>
				<td onclick="po('+')">+</td>
			</tr>
			<tr>
				<td onclick="pn('00')">00</td>
				<td onclick="pn(0)">0</td>
				<td onclick="pn('.')">.</td>
				<td onclick="equals1()">=</td>
			</tr>
		</tbody>
	</table>

 CSS部分:通过绝对定位将所需显示的内容定位到div块右下角。注意:绝对定位是根据有定位的第一个先祖标签进行定位的,但div块并不需要移动位置,因此这里给div添加相对定位;div块边框需要与table边框对齐,table的总宽度为200px,div块的左右边框占2px,所以width需要设置为198px。

    div {
        width: 198px;
        height: 50px;
        border: 1px solid black;
        border-bottom: none;
        position: relative;
    }
    
    #result {
        position: absolute;
        right: 5px;
        bottom: 5px;
    }

JavaScript部分:通过innerTHML属性添加 / 获取所需计算的内容,再调用eval方法将获取到的内容转换为js代码进行计算。

"%":计算器中的"%"一般为百分数,在进行运算时需要将"%",换为"*0.01"进行运算。

回退:通过innerTHML属性得到字符串,将最后的字符去掉,再重新赋值给innerTHML属性。

幂运算:用split方法将"^"前后分开,再查找进行此次幂运算的表达式,如数值、带括号的表达式等等。前半部分从字符串最后往前找,而后半部分则从前往后找,将查找匹配表达式的过程封装到leftOperation(r)方法和rightOperation(r)方法中,找到这些匹配的表达式后将此表达式返回给变量leftstr和rightstr,将要参与幂运算的leftstr和rightstr跟Math.pow方法进行幂运算的拼接即拼接成字符串:"Math.pow(leftstr, rightstr)"的格式赋值给num,通过substring方法将"^"左右部分的字符串去掉进行幂运算的相关部分后再将num拼接到原"^"位置。"^"操作符可能不止一个,用递归调用的方式在pow方法中再调用pow方法直到没有"^"为止。

根式运算:对根号后面的数或表达式进行根式运算,用indexof方法判断有无根号,如果有根号通过split方法将根号前后的数或表达式分开,将根号后面的数或表达式通过rightOperation(r)方法单独取出赋值给rightstr,将此rightstr跟Math.sqrt方法进行字符串拼接即拼接成:"Math.sqrt(rightstr)"的格式后赋值给num,最后通过substring方法将根号后面部分的字符串去掉进行根式运算的相关部分后再将num拼接到原根号位置。同幂运算一样,根号也可能有多个所以要用到递归。

在数学中括号、根号等前面的乘号可以省略,所以要在输入左括号、根号时做判断,判断前面的是数字还是运算符,如果是数字或"%",则在输入左括号、根号前加一个乘号,如果是运算符则直接输入。

//div块元素
var result;
//是否进行了运算
var equal = false;
window.onload = function(){
	result  = document.getElementById("result");
	result.innerHTML = "";
}
//如果进行了运算,下次输入数前进行清零
function isEqual(){
	if (equal){
		c();
		equal = false;
	}
}

function pn(n){
	isEqual();
	result.innerHTML += n;
}

function po(o){
	result.innerHTML += o;
	equal = false;
}

function leftBracket(){
	isEqual();
	var r = result.innerHTML;
	var c = r.charAt(r.length - 1);
	if ("0" <= c && c <= "9" || c == "%"){
		po("×");
	}
	result.innerHTML += "(";
}

function rightBracket(){
	isEqual();
	result.innerHTML += ")"
}

function ppow(){
	isEqual();
	result.innerHTML += "^"
}

function psqrt(){
	isEqual();
	var r = result.innerHTML;
	var c = r.charAt(r.length - 1);
	if ("0" <= c && c <= "9" || c == "%"){
		po("×");
	}
	result.innerHTML += "√";
}

function c(){
	result.innerHTML = "";
}

function backspace(){
	var r = result.innerHTML;
	result.innerHTML = r.substr(0,r.length - 1);
	isEqual();
}

function equals1(){
	equal = true;
	var r = result.innerHTML;
	//将特殊字符进行替换
	r = r.replace(/×/g,"*");
	r = r.replace(/÷/g,"/");
	r = r.replace(/%/g,"*0.01");
	try{
        r = pow(r);
	    r = sqrt(r);
		result.innerHTML=eval(r);
	}catch(e){
		result.innerHTML="表达式不正确";
	}
}

function pow(r){
	var arr = r.split("^");
	if (arr.length == 1){
		return r;
	}
	var leftstr = leftOperation(arr[0]);
	var rightstr = rightOperation(arr[1]);
	var num =  "Math.pow(" + leftstr + "," + rightstr + ")";
	var leftr = arr[0].substring(0,arr[0].length - leftstr.length);
	var rightr = arr[1].substring(rightstr.length,arr[1].length);
	var r = leftr + num + rightr;
	return pow(r);
}

function sqrt(r){
	if (r.indexOf("√") == -1){
		return r;
	}
	var arr = r.split("√");
	var rightstr = rightOperation(arr[1]);
	var num = "Math.sqrt(" + rightstr + ")";
	var leftr = arr[0];
	var rightr = arr[1].substring(rightstr.length,arr[1].length);
	var r =leftr + num + rightr;
	return sqrt(r);
}

function leftOperation(r){
	var leftBracket = 0;
	var rightBracket = 0;
	var i;
	for (i = r.length - 1; i >=0; i--){
		var c = r.charAt(i);
		if (c == ")"){
			rightBracket++;
		} else if (leftBracket == rightBracket && c >="0" && c <= "9"){
			break;
		} else if (c == "("){
			leftBracket++;
		}
	}
	return r.substring(i);
}

function rightOperation(r){
	var leftBracket = 0;
	var rightBracket = 0;
	var i;
	for (i = 0; i <  r.length; i++){
		var c = r.charAt(i);
		if (c == "("){
			leftBracket++;
		} else if (leftBracket == rightBracket && c >="0" && c <= "9"){
			break;
		} else if (c == ")"){
			rightBracket++;
		}
	}
	return r.substring(0,i+1);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409285.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RuoYi-Vue——图标使用

使用若依的小伙伴们&#xff0c;是否有遇到找图标的烦恼。若依框架里图标分两种&#xff0c; 1.用在表格中的图标&#xff1a; 2.用在菜单及个人信息的图标&#xff1a; 下面我就针对这两种图标给大家总结一下。 1.表格图标&#xff08;ElementUI图标Icon&#xff09; 若依的表…

【JavaScript】五个常用功能/案例:判断特定结尾字符串 | 获取指定字符串 | 颜色字符串转换 | 字符串转驼峰格式 | 简易购物车

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总…

layui数据表格的使用(前端和后端)

数据表格&#xff08;纯前端&#xff09; 快速使用 首先需要引入layui的css和js <link rel"stylesheet" href"../static/layui/css/layui.css"> <script src"../static/layui/layui.js" charset"utf-8"></script>…

如何搭建vue框架-1

提示&#xff1a;前端新人&#xff0c;初来乍到&#xff0c;若文章写的不好大家多包涵。 文章目录前言一、vue是什么&#xff1f;二、ElementUI是什么&#xff1f;三、搭建前的准备四、安装步骤1.安装webpack2.安装vue-cli3.通过vue-cli构建项目4.启动项目5.其他总结前言 基于…

element-ui表格编辑

前言&#xff1a; 准备&#xff1a; element-uivue3vscode 实现步骤&#xff1a; 数据标定打开激活编辑保存 1. 设定需要编辑的表格单元格是否编辑标识 在请求后台表格数据时进行一个二次包装&#xff0c;如果后端已经处理则不需要在进行包装&#xff08;此处包装是否编辑…

手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】

前端的那些基本标签&#x1f353;&#x1f353;模板字符串&#x1f353;&#x1f353;类继承&#x1f353;&#x1f353;参数解析器&#x1f353;&#x1f353;生成页码&#x1f353;&#x1f353;js中哪些操作会造成内存泄漏?html页面的骨架&#xff0c;相当于人的骨头&#…

react router6.x官方DEMO

Tutorial v6.4.2 | React Router 初始化项目 import React from "react"; import ReactDOM from "react-dom/client"; import {createBrowserRouter,RouterProvider,Route, } from "react-router-dom"; import "./index.css";const …

用CSS设置颜色、背景和图像效果

&#x1f4dc;个人简介 ⭐️个人主页&#xff1a;微风洋洋&#x1f64b;‍♂️ &#x1f351;博客领域&#xff1a;编程基础&#x1f4a1;,后端&#x1f4a1;,大数据,信息安全 &#x1f345;写作风格&#xff1a;干货,干货,还是tmd的干货 &#x1f338;精选专栏&#xff1a;【J…

js数组常用方法(19种)|你会的到底有多少呢?

一、改变原数组的方法 1.push&#xff08;&#xff09; 末尾添加数据 语法: 数组名.push(数据) 作用: 就是往数组末尾添加数据 返回值: 就是这个数组的长度 //push var arr [10, 20, 30, 40] res arr.push(20) console.log(arr);//[10,20,30,40,20] console.log(res);//52. …

【Cesium】使用TLE轨道两行数计算轨道信息,并生成CZML格式文件

TLE为轨道两行数&#xff0c;简单的说是用两行数字表示轨道的相关信息&#xff0c;本文即用轨道两行数来计算任一时刻卫星的位置信息和速度信息&#xff0c;并生成CZML文件能够读取的格式 1、satellite.js库简介 简而言之&#xff0c;satellite.js库可以根据TLE轨道两行数&…

vue 项目适配笔记本1920*1080 125%缩放

前言 在台式机上开发pc端项目时&#xff0c;由于是1920*1080的分辨路和100缩放&#xff0c;看起来是没有问题。在笔记本上有问题 因为现在很多14寸的笔记本&#xff0c;出厂默认就是125%或150%的显示。导致很多时候我们的项目&#xff0c;自己开发的时候都是按照100%比例来开发…

Vue使用Serial连接串口

本来只是随手记录一下&#xff0c;发现看的人多了&#xff0c;想着还是修复一下bug吧&#xff0c;供各位看官指正 2022-10-24本次更新: 1、修复在不支持Serial的情况下&#xff0c;控制台报错 2022-09-19本次更新: 1、修复了传输数据接收分隔的情况(增加数据缓存) 2、修复串口连…

【中兴】web训练营~一文带你走进前端 | 百图制作

&#x1f4e2;作者简介&#xff1a;物联网领域创作者&#xff0c;&#x1f3c5;阿里云专家博主&#x1f3c5; &#x1f3c5;华为云享专家&#x1f3c5; ✒️个人主页&#xff1a;Choice~ &#x1f310;格言&#xff1a;可正因为难&#xff0c;才有价值&#xff01;&#x1f536…

Linux 使用Nginx部署web(vue、react)项目

前言 本文基于&#xff1a;操作系统 CentOS 7.6 使用的工具&#xff1a;Xshell7、Xftp7 1.安装所需依赖 安装gcc yum -y install gcc安装pcre、pcre-devel yum -y install pcre pcre-devel安装zlib、zlib-devel yum install -y zlib zlib-devel安装openssl、openssl-dev…

【uni-app】点击左上角返回按钮,弹出弹窗或者是携带参数返回上一页

目录 1、弹出弹窗 2、把这一页的数据带回到上一页&#xff08;获取下一页的数据 &#xff09; 3、跳转页面并携带参数&#xff0c;接受页获取参数 1、弹出弹窗 当我返回上一页的时候需要做一个判断是否需要保存 onBackPress 只支持APP和H5 但不支持小程序 &#xff0c;可以…

Java web—访问http://localhost:8080/xx/xx.jsp报404错误问题

由于我们在eclipse ee中把项目部署在web端经常会出现报404错误。 原因为&#xff1a; 404状态码是一种http状态码&#xff0c;其意思是&#xff1a; 所请求的页面不存在或已被删除。通俗的讲就是当用户输入了错误的链接时&#xff0c;返回的页面。 以下描述几种情况&#xff1a…

IDEA从零到精通(24)之lombok插件的安装与使用

文章目录作者简介引言导航概述安装插件使用小结导航热门专栏推荐作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的重要性…

【Vue】 组件封装

目录1 组件封装1.1 全局注册1.2 局部注册1.2.1 命名1.2.2 引用组件1.2.2.1 传统写法1.2.2.2 setup1.2.2.3 easycom1.3 父子组件间的数据传递1.3.1 子组件 data() 中设置数据1.3.2 父组件通过 prop 将数据传递给子组件1.3.3 子组件不能直接修改 prop 中的值1.3.4 子组件通过 emi…

Pinia中action使用详解

actions的使用 动作相当于组件中的方法。它们可以使用actionsin 属性进行定义。 并且在pinia中的action既可以有同步函数也可以有异步函数。 在actions中可以通过this访问该仓库所有实例 export const useUsers defineStore(users,{state:()>{userData:null},actions:{a…

【SpringMVC】集成Web、MVC执行流程、数据响应、数据交互

文章目录前言一.Spring集成Web二.对于SpringMVC的理解三.MVC执行流程&#xff08;&#x1f3f3;️‍&#x1f308;&#xff09;1.组件解析2.RequestMapping四.SpringMVC数据响应页面跳转回写数据五.SpringMVC获得请求数据前言 SpringMVC确实很麻烦&#xff0c;零碎的点太多 一…