原生js实现计算机

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量118 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42596234/article/details/104969415
版权

好久没有更新了。
通过原生js实现计算机
这是html文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>calculator</title>
		<link rel="stylesheet" type="text/css" href="calc.css"/>
		<script src="index.js"></script>
	</head>
	<body>
		<div id="a">
			<div id="b">
			<input type="text" name="" id="answer" readonly="readonly"/><br>
			<input type="text" name="" id="answer2" readonly="readonly"/>
			</div>
			<div id="c">
			<input type="button" name="" id="fs1" value="C" onclick="clean()"/>
			<input type="button" name="" id="fs2" value="<" onclick="del()"/>
			<input type="button" name="" id="fs8" value="+/-" onclick="jj()"/>
			<input type="button" name="" id="fs6" value="÷" onclick="chu()"/>
			</div>
			<div id="d">
				<input type="button" value="7" id="bs1" onclick="press(7)">
				<input type="button" value="8" id="bs2" onclick="press(8)">
				<input type="button" value="9" id="bs3" onclick="press(9)">
				<input type="button" name="" id="fs5" value="x" onclick="cheng()"/>
			</div>
			<div id="e">
				<input type="button" name="" id="bs4" value="4" onclick="press(4)"/>
				<input type="button" name="" id="bs5" value="5" onclick="press(5)"/>
				<input type="button" name="" id="bs6" value="6" onclick="press(6)"/>
				<input type="button" name="" id="fs4" value="-" onclick="jian()"/>
			</div>
			<div id="f">
				<input type="button" name="" id="bs7" value="1" onclick="press(1)"/>
				<input type="button" name="" id="bs8" value="2" onclick="press(2)"/>
				<input type="button" name="" id="bs9" value="3" onclick="press(3)"/>
				<input type="button" name="" id="fs3" value="+" onclick="jia()"/>
			</div>
			<div id="g">
				<input type="button" name="" id="fs7" value="%" onclick="pressbf()"/>
				<input type="button" name="" id="bs10" value="0" onclick="presszero()"/>
				<input type="button" name="" id="fs9" value="." onclick="pressdian()"/>
				<input type="button" name="" id="fs10" value="＝" onclick="dy()"/>
			</div>
		</div>
	</body>
</html>

这是样式文档

body{
	margin: 0;
	padding: 0;
}
#a{
	width: 200px;
    background-color: #000;
	margin: 20px auto;
	text-align: center;
	border: #000 1px solid;
	color: #fff;
}
#b #answer,#answer2{
	margin-top: 10px;
	font-size: 20px;
	background: transparent;
	height: 30px;
	width: 190px;
	border: #000 solid 1px;
	outline: none;
	color: #fff;
}
#c input{
	padding: 10px;
	margin: 3px;
	width: 40px;
	height: 40px;
	outline: none;
}
#d input{
	padding: 10px;
	margin: 3px;
	width: 40px;
	height: 40px;
	outline: none;
}
#e input{
	padding: 10px;
	margin: 3px;
	width: 40px;
	height: 40px;
	outline: none;
}
#f input{
	padding: 10px;
	margin: 3px;
	width: 40px;
	height: 40px;
	outline: none;
}
#g input{
	padding: 10px;
	margin: 3px;
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	outline: none;
}
#bs1,#bs2,#bs3,#bs4,#bs5,#bs6,#bs7,#bs8,#bs9,#bs10{
	font-size: 14px;
	font-weight: bold;
	background: #333;
	color: #fff;
	border: #000 solid 1px;
	border-radius: 90px;
}
#fs1,#fs2,#fs7,#fs8{
	font-size: 16px;
	color: #000;
	font-weight: bold;
	background: #ccc;
	border: #ccc solid 1px;
	border-radius: 90px;
}
#fs3,#fs4,#fs5,#fs6,#fs10{
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	background: orange;
	border: orange solid 1px;
	border-radius: 90px;
}
#fs9{
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	background: #333;
	border: #000 solid 1px;
	border-radius: 90px;
}

这里是js文档

