HTML-使用jQuery写计算器

最新推荐文章于 2024-08-09 10:42:44 发布
最新推荐文章于 2024-08-09 10:42:44 发布
阅读量110 收藏
点赞数
分类专栏： Html 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43532218/article/details/116007467
版权

jQuery在线文档说明https://jquery.cuishifeng.cn/index.html
文章引入的jQuery文件需单独下载，放置在JS文件下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input{
				width: 100px;
				font-family: "仿宋";
			}
			.orange{
				color: orange;
			}
			input:hover{
				background-color: cyan;
				margin: 0px;
			}
			div{
				background-color: lawngreen;
				width: 410px;
				height: 140px;
				position: absolute;
				margin: auto;
				left: 0px;
				right: 0px;
			}
		</style>
	</head>
	<body>
		<div>
			<table border="0" cellspacing="0" cellpadding="0" width="400px">
				<tr>
					<td colspan="4">
						<!-- margin外边距 -->
						<input id = "output" type="text"  readonly="readonly" style="width: 400px;text-align: right;margin: 1px;"/>
					</td>
				</tr>
				<tr>
					<td><input value="(" type="button" class="orange"></td>
					<td><input value=")" type="button" class="orange"></td>
					<td><input value="%" type="button" class="orange"></td>
					<td><input value="C" type="button"></td>
				</tr>
				<tr>
					<td><input value="7" type="button"></td>
					<td><input value="8" type="button"></td>
					<td><input value="9" type="button"></td>
					<td><input value="/" type="button" class="orange"></td>
				</tr>
				<tr>
					<td><input value="4" type="button"></td>
					<td><input value="5" type="button"></td>
					<td><input value="6" type="button"></td>
					<td><input value="*" type="button" class="orange"</td>
				</tr>
				<tr>
					<td><input value="1" type="button"></td>
					<td><input value="2" type="button"></td>
					<td><input value="3" type="button"></td>
					<td><input value="-" type="button" class="orange"></td>
				</tr>
				<tr>
					<td><input value="0" type="button"></td>
					<td><input value="." type="button" class="orange"></td>
					<td><input value="=" type="button" class="orange"></td>
					<td><input value="+" type="button" class="orange"></td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript" src="js/jQuery/jquery-3.4.1.js">
		
	</script>
	<script type="text/javascript">
		var output=$("#output");
		var inputs=$(":button");
			inputs.on("click",function(){
				if(this.value==='C'){
					output.val("");
				}else if(this.value ==='='){
					output.val(eval(output.val()));
				}else{
					output.val(output.val()+this.value);
				}
		});
	</script>
