本文实例为大家分享了JavaScript实现简单计算器的具体代码,供大家参考,具体内容如下
1.实现基本计算器功能,如图
2.逻辑代码
- <!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>