JS:做个计算器
优化指路:JS:做个简单计算器(优化前一篇)_阳春三月天的博客-CSDN博客
1. 目标:实现计算器功能
2. 布局呈现(html&css)
html布局注意点:文本内容不能有空格和换行,在计算时可能会出现无法计算的情况
<div class="inner">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.fd6e0c627bdd9e29dd0579bfffc1cec1?rik=i%2bA5fn8sjiwZNA&riu=http%3a%2f%2finews.gtimg.com%2fnewsapp_match%2f0%2f3409871371%2f0&ehk=5SxBDb8aZgzkyGMhi6%2fHuSe6bBZ75X7YxaqlhXWGabc%3d&risl=&pid=ImgRaw&r=0" alt="">
<div class="calcbox">
<div class="calcbody">
<div class="framebox" id="framebox">
0
</div>
<div class="box">
<div class="btn">
<button id="precent" >%</button>
</div>
<div class="btn">
<button id="ac">AC</button>
</div>
<div class="btn">
<button id="del">
<img src="jpg/delete.svg" alt="">
</button>
</div>
<div class="btn">
<button id="divsion">/</button>
</div>
<div class="btn">
<button id="senven">7</button>
</div>
<div class=" btn">
<button id="eight">8</button>
</div>
<div class="btn">
<button id="nine">9</button>
</div>
<div class="btn">
<button id="mul">*</button>
</div>
<div class="btn">
<button id="four">4</button>
</div>
<div class="btn">
<button id="five">5</button>
</div>
<div class="btn">
<button id="six">6</button>
</div>
<div class="btn">
<button id="sub">-</button>
</div>
<div class="btn">
<button id="one">1</button>
</div>
<div class="btn">
<button id="two">2</button>
</div>
<div class="btn">
<button id="three">3</button>
</div>
<div class="btn">
<button id="add">+</button>
</div>
<div class="btn">
<button id="addorsub">+-</button>
</div>
<div class="btn">
<button id="zero">0</button>
</div>
<div class="btn">
<button id="dot">.</button>
</div>
<div class="btn">
<button id="eq" >=</button>
</div>
</div>
</div>
</div>
</div>
CSS注意:
- 在开始时对必要的标签进行初始化
- 主体内容部分采用flex布局,更加方便
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
button{
border: none;
background-color: transparent;
outline: none;
}
.inner{
width: 100%;
height: 800px;
position: relative;
}
.inner img{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
}
.calcbox{
width: 400px;
height: 600px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
border-radius: 20px;
box-shadow: 10px 10px 30px 2px #fff;
}
.calcbody{
width: 380px;
height: 500px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.framebox{
width: 100%;
height: 100px;
box-shadow: 10px 10px 30px 2px #fff;
border-radius: 10px;
/* position: relative; */
display:flex;
justify-content:flex-end;
align-items: flex-end;
font-size: 30px;
font-weight: bold;
padding: 10px 10px;
color: #fff;
overflow: hidden;
}
#del{
position: relative;
}
#del img{
position: absolute;
width: 40px;
height: 40px;
top: 25%;
left: 25%;
}
.box{
width: 100%;
flex-grow: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content:space-evenly;
}
.btn{
width: 25%;
height: 20%;
border: 1px solid #fff;
border-radius: 20%;
transition: opciaty 0.5s ease;
}
.btn:hover{
opacity: 0.5;
background-color:rgb(255, 255, 255,0.2);
}
.btn button{
width: 100%;
height: 100%;
font-size: 25px;
font-weight: bold;
color:#fff;
cursor: pointer;
}
delete svg
<svg t="1687765402722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6538" width="200" height="200"><path d="M723.9 418.3c-11.6-11.6-30.5-11.6-42.2 0l-55.6 55.6-55.6-55.6c-11.6-11.6-30.5-11.6-42.2 0-11.6 11.6-11.6 30.5 0 42.2L584 516l-54.6 54.6c-11.6 11.6-11.6 30.5 0 42.2 11.6 11.6 30.5 11.6 42.2 0l54.6-54.6 54.6 54.6c11.6 11.6 30.5 11.6 42.2 0 11.6-11.6 11.6-30.5 0-42.2L668.3 516l55.6-55.6c11.7-11.6 11.7-30.5 0-42.1z m0 0" p-id="6539" fill="#ffffff"></path><path d="M887.7 226.9H361.1c-7.4-3.1-286.4 263.6-286.4 263.6l-3.8 3.8c-3.3 3.3-5.2 7.5-5.8 12-2.5 8.6-1.1 17.1 4.5 22.7L337 797.1h550.6c39.9 0 72.3-31.5 72.3-70.4V297.3c0.1-38.9-32.3-70.4-72.2-70.4zM908.3 690c0 32.2-29.9 58.4-66.7 58.4H376c-0.2-0.3-0.5-0.5-0.8-0.8L138.1 510.3l234.7-234.7h468.9c36.8 0 66.7 26.1 66.7 58.4v356z m0 0" p-id="6540" fill="#ffffff"></path></svg>
3. JS部分
var total = '';
zero.onclick = function () {
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
one.onclick = function () {
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
two.onclick = function () {
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
three.onclick = function () {
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
four.onclick = function () {
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
five.onclick = function () {
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
six.onclick = function () {
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
senven.onclick = function () {
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
eight.onclick = function () {
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
nine.onclick = function () {
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
add.onclick = function(){
if(total == ''){
total = '0';
}
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
sub.onclick = function(){
if(total == ''){
total = '0';
}
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
mul.onclick = function(){
if(total == ''){
total = '0';
}
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
divsion.onclick = function(){
if(total == ''){
total = '0';
}
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
precent.onclick = function(){
if(total == ''){
total = '0';
}
total = total + this.textContent;
framebox.textContent = total;
}
dot.onclick = function(){
if(total == ''){
total = '0';
}
total = total + this.textContent;
framebox.textContent = total;
// framebox.textContent = this.textContent;
}
eq.onclick = function(){
if(total==''){
framebox.textContent=0;
}else{
framebox.textContent = eval(total);
total = framebox.textContent;
}
// framebox.textContent = this.textContent;
}
del.onclick = function(){
if('string' == typeof(framebox.textContent)){
if(framebox.textContent.length>1){
total = framebox.textContent.substring(0, framebox.textContent.length - 1);
framebox.textContent = total;
}else{
total = '';
framebox.textContent = '0';
}
}
else{
alert('错误');
}}
// framebox.textContent = this.textContent;}
addorsub.onclick = function(){
total = total + '-';
framebox.textContent = total;
}
ac.onclick = function(){
total = '';
framebox.textContent = '0';
}
4. 过程中重要功能按钮设置
为了熟悉JS功能声明,此处数字按钮采用挨个添加onclick事件。改进可以通过给html中的button设置类名去进行循环添加onclick事件操作。
- ac清零操作
ac.onclick = function(){ total = ''; framebox.textContent = '0'; }
1. 设置total为空字符串不设置为0的原因:因添加数字的onclick代码如下, 防止在进行下一步添加数的操作时显示0。
framebox.textContent = total;
2. 仅是为了显示效果
framebox.textContent = '0';
- del删除单个字符操作
del.onclick = function(){ if('string' == typeof(framebox.textContent)){ if(framebox.textContent.length>1){ total = framebox.textContent.substring(0, framebox.textContent.length - 1); framebox.textContent = total; }else{ total = ''; framebox.textContent = '0'; } } else{ alert('错误'); }}
1. 此处删除操作采用了substring
语法:string.substring(start,end)
作用:返回两个索引值直接的字符串(包含start,不包含end)
2. 删除时采用 framebox.textContent.length而非total.length
情况1:计算后的数值删除,采用total.lenght,此时total字符串包含运算符,在进行删除时,显示会出现整个字符串添加过程(包含运算符),跟我们平常使用的calc不同。
情况2:非计算后的数值删除时,采用total.length 是正常显示
综合来看,我们需要的是显示内容进行删除,而非本身字符串total,所以采用 framebox.textContent.length
3. 想到删除操作,采用substring,只有字符串可以采用substring,而且对framebox.textContent进行操作,所以要检查传进来的内容是否是string类型,如果不是还需要进行强转,(因为此处在检查中发现已经是'string'类型,只是加个安全检查,else弹窗未进行强转操作)
此处‘string’中的''是重点,勿忽略
'string' == typeof(framebox.textContent
4. 第二层if 检查
非最后一个字符,正常删
最后一个字符的话,点击删除操作后需要显示为0,同时设置total为空字符串。
- add、sub、divsion、mul、precent、dot操作为同一onclick事件,以dot为例
1. 为了防止在初始化或者清零删除操作后,total为空字符串,frambox内容为0的情况下,直接添加运算符时,造成仅有运算符的情况,添加了if进行判断。
dot.onclick = function(){ if(total == ''){ total = '0'; } total = total + this.textContent; framebox.textContent = total; }
- eq等于操作
eq.onclick = function(){ if(total==''){ framebox.textContent=0; }else{ framebox.textContent = eval(total); total = framebox.textContent; }
1. 平时使用的计算器在输入只有单个数字或单个数字和运算符时,按等于号,内容不变。这是两种情况,需要进行if操作
以下是思考过程
CSDN-Ada助手: 推荐 Vue入门 技能树:https://edu.csdn.net/skill/vue?utm_source=AI_act_vue
CSDN-Ada助手: 不知道 CS入门 技能树是否可以帮到你:https://edu.csdn.net/skill/gml?utm_source=AI_act_gml
CSDN-Ada助手: 恭喜您写了第17篇博客!看到您探讨了vue3+vite配置css预处理器less的内容,我感到非常兴奋。您对于这个主题的深入研究和分享无疑为读者提供了很好的参考。 接下来,我想提供一些建议以供您参考。您可以考虑探索在vue3+vite配置其他预处理器,比如sass或者stylus,这将使您的博客更加全面。此外,如果您能在博客中加入一些实际案例或者实用技巧,将更能吸引读者并提升博文的实用性。 当然,这只是我个人的建议,我相信您已经有了自己独特的创作思路。期待着您未来更多精彩的博客,继续保持创作的热情和努力!
CSDN-Ada助手: 恭喜您撰写了第15篇博客!标题“文本超出显示省略号”引起了我的兴趣。我很高兴看到您持续创作,这证明了您对博客创作的热情和坚持。关于文本超出显示省略号这个话题,您已经给出了一个很有趣的角度。下一步,我建议您可以深入探讨如何优化文本超出的情况,或者分享一些实用的解决方案。无论您选择什么主题,我相信您的研究和观点一定会给读者带来新的启发和思考。继续努力创作吧!
CSDN-Ada助手: 恭喜您写了第14篇博客!标题看起来很有趣,我想了解一下uni-app中生命周期函数onReachBottom无法触发的原因。您的持续创作是非常值得鼓励的,为开发者提供了很多实用的经验和解决方案。 在下一步的创作中,我建议您可以尝试探索更多与uni-app相关的主题,例如其他生命周期函数的使用技巧、优化性能的方法,或者与其他开发者分享一些实战经验。同时,也可以考虑结合一些实际案例来说明问题,这样读者能更好地理解和应用您的经验分享。谦虚和开放的态度是我们不断进步的关键,期待您的下一篇博客!