源代码jQuery简单数学计算器Web页面html

最新推荐文章于 2024-08-12 18:48:17 发布

Serendipity***

最新推荐文章于 2024-08-12 18:48:17 发布

阅读量565

点赞数 5

分类专栏： web 前端文章标签： jquery html css js

本文链接：https://blog.youkuaiyun.com/qq_44394562/article/details/117339535

版权

web 同时被 2 个专栏收录

10 篇文章

订阅专栏

前端

8 篇文章

订阅专栏

本文分享了一款使用jQuery编写的简单数学计算器的HTML源代码，包括页面展示效果及源码组成部分。提供下载链接，读者可以通过优快云或留言获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天给大家分享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="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>jQuery计算器代码</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="container">
	<!-- Rounded switch -->
	<label class="switch">
		<input type="checkbox">
		<span class="slider"></span>
	</label>
	<form>
		<input readonly id="display1" type="text" class="form-control-lg text-right">
		<input readonly id="display2" type="text" class="form-control-lg text-right">
	</form>
	
	<div class="d-flex justify-content-between button-row">
		<button id="left-parenthesis" type="button" class="operator-group">&#40;</button>
		<button id="right-parenthesis" type="button" class="operator-group">&#41;</button>
		<button id="square-root" type="button" class="operator-group">&#8730;</button>
		<button id="square" type="button" class="operator-group">&#120;&#178;</button>
	</div>
  
	<div class="d-flex justify-content-between button-row">
		<button id="clear" type="button">&#67;</button>
		<button id="backspace" type="button">&#9003;</button>
		<button id="ans" type="button" class="operand-group">&#65;&#110;&#115;</button>
		<button id="divide" type="button" class="operator-group">&#247;</button>
	</div>
	

	<div class="d-flex justify-content-between button-row">
		<button id="seven" type="button" class="operand-group">&#55;</button>
		<button id="eight" type="button" class="operand-group">&#56;</button>
		<button id="nine" type="button" class="operand-group">&#57;</button>
		<button id="multiply" type="button" class="operator-group">&#215;</button>
	</div>

	
	<div class="d-flex justify-content-between button-row">
		<button id="four" type="button" class="operand-group">&#52;</button>
		<button id="five" type="button" class="operand-group">&#53;</button> 
		<button id="six" type="button" class="operand-group">&#54;</button> 
		<button id="subtract" type="button" class="operator-group">&#8722;</button>
	</div>

	
	<div class="d-flex justify-content-between button-row">
		<button id="one" type="button" class="operand-group">&#49;</button> 
		<button id="two" type="button" class="operand-group">&#50;</button>
		<button id="three" type="button" class="operand-group">&#51;</button>
		<button id="add" type="button" class="operator-group">&#43;</button>
	</div>

	<div class="d-flex justify-content-between button-row">
		<button id="percentage" type="button" class="operand-group">&#37;</button>
		<button id="zero" type="button" class="operand-group">&#48;</button>
		<button id="decimal" type="button" class="operand-group">&#46;</button>
		<button id="equal" type="button">&#61;</button>
	</div>

</div>	

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/math.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

</body>
</html>

该计算器源码还有几个JavaScript和css文件，
在这里插入图片描述

由于文件较多，文章篇幅有限，后续我打包上传到优快云中供大家下载。
如果大家不想用积分下载也可以点赞评论留下邮箱我发给你。
下载链接：https://download.youkuaiyun.com/download/qq_44394562/19137016?spm=1001.2014.3001.5501