// str 存储的为运算表达式 answer显示的为运算式或者点击等号后的最终结果 answer2为实时运算结果
function dy() {
    if (str.substr(str.length - 1, 1) == "+" || str.substr(str.length - 1, 1) == "*" || str.substr(str.length - 1, 1) == "-" || str.substr(str.length - 1, 1) == "/") {
        str=str.substring(0,str.length-1);
        answer2.value=Number(eval(str));
        str=answer2.value;
        answer.value = str;
        answer2.value="";
    }
    else{
        str=answer2.value;
        answer.value = str;
        answer2.value="";
    }
    // 函数为点击等号 第一行显示运算结果第二行清空
    
}
function clean() {
    // 点击c清空存储用字符串以及第一第二行显示内容
    str="";
    answer.value=str;
    answer2.value = str;
}
function jj(){
    if(answer2.value!=""){
        if(answer2.value>0)
        answer2.value="-"+eval(str);
        else{
            str=answer2.value;
            str=str.substr(1,str.length-1);
            answer2.value=str;
        }
    }
    
}
var str="";
// 用于存放要计算的表达式
function chu() {
    if (str === "") {
        answer2.value ="";
    } else {
        // 使用截取表达式最后一位如果为运算符那么再次点击运算符时用新的运算符将其替换
        if (str.substr(str.length - 1, 1) == "+" || str.substr(str.length - 1, 1) == "*" || str.substr(str.length - 1, 1) == "-" || str.substr(str.length - 1, 1) == "/") {
            str = str.substr(0, str.length - 1) + "/";
            answer.value = str;
        } else {
            // 否则正常输入
            str = str + "/"
            answer.value = str;
        }
    }
}
function cheng() {
    // 与同理chu
    if (str === "") {
        answer2.value = "";
    } else {
        if (str.substr(str.length - 1, 1) == "+" || str.substr(str.length - 1, 1) == "*" || str.substr(str.length - 1, 1) == "-" || str.substr(str.length - 1, 1) == "/") {
            str = str.substr(0, str.length - 1) + "*";
            answer.value = str;
        } else {
            str = str + "*"
            answer.value = str;
        }
    }
}
function jia() {
    // 第一位是+-时有意义 允许输入
    if (str === "") {
        str += "+";
        answer.value = str;
    } else {
        // 与同理chu
        if (str.substr(str.length - 1, 1) == "+" || str.substr(str.length - 1, 1) == "*" || str.substr(str.length - 1, 1) == "-" || str.substr(str.length - 1, 1) == "/") {
            str = str.substr(0, str.length - 1) + "+";
            answer.value = str;
        } else {
            str = str + "+"
            answer.value = str;
        }
    }
}
function jian() {
    // 与jia同理
    if (str === "") {
        str += "-";
        answer.value = str;
    } else {
        if (str.substr(str.length - 1, 1) == "+" || str.substr(str.length - 1, 1) == "*" || str.substr(str.length - 1, 1) == "-" || str.substr(str.length - 1, 1) == "/") {
            str = str.substr(0, str.length - 1) + "-";
            answer.value = str;
        } else {
            str = str + "-"
            answer.value = str;
        }
    }
}
var str1;
function del() {
    // 点击删除键时删除表达式最后一位刷线显示内容
    str = str.substring(0,str.length-1);
    answer.value = str;
    if (str.substr(str.length - 1, 1) == "+" || str.substr(str.length - 1, 1) == "*" || str.substr(str.length - 1, 1) == "-" || str.substr(str.length - 1, 1) == "/") {
        str1=str.substring(0,str.length-1);
        answer2.value=Number(eval(str1));
        }
    else
    answer2.value=Number(eval(str));
}
function press(y) {
    // 点击数字在表达上添加数字 刷新显示内容
    str += y;
    answer.value = str;
    // 下面为判断表达式里面有没有运算符如果有点击数字时（也就是改变表达式时）实时在第二行显示运算结果 当字符串中没有运算符号时第二行不进行操作
    //if (str.indexOf("+") !== -1 || str.indexOf("-") !== -1 || str.indexOf("*") !== -1 || str.indexOf("/") !== -1) {
        answer2.value = Number(eval(str));
    //}
}
var e="",f="",g="",h="",j="",k="";
// 用于存储下方运算符位置
function pressdian() {
    if(str==""){
        // 当表达式为空时用户点击“点” 那么帮用户添加一个0 形成"0."的效果
        str += "0"+".";
        answer.value = str;
    } else {
        // 表达式不为空时则需要进行判断
        if (str.substr(str.length - 1, 1) == "+" || str.substr(str.length - 1, 1) == "*" || str.substr(str.length - 1, 1) == "-" || str.substr(str.length - 1, 1) == "/") {
            //当表达式最后一位是运算符时那么 用户点击“点” 那么帮用户添加一个0 形成"0."的效果
            str += "0" + ".";
            answer.value = str;
        }else{
            if (str.substr(str.length - 1, 1)=="."){
                // 当最后一位是点时不允许再输入一个点此时无操作
            }else{  
                h = str.lastIndexOf("+");
                e = str.lastIndexOf("-");
                f = str.lastIndexOf("*");
                g = str.lastIndexOf("/");
                j = Math.max(h, e, f, g);
                // 搜索表达式返回各个运算符号的位置取最大的一个也就是最右边的一个
                k = str.lastIndexOf(".");
                // 搜索上一个点的位置
                if (k=="-1"){
                    // 此时整个表达式没有出现点 允许输入点 
                    str += ".";
                    answer.value = str;
                } else {
                    if(k>j){
                        
                    }else{
                        str += ".";
                        answer.value = str;
                    }
                }        
            }
        }
    }
}
function presszero() {
    if(str===""){
        answer.value = 0;
        // 为用户显示一个0
    }else{
        if (str.substr(str.length - 1, 1) == "+" || str.substr(str.length - 1, 1) == "*" || str.substr(str.length - 1, 1) == "-" || str.substr(str.length - 1, 1) == "/")
         {
        answer.value = str+"0";    
        // 仅显示不存储(不修改str)
        }else{
            // 允许正常输入
            str += 0;
            answer.value =str;
            answer2.value = Number(eval(str));
        }
    } 
}
// ----------------------------------------------------------------------------

