计算器输入js方法

古城微笑少年丶 2022-03-12 07:11 140阅读 0赞

简单的样式，不带计算功能，只有清空、删除、确定获取输入值

--------------------

结果样式：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]  
1、css代码

.num-btn { 
    				text-align: center;
    				width: 28%;
    				height: 16%;
    				margin: 2%;
    				background: #009688;
    				border: 1px solid #009688;
    				border-radius: 15px;
    				color: #FFFFFF;
    				font-size: 1.6em;
    				float: left;
    			}
    			
    			.num-btn-ok { 
    				width: 92%;
    			}
    			
    			.input-div { 
    				padding: 3%;
    			}

2、html代码

<div>请输入编号：</div>
    		<div class="input-div">
    			<input type="text" name="numshow" id="numshow" placeholder="0" autocomplete="off">
    		</div>
    		<div class="num-btn" onclick="onclicknum(1)"> 1 </div>
    		<div class="num-btn" onclick="onclicknum(2)"> 2 </div>
    		<div class="num-btn" onclick="onclicknum(3)"> 3 </div>
    		<div class="num-btn" onclick="onclicknum(4)"> 4 </div>
    		<div class="num-btn" onclick="onclicknum(5)"> 5 </div>
    		<div class="num-btn" onclick="onclicknum(6)"> 6 </div>
    		<div class="num-btn" onclick="onclicknum(7)"> 7 </div>
    		<div class="num-btn" onclick="onclicknum(8)"> 8 </div>
    		<div class="num-btn" onclick="onclicknum(9)"> 9 </div>
    		<div class="num-btn" onclick="onclicknum(0)"> 0 </div>
    		<div class="num-btn" onclick="onclickclear()"> 清空 </div>
    		<div class="num-btn" onclick="onclickdelone()"> 删除 </div>
    		<div class="num-btn num-btn-ok" onclick="onclickresult()"> 确定 </div>

3.js代码

//结果
    	var numresult;
    	//输入字符
    	var str;
    
    //点击数字
    	function onclicknum(nums) { 
    		str = document.getElementById("numshow");
    		str.value = str.value + nums;
    	}
    //清空
    	function onclickclear() { 
    		str = document.getElementById("numshow");
    		str.value = "";
    
    	}
    //删除
    	function onclickdelone() { 
    		str = document.getElementById("numshow");
    		str.value = str.value.replace(/.$/, '');
    	}
    //结果
    	function onclickresult() { 
    		str = document.getElementById("numshow");
    		console.log(str.value);
    	}

注：想添加加减乘除方法，可以使用eval（）函数。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]: /images/20220312/3d3138e62dce4b689b6ba523f0deafb9.png