js简单实现计算器+数组类

最新推荐文章于 2022-07-09 05:00:00 发布
最新推荐文章于 2022-07-09 05:00:00 发布
阅读量553 收藏 1
点赞数 1
分类专栏： HTML+CSS+JS 文章标签： js javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_xy999/article/details/104867440
版权

文章目录

js简单实现计算器

先来看效果：
在这里插入图片描述
按键功能和普通的计算器相同，%是取余运算（模运算）。

实现计算器时用到的新知识：

  • 设置输入框只读，不能输入：加上属性 readonly=“readonly”
  • js函数的写法：function 函数名(参数名){函数体} ，因为js变量关键字只有var，所以参数不用写var
  • html的每一个标签可以看做一个类，在函数中获得标签对象用 document.getElementById(“标签id”) ，当然也可以把标签对象当做参数传入，标签调用这些函数，只需要在标签中添加属性：οnclick=“test(this)” ，（点击时调用test这个函数，把自己当做参数传进去）
  • 把字符串当做一条指令的一部分执行：调用方法eval(字符串)即可。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<style type="text/css">
			#showid{
				border:solid 1px;
				border-radius: 10px;
				width: 18.75rem;
				text-align: center;
				margin: auto;
				margin-top: 80px;
			}
			input[type=text]{
				margin-top: 10px;
				width: 240px;
				height: 80px;
				font-size: 30px;
				font-weight: bold;
			}
			input[type=button]{
				width:50px;
				height:50px;
				margin: 5px;
				font-size: 30px;
				font-weight: bold;
			}
		</style>
		<script type="text/javascript">
			/* 声明函数 */
			function test(btn){
				var num = btn.value;
				switch(num){
					case "=":
						document.getElementById("inp").value = eval(document.getElementById("inp").value);
						break;
					case "c":
						document.getElementById("inp").value = "";
						break;
					case "del":
						var len = document.getElementById("inp").value.length;
						document.getElementById("inp").value = document.getElementById("inp").value.substr(0,len-1);
						break;
					default:
						document.getElementById("inp").value = document.getElementById("inp").value+num;
						break;
				}
			}
			/* 调用函数 */
			//test();
			
		</script>
	</head>
	<body>
		<div id="showid">
			<input type="text" name="" id="inp" value="" readonly="readonly" /><br/>
			<input type="button" name="" id="" value="c" onclick="test(this)"/>
			<input type="button" name="" id="" value="*" onclick="test(this)"/>
			<input type="button" name="" id="" value="/" onclick="test(this)"/>
			<input type="button" name="" id="" value="del" onclick="test(this)"/>
			<br/>
			<input type="button" name="" id="" value="7" onclick="test(this)"/>
			<input type="button" name="" id="" value="8" onclick="test(this)"/>
			<input type="button" name="" id="" value="9" onclick="test(this)"/>
			<input type="button" name="" id="" value="-" onclick="test(this)"/>
			<br/>
			<input type="button" name="" id="" value="4" onclick="test(this)"/>
			<input type="button" name="" id="" value="5" onclick="test(this)"/>
			<input type="button" name="" id="" value="6" onclick="test(this)"/>
			<input type="button" name="" id="" value="+" onclick="test(this)"/>
			<br/>
			<input type="button" name="" id="" value="1" onclick="test(this)"/>
			<input type="button" name="" id="" value="2" onclick="test(this)"/>
			<input type="button" name="" id="" value="3" onclick="test(this)"/>
			<input type="button" name="" id="" value="=" onclick="test(this)"/>
			<br/>
			<input type="button" name="" id="" value="%" onclick="test(this)"/>
			<input type="button" name="" id="" value="0" onclick="test(this)"/>
			<input type="button" name="" id="" value="." onclick="test(this)"/>
			<input type="button" name="" id="" value="=" onclick="test(this)"/>
			<br/>
		</div>
	</body>
</html>

常用数组操作方法

concat() :合并

作用：合并两个或多个数组。
用法：

var arr = [1,"abc","张三","12"];
var b = ["王二狗","大伟哥"];
var c = "js";
var d = arr.concat(b,c);

join():转化字符串

作用：将数组的内容合并成一个字符串并返回，用传入的符号做分隔符，默认是“，”
用法：