var a = "", b = "", c = "", d = "", i = "";
function pressbf() {
    // (1) 如果表达式为数字 那么表达式除100并记录
    if (!isNaN(str)) {
        str = ""+str / "100";
        answer.value = str;
        answer2.value = str;
    }
    else {
    // (2)如果表达式最后一位是运算符这时是没有意义的我们不进行任何操作
        if (str.substr(str.length - 1, 1) == "+" || str.substr(str.length - 1, 1) == "*" || str.substr(str.length - 1, 1) == "-" || str.substr(str.length - 1, 1) == "/") {
        } else {
    // (3)如果接下来实现第二个功能99+6*999变为 99+6*9.99 我们需要知道最后一个运算符的位置才可以继续
            a = str.lastIndexOf("+");
            b = str.lastIndexOf("-");
            c = str.lastIndexOf("*");
            d = str.lastIndexOf("/");
            i = Math.max(a, b, c, d);
            // 取最大值即为最右面的运算符位置
            str = str.substr(0, i + 1) + (str.substr(i + 1, str.length - i) / 100);
            // 截取表达式第一位到运算符那一位连接上"运算符后面的数字/100" 存入新表达式
            answer.value = str;
            // 显示结果
            answer2.value = eval(str);
            // 功能成功实现
        }
    }
}

运行结果：
作者：张卜

张卜bu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现简单计算机,原生js实现计算机
weixin_33437929的博客
07-30 1480
好久没有更新了。通过原生js实现计算机这是html文档calculator这是样式文档body{margin: 0;padding: 0;}#a{width: 200px;background-color: #000;margin: 20px auto;text-align: center;border: #000 1px solid;color: #fff;}#b #answer,#answer...
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
Javascript制作简易计算器并实现其功能
qq_64314976的博客
08-18 5241
使用JS的函数功能，制作一个简易的计算器，包括加、减、乘、除的功能。并使用函数传参的方式完成计算器的功能。输入任意操作数，通过四则运算计算出结果，使用函数传参的方式完成计算器的功能。......
贪吃蛇游戏 - 原生JavaScript实现
04-18
总的来说，通过原生JavaScript实现贪吃蛇游戏，不仅可以锻炼你的编程技巧，也能让你深入理解JavaScript的事件处理、DOM操作、Canvas绘图以及时间管理等核心概念。这是一个很好的实践项目，无论你是初学者还是经验...
原生JavaScript制作计算器
10-21
本文给大家汇总了2个原生JavaScript实现的计算器功能的代码，一个简单一个稍微复杂些，小伙伴们根据自己的需要来选择吧
原生js实现3d旋转
11-08
在这个场景中，我们将主要探讨如何利用原生JavaScript实现3D旋转，而不依赖于任何库如Three.js。 3D旋转的核心在于理解三个主要的坐标轴——X、Y和Z轴，以及欧拉角（Euler Angles）、旋转矩阵（Rotation Matrices）...
原生js实现的单机五子棋小游戏
05-19
总的来说，通过原生JavaScript实现五子棋小游戏是一个很好的实践项目，可以帮助开发者提升DOM操作、事件处理、逻辑判断等方面的能力。同时，这个项目也提供了一个基础，可以进一步扩展到多人在线对战或更智能的AI...
黑白棋游戏原生js实现源码.zip
12-22
本项目是用原生JavaScript实现的黑白棋游戏，旨在展示JavaScript编程技能以及对HTML和CSS的理解。在这个项目中，开发者通过JavaScript实现了游戏逻辑，而HTML用于构建用户界面，CSS则负责样式设计，使得游戏界面简洁...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 212
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 93
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 876
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Webkit简介以及工作流程
读心悦
07-10 303
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 200
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 87
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 303
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 150
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1265
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
什么是vue的计算属性
weixin_56187723的博客
07-12 158
Vue的计算属性（Computed Properties）是Vue组件中的一个非常强大的功能，它们允许组件基于它们的响应式依赖进行缓存的派生值。只有当相关响应式依赖发生改变时，计算属性才会重新求值。这意味着只要依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算函数。
原生js创建本地文件
07-28
要在原生JavaScript中创建本地文件，你可以使用浏览器的File API。下面是一个简单的示例： ...请记住，由于安全性限制，JavaScript无法直接在用户的计算机上创建本地文件，它只能通过浏览器下载功能来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值