在线计算器源码(HTML+CSS+jQuery)

一、简介最近学习前端内容,做为练习,试开发了一个在线的计算器。具有如下功能:+-*/运算;开平方根运算;支持键盘输入(delete键设置为初始化功能)。目前存在的BUG:输入小数时,初次输入小数点,其会显示在数字最左侧,经测试,应为input标签的问题;负数的输入;结果为负时,负号(即减号)显示在数字的右侧。以上1和3两个BU
摘要由CSDN通过智能技术生成

一、简介

最近学习前端内容,做为练习,试开发了一个在线的计算器。

具有如下功能:

    1. +-*/运算;
    2. 开平方根运算;
    3. 支持键盘输入(delete键设置为初始化功能)。

目前存在的BUG:

  1. 输入小数时,初次输入小数点,其会显示在数字最左侧,经测试,应为input标签的问题;
  2. 负数的输入;
  3. 结果为负时,负号(即减号)显示在数字的右侧。

以上1和3两个BUG,均仅为显示问题,影响用户读数,不影响计算。因时间问题,BUG没有处理。仅描述一下解决BUG的思路:1、关于小数占负号显示。可将其以替换字符顺序的方式正确显示。2,负数的输入问题。strNum为初始值时,绕过运算开关,并将负号赋给strNum变量并退出函数。不操作运算符。


未完成的功能:

  1. 百分比计算;
  2. 记忆加减和清除;
  3. 小数点后的保留位数设置和进位法则设置。
留待以后有时间了再写来玩。


二、源代码

源代码都比较简单,就不做更多说明了。(我设想的展示顺序为HTML->CSS ->JS,CSDN给我的展示顺序是CSS->JS->HTML。因引用的是代码片,CSDN也还在学用,不知道怎么修改代码片里文件顺序。有知道的评论告诉一下。)



    
     
     
     
    在线计算器
     rel="stylesheet" type="text/css" href&
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,以下是一个简单的 HTML + CSS 实现的计算器,你可以在浏览器中打开查看效果: ```html <!DOCTYPE html> <html> <head> <title>简单计算器</title> <style type="text/css"> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { text-align: center; margin-top: 50px; } form { margin: 0 auto; width: 300px; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } input[type="number"] { width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 5px; border: none; box-shadow: 0 0 5px rgba(0,0,0,0.2); } input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; cursor: pointer; } input[type="submit"]:hover { background-color: #3e8e41; } </style> </head> <body> <h1>简单计算器</h1> <form> <label for="num1">第一个数:</label> <input type="number" id="num1" name="num1" required><br> <label for="num2">第二个数:</label> <input type="number" id="num2" name="num2" required><br> <label for="operator">运算符:</label> <select id="operator" name="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select><br> <input type="submit" value="计算"> </form> </body> </html> ``` 这个计算器只是一个简单的示例,只能进行加减乘除四则运算,如果需要实现更复杂的功能,可以考虑使用 JavaScript 或其他前端框架。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值