var b = arr.join("-");

pop() : 移除

作用：移除数组最后一个元素并返回值
用法：

var b = arr.pop();

push():添加

作用：在数组最后添加一个元素，并返回长度，元素可以是另一个数组（看做一个元素，即原数组长度加1）。
用法：

var b = arr.push("最后一个");

reverse() : 反转

作用：把数组的元素逆序排列。
用法：

var b = arr.reverse();

shift():移除

作用：移除数组第一个元素并返回值。
用法：

var b = arr.shift();

unshift():添加

作用：添加一个元素在数组第一个位置并返回长度，其他元素一次向后移一位。
用法：

var b = arr.unshift("第一个");

sort():排序

作用：将数组的元素按从小到大排序。
用法：

var b = arr.sort();

splice():移除

作用：移除指定位置的元素，如果需要，可以替换成指定的元素。
用法：

var b = arr.splice(1,3,"a");//"a"参数不写则仅移除下标1，2，3位置的元素
聪明的王二狗
关注
专栏目录
简易计算器 （函数指针数组的简单运用）
lexiaoyao_0000的博客
06-22 643
问题描述： 编写程序，实现两个数的加、减、乘、除、取模运算。 问题分析： 方法一：(传统办法) 1、编写菜单； 2、while 循环让程序循环计算； 3、switch 选择调用函数； 4、打印结果。 方法二：（使用函数指针数组） 1、定义函数指针数组，存入要调用的函数； 2、打印菜单； 3、while 循环让程序循环进行； 4、用户进行选择； 5、判断选择是否正确，若正...
实现一个计算器类，有变量可以存储用户的表达式，有变量可以存放计算结果，有接收用户输入的方法，有清空表达式的方法，有计算表达式的方法，有返回结果的方法。（整数运算，一个算式中只有一个运算符号）
最新发布
qq_18509089的博客
10-16 107
实现一个计算器类，有变量可以存储用户的表达式，有变量可以存放计算结果，有接收用户输入的方法，有清空表达式的方法，有计算表达式的方法，有返回结果的方法。（整数运算，一个算式中只有一个运算符号）
多态实现计算器类
Bit_Dong的博客
07-09 320
多态是C++面向对象三大特性之一多态分为两类 静态多态：函数重载和运算符重载属于静态多态，复用函数名 动态多态：派生类和虚函数实现运行时多态静态多态和动态多态区别: 静态多态的函数地址早绑定-----编译阶段确定函数地址 动态多态的函数地址晚绑定-----运行阶段确定函数地址分别利用普通写法和多态技术，设计实现两个操作数进行运算的计算器类...
数组计算器
god_libl的博客
11-18 603
对于比较大的数据，特别大（long long数据类型已经溢出的时候）此时使用数组计算器是个较好的选择，它把一个非常大的数据的每一位保存在数组的每一个元素中，这样一来，就不会存在数组越界的问题了。 source #include <stdio.h> #include <string.h> char s1[20]; char s2[20]; int a[20]; int b[20]; int c[20]; int main () { int i; char ch; while
c语言表达式计算器数组,表达式计算器！！！
weixin_32921593的博客
05-18 147
该楼层疑似违规已被系统折叠隐藏此楼查看此楼//函数：检查输入是否合法void Health(char in[]){int k;int i;int a=0,b=0;//health1if(strlen(in)>60) {printf("ERROR!!!输入长度请勿超过60\n");// 队长错误判断在这！！！exit(0);}//health2for(i=0;in[i]!='\0';i++)...
javascript实现简易的计算器
11-21
这个简单的JavaScript计算器的实现展示了如何结合HTML、CSS和JavaScript来创建交互式的网页应用。虽然它不包含复杂的错误处理或高级功能，但对于初学者来说，这是一个很好的实践项目，可以帮助理解网页动态行为的...
用JS写的简单的计算器实现代码
10-29
总结来说，编写一个简单的JavaScript计算器涉及到类的设计、数据管理、计算逻辑以及与用户的交互。通过理解这些概念并实践，我们可以逐步构建出一个功能完善的Web计算器。在实际的面试中，这样的题目不仅考察了...
javascript编写简易计算器
10-19
在本教程中，我们将探讨如何使用JavaScript来创建一个简单的计算器。这个计算器的界面由HTML构建，样式由CSS定义，而核心逻辑则通过JavaScript实现。以下是我们将深入讨论的知识点： 1. **HTML 结构**： - `<div>`...
Vue.js实现价格计算器功能
10-19
Vue.js是一个轻量级的JavaScript库，它提供了一种声明式的数据绑定和组件化的开发方式，使得构建用户界面变得更加简单高效。下面，我们将深入解析实现价格计算器的代码，包括HTML结构、CSS样式以及Vue.js的...
JS制作简易计算器的实例代码
10-15
总的来说，制作一个简易的JavaScript计算器涉及HTML布局、CSS样式和JavaScript事件处理及计算逻辑。通过理解这些基本概念，你可以构建出自己的计算器，并根据需要扩展其功能，比如支持更多运算符、括号表达式、错误...
用javascript写的一个计算器
12-02
Array.prototype.remove=function(index) { if(isNaN(index)||index>this.length){return false;} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[index]) { this[n++]=this[i] } } this.length-=1 } function commonMath(){ //类初始化 this.init = function(){ this.tmp = ''; this.debug = 0; this.output = ''; this.method = ''; this.sign = 1;//0:-;1:+ this.register = Array();//寄存器 }
JavaScript实现一个简易的计算器实例代码
05-14
JavaScript实现一个简易的计算器实例代码 JavaScript实现一个简易的计算器实例代码
利用函数指针数组写计算器
Shangxingya的博客
02-14 598
数组是存放相同数据类型元素的存储空间，指针是存放数据元素的地址的。 那我们要把很多函数的地址放入一个数组，该如何定义呢？ int (*p[10])(int x, int y)={0}; p先和[]结合是数组，数组的内容是int (*)()的函数指针。 具体应用： 先展示普通计算器： #include<stdio.h> #include<math.h> void menu...
使用JS对数组进行排序,设置计时器和计数器
Li Xue NH He 20151022
11-20 912
使用JS中的sort()方法对数组进行降序排列，并输出。
VS下实现“计算器”的代码编写（使用函数指针数组的实现）
鱼木戈大
05-21 1417
这里的“计算器”仅可以进行加减乘除基本运算。代码如下：#include &lt;stdio.h&gt; #include &lt;Windows.h&gt; #pragma warning(disable:4996) //函数指针数组实现 计算器 int my_add(int x, int y)//加法运算 { return x + y; } int my_sub(int x, int y)/...
【经典算法】:用字符串模拟计算器的生成
阳光心态，健康人生的博客
09-29 1619
前言一般的制作计算器都会比较不智能，会有很严格的输入格式 在这里，我做了一个简化，使的即使没有严格地输入输出格式，也能够达到计算器的效果比如说：下面这些例子 这里就是用字符串读入了一行，然后对字符串进行处理，得到了最后结果，那么是如何做到的呢？思路读入一行之后，前面有部分全是数字，这样他就为操作数1，后面有部分全为数字，这样就是操作数2 中间有符号为+ - * / 之一，这样也能把它存起来这样
JS写一个简单的 计算器。字符串 转数组，截取数组转数字。提取计算符号
weixin_41404049的博客
05-19 233
如题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
数组-简单计算器
WchStrife的博客
12-06 1582
数组的初步使用——计算器 args.length 测量数组的长度 System.exit（-1） 非正常退出 Double.parseDouble 强制将char型转化为Double型的对象 public class TestArgs { public static void main(String[] args){ if(args.length<3){ System
numpy科学计算器库入门7 array分割
zy_小轩的博客
03-19 166
import numpy as np arr1 = np.arange(12).reshape((3,4)) print(arr1) [[ 0 1 2 3] [ 4 5 6 7] [ 8 9 10 11]] arr2,arr3 = np.split(arr1,2,axis=1)#水平方向分割 分成两份 等分 print(arr2) print(arr3) [[0 1] ...
Java基础：简易计算器实现及数组求和
在这个Java基础计算器示例中，我们首先了解了如何创建一个简单的命令行计算器程序，它利用Java的基本输入/输出功能以及数组操作来执行基本的数学计算。主要关注以下几个关键知识点： 1. **类与方法**： - `class ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值