JavaScript 实现简单计算器功能

作者:纸飞机时间:2026-10-23 13:57:28浏览:356

本文介绍了如何使用 JavaScript 实现一个简单的前端计算器。通过结合 HTML 构建界面、CSS 进行样式布局以及 JavaScript 处理点击事件,展示了一个包含数字输入、运算操作及清除功能的基础计算器实现方案。

JavaScript 实现简单计算器功能

本文分享了一个使用 JavaScript 编写的简易计算器代码示例,供读者参考学习。

首先实现计算器的基本功能,具体界面效果如图所示。

JavaScript 实现简单计算器功能

接下来展示实现该计算器所需的逻辑代码。


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>计算器</title>
 <!--设置样式-->
 <style>
 .showdiv{
 text-align: center;
 margin:auto;/*设置居中*/
 border: solid 1px;
 width: 400px;
 height: 500px;
 border-radius: 10px;/*设置边框角度*/
 }
 input[type="text"]{
 margin-top: 10px;
 width: 380px;
 height: 40px;
 font-size: 40px;
 }
 input[type="button"]{
 margin: 10px;
 margin-top: 20px;
 width: 60px;
 height: 80px;
 font-size: 40px;
 font-weight: bold;
 }
 </style>
 <!--设置js代码-->
 <script type="text/javascript">
 /*将按钮的值赋值给输入框*/
 function num(btn){
 //把不能为零去掉
 if(document.getElementById("inp").value.match("除数")){
 document.getElementById("inp").value = "";
 }
 //获取button按钮的value
 var num = btn.value;
 console.log(num +" " +typeof(num))
 //将值赋值给text文本框
 switch(num){
 case "c":
 document.getElementById("inp").value = "";
 break;
 case "=":
 if(document.getElementById("inp").value.match("/")){
 if(document.getElementById("inp").value.split("/")[1] == "0"){
 document.getElementById("inp").value = "除数不能为零";
 }else{
 document.getElementById("inp").value = eval(document.getElementById("inp").value);
 }
 break;
 }else{
 document.getElementById("inp").value = eval(document.getElementById("inp").value);
 break;
 }
 default: 
 document.getElementById("inp").value = document.getElementById("inp").value+num;
 break;
 }
 }
 </script>
 </head>
 <body>
 <div class = "showdiv">
 <input type="text" name="" id="inp" value="" readonly="readonly"/><br />
 <input type="button" name="" id="" value="0" onclick="num(this)"/>
 <input type="button" name="" id="" value="1" onclick="num(this)"/>
 <input type="button" name="" id="" value="2" onclick="num(this)"/>
 <input type="button" name="" id="" value="3" onclick="num(this)"/><br />
 <input type="button" name="" id="" value="4" onclick="num(this)"/>
 <input type="button" name="" id="" value="5" onclick="num(this)"/>
 <input type="button" name="" id="" value="6" onclick="num(this)"/>
 <input type="button" name="" id="" value="7" onclick="num(this)"/><br />
 <input type="button" name="" id="" value="8" onclick="num(this)"/>
 <input type="button" name="" id="" value="9" onclick="num(this)"/>
 <input type="button" name="" id="" value="+" onclick="num(this)"/>
 <input type="button" name="" id="" value="-" onclick="num(this)"/><br />
 <input type="button" name="" id="" value="*" onclick="num(this)"/>
 <input type="button" name="" id="" value="/" onclick="num(this)"/>
 <input type="button" name="" id="" value="=" onclick="num(this)"/>
 <input type="button" name="" id="" value="c" onclick="num(this)"/>
 </div>
 </body>
</html>

如需了解更多关于计算器的相关内容,可查阅《计算器专题》,获取更多精彩资源。

以上就是本文的全部内容,希望能为读者的学习带来帮助,同时也欢迎大家继续支持本站。

作者最新文章