网页版计算器

最新推荐文章于 2024-07-02 17:35:34 发布

永恒的狼牙

最新推荐文章于 2024-07-02 17:35:34 发布

阅读量2k

点赞数

分类专栏： JavaWeb 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_43117449/article/details/88950240

版权

JavaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>js计算器</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
/*设置div样式*/
#math{
text-align: center;
margin: auto;
margin-top: 100px;
border: solid 1px;
border-radius: 10px;
width: 300px;
height: 400px;
}
/*设置文本框*/
#num{
width: 270px;
height: 40px;
margin-top: 20px;
}
/*设置按钮样式*/
input[type=button]{
border: solid 1px orange;
border-radius: 10px;
width: 60px;
height: 60px;
margin: 5px;
margin-top: 16px;
font-size: 30px;
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
//声明函数
function operNum(num){
//获取文本框
var inp=document.getElementById("num");
//使用switch进行判断
switch (num){
case "=":
inp.value=eval(inp.value);
break;
case "C":
inp.value="";
break;
default:
inp.value=inp.value+num;
break;
}
}
</script>
</head>
<body>
<div id="math">
<input type="text" name="num" id="num" value="" /><br />
<input type="button" id="" value="1"
"operNum(this.value)"/>
<input type="button" id="" value="2"
"operNum(this.value)"/>
<input type="button" id="" value="3"
"operNum(this.value)"/>
<input type="button" id="" value="4"
"operNum(this.value)"/><br />
<input type="button" id="" value="5"
"operNum(this.value)"/>
<input type="button" id="" value="6"
"operNum(this.value)"/>
<input type="button" id="" value="7"
"operNum(this.value)"/>
<input type="button" id="" value="8"
"operNum(this.value)"/><br />
<input type="button" id="" value="9"
"operNum(this.value)"/>
<input type="button" id="" value="0"
"operNum(this.value)"/>
<input type="button" id="" value="+"
"operNum(this.value)"/>
<input type="button" id="" value="-"
"operNum(this.value)"/><br />
<input type="button" id="" value="*"
"operNum(this.value)"/>
<input type="button" id="" value="/"
"operNum(this.value)"/>
<input type="button" id="" value="C"
"operNum(this.value)"/>
<input type="button" id="" value="="
"operNum(this.value)"/>
</div>
</body>
</html>

在这里插入图片描述