</html>
new个星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
源代码jQuery简单数学计算器Web页面html
qq_44394562的博客
05-27 503
今天给大家分享jQuery数学计算器html的源代码：（源码来自网络，分享给大家） 先看一下效果图： html代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="wid
用jquery编写简易计算器
weixin_46486269的博客
04-04 3206
一、jQuery 选择器 1，基本选择器（#id ，.class ，element ） 2，层次选择器（祖先后代，父子） （简易计算器主要了解基本选择器和层次选择器） 二、jq的html,val,css,attr html：设置与获取内容 <span>dxxxx</span> <div>aaaa</div> <button>ok</button> val：设置与获取值 <input type="text" value="123"
jQuery数学计算器代码.zip
05-27
源代码jQuery简单数学计算器Web页面html
WEB网页版计算器（HTML、CSS、JavaScript实现）
热门推荐
weixin_60414376的博客
12-20 1万+
一、效果截图： 功能： 1、实现简单的四则运算。2、包含正负号操作。 3、M按钮实现跳转到一个网页。 4、可以使用小数运算。 二、代码实现： 1、HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> ......
使用HTML+CSS，jQuery编写的简易计算器
Smooth0815的博客
12-18 372
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset=" ...
jquery-ipv4-calc:jQuery IPv4 计算器
06-18
《jQuery IPv4 计算器详解》 在互联网技术领域，IPv4地址是网络设备进行通信的基础，每个设备都需要一个唯一的IPv4地址。然而，由于IPv4地址资源有限，管理和计算IP地址变得尤为重要。为此，开发者们利用JavaScript...
jQuery房贷计算器
06-01
【jQuery房贷计算器】是一种基于JavaScript库jQuery开发的实用工具，用于帮助用户计算房屋贷款的相关费用。这个计算器通常包括了贷款本金、贷款年限、年利率、还款方式（等额本息或等额本金）等多个参数，用户可以...
jQuery数学计算器代码
02-25
通过学习和理解这个jQuery数学计算器代码，开发者不仅可以掌握如何使用jQuery来创建交互式的Web组件，还可以深入理解JavaScript的基本编程概念，如事件处理、DOM操作以及简单的数学逻辑。对于前端开发者来说，这是一...
jQuery彩色计算器特效代码
03-20
1. **jQuery**：jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。jQuery的目标是使网页动态化和交互变得更加简单。在这款彩色计算器中，jQuery被用来处理用户输入、...
使用html jquery css制作简易计算机
HusKiy的博客
09-26 1613
先看看效果 制作这样一个简单的计算机首先要先设计一个计算机的模型，下面是标签和css样式 <div class="ke"><!--外壳--> <!-- <h2>简易版计算器</h2> --> <div class="ke2"> <input type="text" id="input"><!--显示屏--> &lt.
HTML+CSS+JS编写一个简单的计算器
编程小明的博客
07-01 290
HTML+CSS+JS编写一个简单的计算器 效果图： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .bg { margin: 0 auto; border: gray solid 3px; border-radius: 10px;
使用html+css+javaScript 完成计算器
weixin_69252724的博客
04-14 723
点击数字按键并不能将按键的内容放到文本域里。如果foreach忘记的兄弟们。
HTML+css+js创建简单计算器
qq_53541336的博客
02-24 944
一、先利用HTML创建计算器的整体样式框架，这里面呢应用最多的莫过于表单元素了input、button、label等这些标签。具体代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/public.css"> <link rel=
Java(随笔)——利用HTML,CSS,JavaScript,JQuery编写的简易计算器
weixin_33835103的博客
06-27 225
一．利用刚学过的前端知识做一个简易的计算器里边使用到了HTML,CSS,JavaScript以及JQuery的知识代码如下：（1）利用CSS设计了计算器外形样式；（2）利用JavaScript实现了建议计算器的功能；代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...
jQuery实现简单的计算器js特效代码
ICode联盟
12-31 343
下载地址 一款jquery实现简单计算器代码。该jquery计算器使用 Bootstrap 4进行布局，并结合math.js数学库，实现简单的加减乘除和平方，开方等数学计算。在页面中引入bootstrap 4，jquery和math.min.js文件。以及计算器的样式文件style.css和main.js文件。 该jquery计算器的HTML结构如下： ()√x2 C?Ans÷ 789× 456? 123+ %0.= dd: ...
使用html，css，javascript，通过jQuery实现计算器功能
橘白呀啊的博客
03-21 527
使用html,css,javascript编写实现计算器功能
基于jquery+html写的一个简易计算器
iflycc的博客
12-03 441
基本上实现了普通计算器的大部分需求，临时随手编写，不喜勿喷呀~ 贴代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> table{ ...
html+css+jQuery写一个简单的计算器
乙壳虫的博客
12-22 3272
写一个简单的计算器 由于代码不多，而且为了方便，就把css和js都写在html文件里就行了。 1. 搭建一个简单的架子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> ...
略记一次抓取内容后解密及登录的经历
最新发布
深蓝浅蓝的天
08-09 409
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
jquery实现计算器功能
04-26
可以使用jQuery编写计算器功能。首先，需要在HTML中创建一个表单元素来包含计算器的各个按钮和显示结果的区域。然后，在JavaScript中编写代码来处理按钮的点击事件和计算结果。下面是一个简单的jQuery计算器实现示例： HTML代码： ``` <form> <input type="text" id="result" readonly> <br> <input type="button" value="1" onclick="addNumber(1)"> <input type="button" value="2" onclick="addNumber(2)"> <input type="button" value="3" onclick="addNumber(3)"> <input type="button" value="+" onclick="addOperator('+')"> <br> <input type="button" value="4" onclick="addNumber(4)"> <input type="button" value="5" onclick="addNumber(5)"> <input type="button" value="6" onclick="addNumber(6)"> <input type="button" value="-" onclick="addOperator('-')"> <br> <input type="button" value="7" onclick="addNumber(7)"> <input type="button" value="8" onclick="addNumber(8)"> <input type="button" value="9" onclick="addNumber(9)"> <input type="button" value="*" onclick="addOperator('*')"> <br> <input type="button" value="0" onclick="addNumber(0)"> <input type="button" value="C" onclick="clearResult()"> <input type="button" value="=" onclick="calculate()"> <input type="button" value="/" onclick="addOperator('/')"> </form> ``` JavaScript代码： ``` var operator = ""; var operand1 = 0; var operand2 = 0; function addNumber(number) { $("#result").val($("#result").val() + number); } function addOperator(op) { operator = op; operand1 = $("#result").val(); $("#result").val(""); } function clearResult() { $("#result").val(""); } function calculate() { operand2 = $("#result").val(); var result = eval(operand1 + operator + operand2); $("#result").val(result); } ``` 该计算器的实现比较简单，只能处理简单的四则运算，具体效果可见此处：https://codepen.io/chenhj/pen/oNjyqQq。当然，如果需要更加复杂的计算器需求，需要更完善的设计和实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值