JavaScript——简易计算器实现及代码

weixin_52714017

已于 2023-07-26 23:07:52 修改

阅读量1k

点赞数

文章标签： javascript 前端 html

于 2023-07-26 23:03:15 首次发布

本文链接：https://blog.csdn.net/weixin_52714017/article/details/131949242

版权

全代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .inputClass{
        width:210px;
        height:50px;
        }
        .buttonClass{
        width:50px;
        height:50px;
        }
    </style>
</head>
<body>
<div>
    <input class="inputClass" type="text" value="" placeholder="无内容" id="num"/>
</div>
<div>
    <input class="buttonClass" type="button" value="1" onclick="dianji(this)" id="bt_1"/>
    <input class="buttonClass" type="button" value="2" onclick="dianji(this)" id="bt_2"/>
    <input class="buttonClass" type="button" value="3" onclick="dianji(this)" id="bt_3"/>
    <input class="buttonClass" type="button" value="+" onclick="dianji(this)" id="bt_add"/>
    <br>
    <input class="buttonClass" type="button" value="4" onclick="dianji(this)" id="bt_4"/>
    <input class="buttonClass" type="button" value="5" onclick="dianji(this)" id="bt_5"/>
    <input class="buttonClass" type="button" value="6" onclick="dianji(this)" id="bt_6"/>
    <input class="buttonClass" type="button" value="×" onclick="dianji(this)" id="bt_mul"/>
    <br>
    <input  class="buttonClass" type="button" value="7" onclick="dianji(this)" id="bt_7"/>
    <input class="buttonClass" type="button" value="8" onclick="dianji(this)" id="bt_8"/>
    <input class="buttonClass" type="button" value="9" onclick="dianji(this)" id="bt_9"/>
    <input class="buttonClass" type="button" value="÷" onclick="dianji(this)" id="bt_div"/>
    <br>
    <input class="buttonClass" type="button" value="0" onclick="dianji(this)" id="bt_0"/>
    <input class="buttonClass" type="button" value="-" onclick="dianji(this)" id="bt_sub"/>
    <input class="buttonClass" type="button" value="=" onclick="deng(this)" id="bt_eq"/>
    <input class="buttonClass" type="button" value="清除" onclick="clear_1(this)" id="bt_cle"/>

</div>
<script>
            function dianji(eee){
               var num=document.getElementById('num');
				num.value=num.value+eee.value;
}
			function deng(){
				var num=document.getElementById('num');
				var shu=num.value;
				var shu = shu.replace(/×/g, '*')
				var shu = shu.replace(/÷/g, '/')
				num.value=eval(shu);
			}
			function clear_1(){
			var num=document.getElementById('num');
			num.value=null;
			}
</script>
</body>
</html>

思路：

1.定义按钮

onclick事件：

（1）点击“点击文本”，会显示Ooops!

this.innerHTM ：当前标签文本

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

（2）点击“点击文本”，调用changetext()函数

<h1 οnclick="changetext(this)">点击文本!</h1> changetext(this)：当前标签内容


function changetext(id){
	id.innerHTML="Ooops!";
}

<h1 onclick="changetext(this)">点击文本!</h1>

2.点击内容显示至输入框

获取输入框的值定义var num=document.getElementById('num') 然后 num.value

获取输入的值 eee.value

function dianji(eee){
               var num=document.getElementById('num');
				num.value=num.value+eee.value;
}

输入框的值=输入框的值+获取输入的值（+作为字符串拼接）

3.使运算生效

定义“=”的方法

function deng(){
var num=document.getElementById('num'); 定义num对象
var shu=num.value; 定义并获取num的值
var shu = shu.replace(/×/g, '*')
var shu = shu.replace(/÷/g, '/')

replace（替换前的值，替换后的值）

/×/g正则表达式：表示所有的x替换为*

num.value=eval(shu); 立即计算num的值
}

eval()函数是一种接受字符串作为参数，并且可以将接受的字符串转换成js表达式并且立即执行该表达式。

定义“清除的方法”

function clear_1(){
var num=document.getElementById('num');
num.value=null;
}

使num值为空即可。

function deng(){
				var num=document.getElementById('num');
				var shu=num.value;
				var shu = shu.replace(/×/g, '*')
				var shu = shu.replace(/÷/g, '/')
				num.value=eval(shu);
			}
			function clear_1(){
			var num=document.getElementById('num');
			num.value=null;
			}

weixin_52714017

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JavaScript——简易计算器实现及代码

h1 onclick="changetext(this)">点击文本!获取输入框的值定义var num=document.getElementById('num') 然后 num.value。输入框的值=输入框的值+获取输入的值（+作为字符串拼接）replace（替换前的值，替换后的值）
复制链接

扫一扫