网页版计算器

最新推荐文章于 2025-08-05 11:04:52 发布

永恒的狼牙

最新推荐文章于 2025-08-05 11:04:52 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_43117449/article/details/88950240

JavaWeb 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简易计算器项目。该计算器具备基本的数学运算功能，包括加、减、乘、除及清屏操作。通过简单的用户界面，用户可以输入数字并进行计算。

<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>

在这里插入图片描述