
[简单计算器]
<style>
.wrapper{
height: 200px;
width: 700px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -350px;
border: 1px solid red;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="wrapper">
<input type="text" id="one">
<select name="cars" >
<option value="1">+</option>
<option value="2">-</option>
<option value="3">*</option>
<option value="4">/</option>
</select>
<input type="text" id="two">
<button>=</button>
<input type="text" id="th">
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
// 给等于号按钮添加点击监听事件
$('button').on('click',function(){
// 获取第一个 input 的值,获取的值默认是字符串,用Number转换为数值;
var one=Number($('#one').val());
//获取下拉框值
var select=$('select').val();
// 获取第一个 input 的值,获取的值默认是字符串,用Number转换为数值;
var two= Number($('#two').val());
// 计算过程
var result='';
if(select==='1'){
result=one+two;
}
else if(select==='2'){
result=one-two;
}
else if(select==='3'){
result=one*two;
}
else{
result=one/two;
}
$('#th').val(result);
})
</script>
网友评论