JavaScript---Js四则运算计算器

鞠婧祎yamy

于 2023-05-05 15:25:33 发布

阅读量530

点赞数 1

分类专栏： #JavaScript 文章标签： javascript css html

本文链接：https://blog.csdn.net/Huangpiao04/article/details/130507747

版权

#JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图

代码实现

1.方法一 ---- document

html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<style>
	form {
		position: fixed;
		left: 45%;
	}

	h1 {
		text-align: center;
	}

	.button {
		width: 40px;
		height: 40px;
	}

	#text {
		width: 230px;
		height: 30px;
		margin-left: -30px;
	}
</style>

<body>
	<h1>Js四则运算计算器</h1>
	<form>
		<input type="text" name="text" id="text" /><br /><br />
		<input type="button" value="0" onclick="counter(0)" class="button" />
		<input type="button" value="1" onclick="counter(1)" class="button" />
		<input type="button" value="2" onclick="counter(2)" class="button" />
		<input type="button" value="3" onclick="counter(3)" class="button" /><br /><br />
		<input type="button" value="4" onclick="counter(4)" class="button" />
		<input type="button" value="5" onclick="counter(5)" class="button" />
		<input type="button" value="6" onclick="counter(6)" class="button" />
		<input type="button" value="7" onclick="counter(7)" class="button" /><br /><br />
		<input type="button" value="8" onclick="counter(8)" class="button" />
		<input type="button" value="9" onclick="counter(9)" class="button" />
		<input type="button" value="+" onclick="counter('+')" class="button" />
		<input type="button" value="-" onclick="counter('-')" class="button" /><br /><br />
		<input type="button" value="*" onclick="counter('*')" class="button" />
		<input type="button" value="/" onclick="counter('/')" class="button" />
		<input type="button" value="=" id="dengyu" onclick="counter('=')" class="button" />
		<input type="button" value="退格" onclick="counter('tuige')" class="button" />
		<input type="reset" value="重置" onclick="counter('reset')" class="button" />
	</form>
	<script src="js/按钮点击计算器.js"></script>
</body>

</html>

function counter(s){
    var input=document.getElementById("text");
    if(s=='=')
    {   var t;
        t = input.value;
        var num = eval(input.value);      /* 把文本框里面的值用eval函数计算后 赋值给 num */
        input.value = t + "=" + num;
    }
    else if(s=='reset')
    {
        input.value=" ";
    }
    else if(s=='tuige')
    {
        var str = input.value.substr(0, input.value.length -1);   /* 用函数subster从0开始截取到字符长度-1赋值给str */
        input.value = str;
    }
    else input.value = input.value+s;               /*直接连接 */

}

2.方法二 ---this

html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<style>
	form {
		position: fixed;
		left: 45%;
	}

	h1 {
		text-align: center;
	}

	.button {
		width: 40px;
		height: 40px;
	}

	#text {
		width: 230px;
		height: 30px;
		margin-left: -30px;
	}
</style>

<body>
	<h1>Js四则运算计算器</h1>
	<form>
		<input type="text" name="text" id="text" /><br /><br />
		<input type="button" value="0" onclick="join(this)" class="button" />
		<input type="button" value="1" onclick="join(this)" class="button" />
		<input type="button" value="2" onclick="join(this)" class="button" />
		<input type="button" value="3" onclick="join(this)" class="button" /><br /><br />
		<input type="button" value="4" onclick="join(this)" class="button" />
		<input type="button" value="5" onclick="join(this)" class="button" />
		<input type="button" value="6" onclick="join(this)" class="button" />
		<input type="button" value="7" onclick="join(this)" class="button" /><br /><br />
		<input type="button" value="8" onclick="join(this)" class="button" />
		<input type="button" value="9" onclick="join(this)" class="button" />
		<input type="button" value="+" onclick="join(this)" class="button" />
		<input type="button" value="-" onclick="join(this)" class="button" /><br /><br />
		<input type="button" value="*" onclick="join(this)" class="button" />
		<input type="button" value="/" onclick="join(this)" class="button" />
		<input type="button" value="=" id="dengyu" onclick="computer()" class="button" />
		<input type="button" value="退格" onclick="tuige()" class="button" />
		<input type="reset" value="重置" class="button" />
	</form>
	<script src="js/this类型.js"></script>
</body>

</html>

function join(btn){
	//this获取当前被点击的按钮的 value的属性值
	var txt=document.getElementById("text");  //找文本框的对象
	//获取当前被点击的按钮的value属性值加在文本框中的字符串后面--字符串的拼接
	txt.value=txt.value+btn.value; //"+"是用来拼接 
}
//用来计算
function computer(){
	var txt=document.getElementById("text");  //找文本框的对象
	txt.value = txt.value +"="+ eval(txt.value);//充当的是变量不要加引号，加了引号就是字符串常量
	//把点击到文本框的值与后面点击的值拼接，在和=后面通过eval计算出的值进行拼接，输出一个全新的串覆盖之前的串
}
function tuige(){
	//截取从下标从0开始，到length-1(最后一个字符)
	var txt=document.getElementById("text");  //找文本框的对象
	var str = txt.value.substr(0, txt.value.length -1);   /* 用函数subster从第一个字符开始截取到字符长度-1赋值给str */
    txt.value = str;
}