用js实现精美的计算器效果

桃扇骨 2023-05-29 09:28 7阅读 0赞

所有代码如下：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    	<style>
    	.btn-radius { 
    			border-radius: 2px;
    			border: 1px solid #e5e5e5;
    			background: -moz-linear-gradient(top,#f7f7f7,#ebebeb);
    			line-height: 29px;
    			text-align: center;
    			font-weight: bold;
    			color: #666;
    			float: left;
    			margin-left: 11px;
    			margin-top: 11px;
    		}
    	#calcuator { 
            width: 200px;
            height: 315px;
            padding: 10px;
            border: 1px solid #e5e5e5;
            background: #f8f8f8;
            margin: 0px auto;
        }
         
        #calcuator #input-box,#show { 
            margin: 0;
            width: 187px;
            padding: 6px 5px;
    		height: 28px;
            border: 1px solid #e5e5e5;
    		border-radius: 3px;
    		background: #fff;
            text-align: right;
        }
    	#show { 
    		height: 56px;
    		overflow: hidden;
    	} 
        #calcuator #btn-list { 
            width: 200px;
        }
         
        #calcuator #btn-list .btn-radius { 
            text-align: center;
            line-height: 29px;
            float: left;
            margin-left: 11px;
            margin-top: 11px;
            cursor: pointer;
            border: 1px #0CF solid;
        }
         
        #calcuator #btn-list .btn-30 { 
            width: 29px;
            height: 29px;
        }
         
        #calcuator #btn-list .btn-70 { 
            width: 70px;
            height: 29px;
        }
         
        #calcuator #btn-list .clear-marginleft { 
            margin-left: 0;
        }
         
        #calcuator #btn-list .font-14 { 
            font-size: 14px;
        }
         
        #calcuator #btn-list .color-red { 
            color: #ff5050
        }
         
        #calcuator #btn-list .color-blue { 
            color: #00b4ff
        }
    
    
    	</style>
    </head>
    
    <body>
    	<br><br><br><br>
    	<div id="calcuator">
    	<div id="show">
    		<div id="showme"> </div>
    		</div>
    		
    		<input type="text" id="input-box" value="0" size="21" maxlength="20">
    		
    	<div id="btn-list">
    		<div onClick="s('0')" class="btn-30 btn-radius color-red" style="margin-left: 0px;">C
    		</div>
    		<div onClick="operator('opposite')" class="btn-30 btn-radius color-blue">+/-</div>
    		<div onClick="operator('percent')" class="btn-30 btn-radius color-blue">%</div>
    		<div onClick="operator('backspace')" class="btn-70 btn-radius color-red">←</div>
    		<div onClick="a('7')" class="btn-30 btn-radius clear-marginleft">7</div>
    		<div onClick="a('8')" class="btn-30 btn-radius">8</div>
    		<div onClick="a('9')" class="btn-30 btn-radius ">9</div>
    		<div onClick="a('+')" class="btn-30 btn-radius color-blue">+</div>
    		<div onClick="a('-')" class="btn-30 btn-radius color-blue">-</div>
    		<div onClick="a('4')" class="btn-30 btn-radius clear-marginleft">4</div>
    		<div onClick="a('5')" class="btn-30 btn-radius">5</div>
    		<div onClick="a('6')" class="btn-30 btn-radius ">6</div>
    		<div onClick="a('*')" class="btn-30 btn-radius color-blue">×</div>
    		<div onClick="a('/')" class="btn-30 btn-radius color-blue">÷</div>
    		<div onClick="a('1')" class="btn-30 btn-radius clear-marginleft">1</div>
    		<div onClick="a('2')" class="btn-30 btn-radius">2</div>
    		<div onClick="a('3')" class="btn-30 btn-radius ">3</div>
    		<div onClick="operator('pow')" class="btn-30 btn-radius color-blue">x²</div>
    		<div onClick="operator('sqrt')" class="btn-30 btn-radius color-blue">√</div>
    		<div onClick="a('0')" class="btn-70 btn-radius clear-marginleft">0</div>
    		<div onClick="a('.')" class="btn-30 btn-radius">.</div>
    		<div onClick="e()" class="btn-70 btn-radius color-red">=</div>
    	</div>
    </div>
    	<script>
    		input=document.getElementById('input-box');
    		show=document.getElementById('showme');
    		function operator(type) { 
    			switch(type) { 
    				case "backspace":
    					var str = input.value;
    					str=(str!="0")?str:"";
    					str=str.substr(0,str.length-1);
    					str=(str!="")?str:"0";
    					input.value=str;
    					break;
    				case "opposite":
    					input.value=-input.value;
    					break;
    				case "percent":
    				input.value=input.value/100;
    					break;
    				case "pow":
    					input.value=Math.pow(input.value,2);
    					break;
    				case "sqrt":
    					input.value=Math.sqrt(input.value);
    					break;
    			}
    		}
    		function s(v) { 
    			input.value=v;
    		}
    		function a(v) { 
    			if(input.value=='0' && v=='0')
    				input.value='0';
    			else { 
    				if(input.value=='0' && v!='.')
    					input.value=v;
    				else input.value+=v;
    			}
    		}
    		function e() { 
    			try { 
    				if(show.offsetHeight > 50)
    					{ 
    						t=show.innerHTML.indexOf('=<br>');
    						var str=show.innerHTML;
    						str=str.substr(t+5,str.length);
    						show.innerHTML=str;
    					}
    				show.innerHTML += input.value+ '=<br>';
    				s(eval(input.value));
    			}
    			catch(e) { 
    				s('无效输入')
    			}
    		}
    	</script>
    </body>
    </html>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy_size_16_color_FFFFFF_t_70]此文章为本人学习总结，虽非原创，但亦是个人学习成果，供大家学习参考。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191105183318228.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy,size_16,color_FFFFFF,t_70