使用HTML做一个微行计算器（无计算功能）

最新推荐文章于 2023-11-27 16:56:59 发布
最新推荐文章于 2023-11-27 16:56:59 发布
阅读量296 收藏
点赞数
文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/viczking/article/details/80424970
版权 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>计算器</title>
</head>
<body>
	<!--定义按键表格,每个按键对应一个事件触发-->
	<table border="1" align="center" bgcolor="darkgrey" style="height: 400px; width: 350px">
	<!--                                                                                         	
               	描述：align="center"  居中
                  bgcolor 背景颜色             -->
	<tr>
		<td colspan="5">	<!--  colspan  跨列数      如0键占横着的两格  rowspan   跨行数     如=键占竖着的两格 -->
		<input type="text" id="nummessege" style="height: 40px; width: 400px; font-size: 50px" />
	</td>
	</tr>
	<tr>
	<td>
		<input type="button" value="MC" id="MC" οnclick="onclicknum('MC')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
	<td>
		<input type="button" value="MR" id="MR" οnclick="onclicknum('MR')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
	<td>
		<input type="button" value="MS" id="MS" οnclick="onclicknum('MS')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
	<td>
		<input type="button" value="M+" id="M+" οnclick="onclicknum('M+')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
	<td>
		<input type="button" value="M-" id="M-" οnclick="onclicknum('M-')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
        </tr> 
	<tr>
	<td>
		<input type="button" value="←" id="←" οnclick="onclicknum('←')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
	<td>
		<input type="button" value="CE" id="CE" οnclick="onclicknum('CE')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
	<td>
		<input type="button" value="C" id="C" οnclick="onclicknum('C')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
	<td>
		<input type="button" value="±" id="±" οnclick="onclicknum('±')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
	<td>
		<input type="button" value="√" id="√" οnclick="onclicknum('√')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
        </tr>
	<tr>
	<td>
		<input type="button" value="7" id="7" οnclick="onclicknum('7')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
	<td>
		<input type="button" value="8" id="8" οnclick="onclicknum('8')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
	<td>
		<input type="button" value="9" id="9" οnclick="onclicknum('9')" style="height: 60px; width: 70px; font-size: 25px">
	</td>
<td> <input type="button" value="/" id="/" οnclick="onclicknum('/')" style="height: 60px; width: 70px; font-size: 25px"> </td> <td> <input type="button" value="%" id="%" οnclick="onclicknum('%')" style="height: 60px; width: 70px; font-size: 25px"> </td> </tr> <tr> <td> <input type="button" value="4" id="4" οnclick="onclicknum('4')" style="height: 60px; width: 70px; font-size: 25px"> </td> <td> <input type="button" value="5" id="5" οnclick="onclicknum('5')" style="height: 60px; width: 70px; font-size: 25px"> </td> <td> <input type="button" value="6" id="6" οnclick="onclicknum('6')" style="height: 60px; width: 70px; font-size: 25px"> </td> <td> <input type="button" value="*" id="*" οnclick="onclicknum('*')" style="height: 60px; width: 70px; font-size: 25px"> </td> <td> <input type="button" value="1/x" id="1/x" οnclick="onclicknum('1/x')" style="height: 60px; width: 70px; font-size: 25px"> </td> </tr> <tr> <td> <input type="button" value="1" id="1" οnclick="onclicknum('1')" style="height: 60px; width: 70px; font-size: 25px"> </td> <td> <input type="button" value="2" id="2" οnclick="onclicknum('2')" style="height: 60px; width: 70px; font-size: 25px"> </td> <td> <input type="button" value="3" id="3" οnclick="onclicknum('3')" style="height: 60px; width: 70px; font-size: 25px"> </td> <td> <input type="button" value="-" id="-" οnclick="onclicknum('-')" style="height: 60px; width: 70px; font-size: 25px"> </td> <td rowspan="2"> <input type="button" value="=" id="=" οnclick="onclicknum('=')" style="height: 120px; width: 70px; font-size: 25px"> </td> </tr> <tr> <td colspan="2"> <input type="button" value="0" id="0" οnclick="onclicknum('0')" style="height: 60px; width: 150px; font-size: 25px"> </td> <td> <input type="button" value="." id="." οnclick="onclicknum('.')" style="height: 60px; width: 70px; font-size: 25px"> </td> <td> <input type="button" value="+" id="+" οnclick="onclicknum('+')" style="height: 60px; width: 70px; font-size: 25px"> </td> </tr> </table> </body></html>

