jQuery写一个简单的计算器

jquery对文本/值的操作有如下六个方法:
(1)html();
(2)html(v);
(3)val();
(4)val(v);
(5)text();
(6)text(v);
括号内有V即赋值,无V即取值
在这里使用在线js
简易计算器:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>四则运算</title>
	</head>
	 <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
	 <script>
		$(function(){
			$("button").click(function(){
			var n1=parseInt($("#num1").val());
			var n2=parseInt($("#num2").val());
			var flag=$("#flag").val();
			if(flag=="+")
				{
				$("#num3").val(n1+n2);
				}
			else if(flag=="-")
				{
				$("#num3").val(n1-n2);
				}
			else if(flag=="*")
			{
				$("#num3").val(n1*n2);
			}
			else if(flag=="/")
			{
				$("#num3").val(n1/n2);
			}		
	});
	});
	 
	 </script>
	 
	<body>
	<input id="num1">
	<select id="flag">
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="*">*</option>
		<option value="/">/</option>
	</select>
	<input id="num2">
	<button id="btn1">=</button>
	
	<input id="num3">
	</body>
</html>


输出结果

写这个博客可以说是经历了一系列的社会性死亡,我在取flag值时,value值设为value="add"传过去匹配当然运算不了,怎么发现错误呢,把传过去的值都alert一下,一个一个找原因就找到了,说到底还是太依赖别人,关键原理弄清楚,然后学会查找错误

jQuery中编一个简单计算器功能,我们可以创建一个HTML页面,然后利用jQuery处理用户输入和计算操作。以下是一个基本的例子: 首先,在HTML中设置计算器的界面结构: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Calculator</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> #calculator { width: 250px; border: 1px solid black; padding: 10px; } input[type=number], button { width: 70px; margin: 5px; } </style> </head> <body> <div id="calculator"> <input type="text" class="result" disabled placeholder="0" /> <button>1</button> <button>2</button> <button>3</button> <!-- ...继续添加数字按钮到9 --> <button>*</button> <button>+</button> <button>-</button> <button>/</button> <button>=</button> <button>C</button> </div> <script src="calculator.js"></script> </body> </html> ``` 接下来,创建`calculator.js`文件,包含jQuery代码: ```javascript $(document).ready(function () { // 事件监听器,用于数字按钮点击 $("#calculator button").click(function (event) { const clickedButton = $(this); if (!isNaN(clickedButton.text())) { // 如果是数字键 $(".result").val($(this).text() + $(".result").val()); } else if ($(this).text() === "C") { // 清除所有输入 $(".result").val(""); } else if ($(this).text() === "=") { // 执行计算 eval($(".result").val()); // 注意:这可能引入安全风险,实际应用中应使用更安全的方法 $(".result").val(eval($(".result").val()).toFixed(2)); // 结果四舍五入保留两位小数 } else { // 其他运算符键 $(".result").val(clickedButton.text() + " "); } }); }); ``` 这个例子实现了加减乘除的基本运算和清除输入的功能。然而,请注意`eval()`函数存在安全风险,因为它会执行字符串作为JavaScript代码。在实际项目中,为了提高安全性,应该使用更复杂的方法(如解析表达式)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值