每天一个jquery插件-做个计算器
做个计算器
额，这里记的笔记是css的display属性与js的eval大法
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做个计算器</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
padding: 0px;
margin: 0px;
user-select: none;
}
#jsq{
border: 1px solid lightgray;
display: inline-block;
}
.row{
display: flex;
}
.item{
border: 1px solid lightgray;
width: 50px;
height: 50px;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
cursor: pointer;
}
.item:hover{
background-color: lightgray;
}
.item:active{
opacity: 0.9;
}
#srk{
border: none;
width: 100%;
height: 100%;
outline: none;
font-size: 24px;
text-align: right;
}
.i2{
width: 112px;
}
.i4{
width: 236px;
}
</style>
</head>
<body>
<div id="jsq">
<div class="row">
<div class="item i4">
<input type="texr" id="srk" placeholder="null"/>
</div>
</div>
<div class="row">
<div class="item">C</div>
<div class="item">←</div>
<div class="item">%</div>
<div class="item">÷</div>
</div>
<div class="row">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">×</div>
</div>
<div class="row">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">-</div>
</div>
<div class="row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">+</div>
</div>
<div class="row">
<div class="item">0</div>
<div class="item">.</div>
<div class="item i2">=</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
var $item = $('.item');
var $srk = $('#srk');
$item.click(function(){
var str = $(this).text();
switch(str){
case'C':
$srk.val('');
break;
case'←':
$srk.val($srk.val().substr(0,$srk.val().length-1));
break;
case'×':
$srk.val($srk.val()+"*");
break;
case'÷':
$srk.val($srk.val()+"/");
break;
case'=':
var temp = eval($srk.val());
$srk.val(temp);
break;
default:
$srk.val($srk.val()+str);
break;
}
})
})
</script>
记点东西
- display是个啥属性必须得知道，这个属性充分理解之后就可以帮助你脱离本分的文档流让你对布局和排版有更深刻的了解，你要展示给用户可见的、不可见的、文档型的、表格型的、块状的，又或者运用flex与grid盒子模型帮助你将容器里面的东西码放整齐，这是一个不能不知道的起点
- 在我这里面用到的是一个
inline-block的属性值，就是当你的容器不想浮动但是宽高又想随着内部的部件跟着变化的时候，我就是想到的这个属性，所以我这个计算器的盒子就不需要我去考虑大小和里面承载的按钮的多寡进行修改 - 其次就是一个
eval的使用方式，这是一个会忠于执行你字符串形式的代码的函数，也就是说他的功能有很多，我这里只是用来处理字符串格式的数学表达式计算结果的 - 完事，碎觉