HTML实现简易计算器

随便写的,可能有bug,可以在评论区指出哈。
HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AI简易计算器</title>
</head>
<body>
<table id="calculater" onClick="calculater()"><tr><td id="display" colspan="5">0</td></tr><tr><td class="numberkey" >1</td><td class="numberkey" >2</td><td class="numberkey" >3</td><td class="numberkey" >+</td><td class="numberkey"  id="deletesign">c</td>   </tr><tr><td class="numberkey" >4</td><td class="numberkey" >5</td><td class="numberkey" >6</td><td class="numberkey" >-</td><td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td> </tr><tr><td class="numberkey" >7</td><td class="numberkey" >8</td><td class="numberkey" >7</td><td class="numberkey" >*</td></tr><tr ><td class="numberkey" >+/-</td><td class="numberkey" >0</td><td class="numberkey" >.</td><td class="numberkey" >/</td>            </tr>
</body>
</html>

CSS代码:

*{padding:0;margin:1px;}#calculater{margin: auto;margin-top: 30px;border: solid 6px #2371D3;border-spacing: 0px;}#display{width: 100%;height: 30px;border-bottom: solid 4px #2371D3;font-weight: bold;color: #193D83;font-family: 黑体;padding-left: 2px;}.numberkey{cursor: pointer;width: 40px;height: 30px;border: solid 1px #FFFFFF;background: #2371D3;color: #ffffff;text-align: center;font-weight: bold;font-family: 黑体;}#equality{cursor: pointer;width: 40px; height: 100%;background: #2371D3;border: solid 1px #FFFFFF;color: #ffffff;text-align: center;font-weight: bold;font-family: 黑体; }.numberkey:hover{background: #EA6F30; }#equality:hover{background: #EA6F30; }

Javascript代码:

var results="";var calresults="";function calculater(){if (event.srcElement.innerText=="=") {return;}results+=event.srcElement.innerText;display.innerText=results;}function resultscalcaulte(){calresults=eval(results);display.innerText=calresults;}

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/209464.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Modbus转Profinet网关:PLC与天信流量计通讯的经典案例

无论您是PLC或工业设备的制造商&#xff0c;还是工业自动化系统的维护人员&#xff0c;可能会遇到需要将不同协议的设备连接组合并通讯的情况&#xff0c;Modbus和Profinet是现代工业自动化中常见的两种通信协议&#xff0c;在工业控制领域中被广泛应用。 在这种情况绝大多数会…

利用Python进行数据分析:30万人都在看的畅销书,更新了!!!

利用Python进行数据分析 概述好书推荐升级特性pandas作译者简介主要变动 导读视频&#xff1a;收获写在末尾&#xff1a; 主页传送门&#xff1a;&#x1f4c0; 传送 概述 想学习python进行数据分析&#xff0c;这本《利用python进行数据分析》是绕不开的一本书。目前该书根据…

C#开发的OpenRA游戏之属性Selectable(9)

C#开发的OpenRA游戏之属性Selectable(9) 在游戏里,一个物品是否具有选中的能力,是通过添加属性Selectable来实现的。当一个物品不能被用户选取,那么就不要添加这个属性。 这个属性定义在下面这段描述里: ^Selectable: Selectable: SelectionDecorations: WithSpriteCon…

搜维尔科技:Faceware面部捕捉最佳实践!

视频源和分辨率&#xff1a; 我们的软件针对 RGB 彩色素材进行了优化&#xff0c;不支持使用红外摄像机。 我们建议视频分辨率为 720p 和 1080p。低于 720p 的分辨率可能会对跟踪质量产生负面影响&#xff0c;而高于 1080p 的分辨率会导致存储要求和传输时间增加&#xff0c;而…

3-合并区间

1题目描述 2思路 在合并区间之前&#xff0c;需要对所有的区间按照区间第一个元素进行排序&#xff0c;这样可以保证已经合并的各个区间之后不会再包含其他区间&#xff0c;或者被其他区间包含&#xff1b; 首先自己进行一下排序练习&#xff0c;回顾冒泡排序和选择排序&#…

MySql的数据类型和隐式转换

文章目录 一、数据类型1、数值类型1.1、整数类型1.2、浮点1.3、定点DECIMAL 2、时间类型2.1、日期和时间类型占用的存储空间2.2、日期和时间类型表示的范围2.3、日期和时间类型的零值表示 3、文本类型 二、隐式转换参考文章 一、数据类型 1、数值类型 1.1、整数类型 整数名称…

让SOLIDWORKS Composer动画在PPT中随意转换

SOLIDWORKS Composer作为一款易学易用的技术图解软件&#xff0c;非常适合用来给客户展示自己的产品。这里我们教大家如何将Composer文件插入大PPT中&#xff0c;并任意切换文件&#xff0c;用以给客户展示不用的方案和产品。 1.首先大家要安装SOLIDWORKS Composer Player 这个…

怎样通过代理ip提高上网速度

在当今互联网高度发达的时代&#xff0c;我们经常需要使用代理IP来隐藏自己的真实IP地址或提高网络连接速度。然而&#xff0c;有些用户可能会遇到代理IP无法提高网络速度的情况。那么&#xff0c;如何通过代理IP提高上网速度呢&#xff1f;以下是几个技巧&#xff1a; 1.选择…

【C语言】深入解开指针(四)

&#x1f308;write in front :&#x1f50d;个人主页 &#xff1a; 啊森要自信的主页 ✏️真正相信奇迹的家伙&#xff0c;本身和奇迹一样了不起啊&#xff01; 欢迎大家关注&#x1f50d;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;>希望看完我的文章对你有小小的帮助&am…

程序员最奔溃的瞬间

身为程序员哪一个瞬间让你最奔溃&#xff1f; *程序员最奔溃的瞬间&#xff0c; 勇士&#xff1f; or 无知&#xff1f;

斯坦福大学引入FlashFFTConv来优化机器学习中长序列的FFT卷积

斯坦福大学的FlashFFTConv优化了扩展序列的快速傅里叶变换(FFT)卷积。该方法引入Monarch分解&#xff0c;在FLOP和I/O成本之间取得平衡&#xff0c;提高模型质量和效率。并且优于PyTorch和FlashAttention-v2。它可以处理更长的序列&#xff0c;并在人工智能应用程序中打开新的可…

加班做报表被嘲低效!快用大数据分析工具

做数据分析报表很耗时间&#xff0c;因为不仅要解决多业务系统数据质量标准不一问题&#xff0c;还需要进行大量的公式计算、报表设计与制作。但那是以前&#xff0c;在大数据分析工具强势崛起的当下&#xff0c;这些工作都能交给大数据分析工具来做了。以前是花90%的时间做报表…