HTML CSS 和JavaScript实现网页计算器

本文分享了一个使用HTML、CSS和JavaScript实现的网页计算器项目,详细介绍了实现退格、更新运算符及小数点输入控制等功能的代码逻辑,以及在实验过程中遇到的问题和解决方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML CSS JavaScript组合实现网页计算器

前言

这是我的第一篇优快云博客,就分享一个我今天刚完成的实验吧。这是一个使用HTML CSS 和JavaScript实现的网页计算器。
以下呢,是我的实验报告中的一部分内容。在此,我要感谢我的网页设计的老师成老师,说不定还会被他看见,如果他会逛优快云的话!哈哈。

代码说明

1、 退格
在这里插入图片描述
使用substring方法取得第一到倒数第二个字符,再赋给text实现退格,这里要注意删除掉的字符是不是小数点,与后面限制小数点输入呼应

2、 更新运算符
在这里插入图片描述
同样采用substring方法实现,不过需要判断最后一个字符是不是运算符,并且输入运算符就代表继续输入另一个数字,所以小数点判断需要置false
3、 恢复小数点输入以及限制小数点输入
在这里插入图片描述
在这里插入图片描述
定义一个全局变量来监测小数点是否输入,初始值置false,代表没有输入过,当一些操作之后,更新isDotClicked的值,在小数点输入函数里面根据isDotClicked的值来确定是否允许继续输入小数点

实验小结

       这次实验相比上次来说,总体难度应该要低一些,所以我在比较短的时间里完成了。当然,这还是得感谢成老师耐心为我解答。在实验中还是遇到了一些问题,比如在实现退格的时候,改变了text的值之后,还要再将其赋值给
document.getElementById(“result”).value
       这一点像C语言里面的形参与实参的关系,普通值传递的情况下,当形参改变时,实参不会变。
在这里插入图片描述
       substring方法中参数的意义是第一个参数到第二个参数,包括第一个参数而不包括第二个参数。这里使用的substring方法里面对参数的理解不当为我后来实现控制运算符连续输入的时候浪费很多时间埋下了伏笔。
在这里插入图片描述
       这里的text.length-1才表示字符串的最后一个字符,而不是text.length。
以及后来整个文件几乎完善之后发现无法实现小于1的小数之间的运算,使用text.length的时候忘了加上text这些问题。
       这些问题有的是对方法,属性等的掌握不熟练,有的则是代码书写中的不严谨。相信这些问题都会随着我学习的深入逐渐减少。
写代码这个事情,他不像做题做试卷,你错了一道题可能只是少拿对应的分数,但写代码要是错了哪怕一个字符,可能影响的就是全局。所以其实写代码更像一个创作艺术品的过程,你力求把它做得尽善尽美,修整每一个瑕疵,当他最后完完整整的,没有bug的呈现在你的面前,你会感到一种像是创作出了一件精美的艺术品一样的满足!
       最后再次感谢成老师给我的耐心指导!

后记

不得不承认,这篇实验报告看起来有点抒情了,不过,这确实是有感而发,今天从上午到中午中午到下午,撸了大半天代码,经历了各种各样的问题,最后把功能实现并且完善了,午觉都没睡,但是却很满足。这种掏空身体却满足精神的感觉确实很不错。

小吐槽

优快云移动端为什么不能写博客呢?昨晚在手机上找半天!而相对的,网页版的不能写blink,这倒能理解一点,毕竟一闪而过的想法用手机可能更快的记录下来。

源代码链接(已更新):网页计算器

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值