viczking
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
制作一个简单计算器的实现功能，输入数字1和数字2进行求和，输出结果
qq_48965298的博客
01-05 1433
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单计算器</title> <style> input{ border-radius:10px;/*圆角边框*/ border:1px solid #ccc; } </style> </head> <body> &lt
微型计算器
02-17
这些功能通常需要一个解析表达式和执行计算的函数。 总的来说，创建微型计算器是一个结合HTML、CSS和JavaScript的综合项目，能帮助开发者提升网页交互设计和前端开发能力。"mini-calculator-master"的源代码提供了...
vue制作优雅的拟态化微立体计算器
你好呀，很高兴你在看这里~
07-20 1605
一.话不多，先看效果：  这个效果是我在b站看到一个up写的，感觉拟态化微立体效果很简约却又有种优雅的感觉。????而优雅又怎么能缺了我， <(￣︶￣)> ，所以话不多说，自己马上也整了一个，实现并不难，超详细的制作过程如下（最后附上完整代码）： 二.超级详细的制作过程： 1.首先自然是定义html标签（先别理标签里的vue语法），我定义一个父盒子.calculator，然后定义一个span标签放计算结果，其它按钮都用button标签包裹。计算器的布局采用grid布局，所以在每个按钮里绑定属性
html和css编译计算器页面,html+css+js 实现计算器
weixin_42512249的博客
06-10 367
用带道术用量确示常构端析以要效开的用，近不JavaScript制作一个计算器，可以进行加、减、乘除、指数、根号、括号运算要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标。功能上用，事少来最差端在事路原们这制码效移，动较难实现的是指数与根号运算，但在算法实现上两者其实大同朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏小异。一种方案是朋不功事做时次...
HTML+CSS+Javascript+Flask实现前后端交互计算器
2301_78936942的博客
10-22 772
也学到了如何设计并管理一个简单的数据库用于存储利率信息，在操作过程中加深了对HTML、CSS和JavaScript的理解，并学会了如何将它们结合起来构建一个完整的前端应用。鉴于这次项目要求前后端交互，我决定使用HTML、CSS和JavaScript作为实现工具，根据原型图先实现静态界面，这样做的好处是能够更灵活地控制界面的设计和交互效果。例如，下图展示了存款利率的修改和存款利率计算两个功能，当用户切换到某个功能时，对应的按钮会变为灰色，以便用户清晰地知道当前所处的功能模块。输出计算后的存款或贷款利息。
线上科学计算机,网易发布史上最强计算器 完爆科学计算器
weixin_39835991的博客
06-16 979
近日，网易正式发布有道超级计算器，日常计算、分式化简、方程求解、多项式分解和展开、微积分，统统包含其中，比科学计算器还要强大。网易超级计算器据介绍，有道超级计算器可以自动显示日常计算的结果，并可以对计算结果进行操作和复制，在最大程度上节约用户的时间。除了计算简单的数字功能外，超级计算器还覆盖海量数学运算方式，包括求根、求幂、求导、积分、方程求解、三角函数、分式化简、因式分解、公式展开、公倍数、公因...
有道科学计算机,网易发布史上最强计算器 完爆科学计算器
weixin_36027833的博客
07-01 749
(原标题：网易发布史上最强计算器 完爆科学计算器)近日，网易正式发布有道超级计算器，日常计算、分式化简、方程求解、多项式分解和展开、微积分，统统包含其中，比科学计算器还要强大。网易超级计算器据介绍，有道超级计算器可以自动显示日常计算的结果，并可以对计算结果进行操作和复制，在最大程度上节约用户的时间。除了计算简单的数字功能外，超级计算器还覆盖海量数学运算方式，包括求根、求幂、求导、积分、方程求解、三...
因式分解英语计算机,网易正式发布有道超级计算器 免费无广告离线高级运算...
weixin_30600605的博客
06-22 1225
近日，网易正式发布有道超级计算器，日常计算、分式化简、方程求解、多项式分解和展开、微积分，统统包含其中，比科学计算器还要强大。据介绍，有道超级计算器可以自动显示日常计算的结果，并可以对计算结果进行操作和复制，在最大程度上节约用户的时间。除了计算简单的数字功能外，超级计算器还覆盖海量数学运算方式，包括求根、求幂、求导、积分、方程求解、三角函数、分式化简、因式分解、公式展开、公倍数、公因数、阶乘、绝对...
如何设计一个电子计算器
weixin_34320159的博客
01-05 255
　　版权申明：本文为博主窗户(Colin Cai)原创，欢迎转帖。如要转贴，必须注明原文网址 　　http://www.cnblogs.com/Colin-Cai/p/8185972.html 　　作者：窗户 　　QQ：6679072 　　E-mail：6679072@qq.com 　　首先，不要误解，我这里的计算器是指硬件的计算器，至于纯软件的计算程序，乃...
每日一练：简易计算器
Snailandfish的专栏
11-27 647
实现建议的计算器功能，可以正常加减乘除。
一个微型库用于在JavaScript中构建响应式类似于电子表格的计算器
08-10
例如，你可以使用React的组件系统来构建一个包含xcell单元格的表格，从而创建一个完整的、具有响应式计算功能的前端应用。 最后，对于“xcell-master”这个压缩包文件，它很可能是项目源代码的主分支，包含了库的...
可视化计算器_可视化计算器_
10-02
可视化计算器是一种交互式的计算工具，它不仅仅提供基本的算术运算，还能以图形化的方式展示计算过程，帮助用户直观理解复杂的数学概念。在本话题中，我们将深入探讨可视化计算器的设计原理、实现方式以及其在教育和...
django-calculator-microservice:使用django作为Web服务可以访问简单的计算器功能
05-02
总的来说，这个项目是一个使用Python Django框架构建的微服务，提供了一个简单的在线计算器功能，允许用户通过HTTP请求执行乘法和除法运算。对于想要学习Django Web开发，尤其是如何构建微服务的人来说，这是一个很...
微网站html5
11-10
微网站HTML5是一种技术趋势，尤其在移动互联网时代，它为开发者提供了构建适应各种设备屏幕、功能丰富的手机网站的可能性。微网站通常指的是针对移动端优化的轻量级网站，旨在提供快速加载、用户友好的浏览体验，...
(CN) 自动驾驶技术指南（中文） - 介绍自动驾驶的起源、技术以及行业应用 .zip
08-01
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4
德勤 SRM采购平台建设方案.pptx
08-01
德勤 SRM采购平台建设方案.pptx
chromedriver-mac-x64_127.0.6483.0.zip
08-01
chromedriver-mac-x64_127.0.6483.0.zip
MIT“自动驾驶”线上课程的个人作业，用于mnist数据集的卷积神经网络 .zip
最新发布
08-01
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4
html做一个网页版计算器
06-01
该网页版计算器使用了 HTML、CSS 和 JavaScript 技术，包含一个文本框用于显示运算结果，以及若干个按钮用于输入数字和运算符。JavaScript 代码实现了输入内容的追加、清空、以及运算结果的计算和显示。注意，该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值