利用jQuery实现两种样式计算器代码



20 77 26



特效描述:利用jQuery实现 两种样式 计算器代码,利用jQuery实现两种样式计算器代码

代码结构

1. 引入CSS

<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">

2. 引入JS

<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>

3. HTML代码

<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>	



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
二十二
关注
TA的相关作品 >>更多
热搜关键词


热门标签: 滑动星星打分 其他 计算器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到