小粉兔简易计算器——一只小巨子

巨巨巨巨巨石啊

已于 2023-08-24 18:49:12 修改

阅读量190

点赞数

文章标签： html css javascript

于 2021-03-20 17:33:21 首次发布

本文链接：https://blog.csdn.net/WWWT_X/article/details/115031435

版权

用HTML+CSS+JS实现一个简易的计算器：

<html>
<head>
<title>小粉兔计算器</title>

  <style>
   form.formtotal{
     background-image:url("file:///C:/Users/86136/Desktop/cute.jpg");
     height:400px;
	 width:400px;
   }
   div.divone{
     float:left;
     height:97%;
	 width:60%;
	 margin:6px;
   }
   input[type="text"]{
      font-size:x-large;
      float:left;
      width:235px; 
      height:50px;
	  border-radius: 13px;
	  background-color:#FFF7FB;
	  outline:none;
   }
   input[type="button"].btnone{
     font-size:large;
	 font-family:"华文行楷";
     width:29%;
	 height:20%;
	 border-radius: 13px;
	 background-color:#FFECF5;
	 margin-top:7px;
	 margin-left:4px;
	 cursor:pointer;
	 outline:none;
   }
   div.divtwo{
     float:right;
     width:34%;
     height:97%;
     margin:6px;
   }
   input[type="button"].backspace{
     font-family:"华文行楷";
	 font-size:x-large;
	 float:left;
	 width:48%;
	 height:50px;
	 border-radius: 13px;
	 background-color:#FFECF5;
	 cursor:pointer;
	 outline:none;
	}
	input[type="button"].delete{
	 font-family:"华文行楷";
	 font-size:x-large;
	 float:right;
	 width:48%;
	 height:50px;
	 border-radius: 13px;
	 background-color:#FFECF5;
	 cursor:pointer;
	 outline:none;
	}
	input[type="button"].btntwo{
	 font-family:"华文行楷";
	 font-size:x-large;
	 width:85%;
	 height:20%;
	 border-radius: 13px;
	 background-color:#FFECF5;
	 margin-top:7px;
     margin-left:10px;
	 cursor:pointer;
	 outline:none;
	}
	input[type="button"]:hover {
	 background-color: #FFECF5;
	 }
  </style>
</head>

<body>
  <form class="formtotal">
  <div class="divone">
    <input type="text" class="txt" id="textshow" /> 
    <input type="button" class="btnone" id="btn" value="1" onclick="caclufunction(this.value)"/>
	<input type="button" class="btnone" id="btn" value="2" onclick="caclufunction(this.value)"/>
	<input type="button" class="btnone" id="btn" value="3" onclick="caclufunction(this.value)"/>
	<input type="button" class="btnone" id="btn" value="4" onclick="caclufunction(this.value)"/>
	<input type="button" class="btnone" id="btn" value="5" onclick="caclufunction(this.value)"/>
	<input type="button" class="btnone" id="btn" value="6" onclick="caclufunction(this.value)"/>
	<input type="button" class="btnone" id="btn" value="7" onclick="caclufunction(this.value)"/>
	<input type="button" class="btnone" id="btn" value="8" onclick="caclufunction(this.value)"/>
	<input type="button" class="btnone" id="btn" value="9" onclick="caclufunction(this.value)"/>
	<input type="button" class="btnone" id="btn" value="0" onclick="caclufunction(this.value)"/>
	<input type="button" class="btnone" id="btn" value="." onclick="caclufunction(this.value)"/>
	<input type="button" class="btnone id="btn" value="="  οnclick="caclufunction(this.value)"/>
  </div>

  <div class="divtwo">
	<input type="button" class="delete" id="btn" value="C" onclick="caclufunction(this.value)"/>
	<input type="button" class="backspace" id="btn" value="back" onclick="caclufunction(this.value)"/>
    <input type="button" class="btntwo" id="btn" value="+" onclick="caclufunction(this.value)"/>
	<input type="button" class="btntwo" id="btn" value="-" onclick="caclufunction(this.value)"/>
	<input type="button" class="btntwo" id="btn" value="*" onclick="caclufunction(this.value)"/>
	<input type="button" class="btntwo" id="btn" value="/" onclick="caclufunction(this.value)"/>
  </div>

  </form>
  <script>

	 function  caclufunction(val){
		var num = document.getElementById("textshow");
		
          switch (val) {

			case "back":
			   num.value=num.value.substring(0,num.value.length-1);
			   break;

            case "=":
                num.value = eval(num.value);
 
                break;
 
            case "C":
                num.value = "";
                break;
 
            default:
                num.value = num.value + val;
                break;
        }}

</script>
</body>
</html>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/0a4acaaebc614eb9b910fca60d2d9df3.png#pic_center)