jquery简单计算机功能代码实例
分类：实例代码
本章节分享一段代码实例，它实现了简单的计算器功能。
能够实现简单的数学计算功能，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body {
padding: 0;
margin: 0;
font-family: "mircosoft yahei";
font-size: 30px;
}
.warp {
width: 500px;
margin: 0 auto;
}
.top {
box-sizing: border-box;
width: 500px;
height: 250px;
background-color: #707070;
border-radius: 30px 30px 0 0;
box-shadow: inset 0 0 5px 15px rgba(0,0,0,0.6);
}
.topic {
margin: 10px 0 0 30px;
}
.topic span:nth-child(1) {
display: inline-block;
padding: 10px 0 0 0;
font-size: 28px;
color: #ff6600;
text-shadow: -1px -1px 0px #000,1px 1px #eee,1px 1px 0 #fff;
vertical-align: bottom;
}
.topic span:nth-child(2) {
padding: 5px 0 0 0;
font-size: 28px;
color: #3CB371;
margin: -10px 0 0 30px;
text-shadow: -1px -1px 0px #fff,1px 1px #333,1px 1px 0 #444;
}
.screen {
width: 400px;
height: 100px;
background-color: #C5C1AA;
border-radius: 20px;
margin: 5px auto;
border: 20px solid #C1CDC1;
position: relative;
overflow: hidden;
}
.screen .calculation {
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
}
.screen .result {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 40px;
}
.right {
right: 425px;
transform: rotate(180deg);
}
.main {
width: 500px;
height: 520px;
background-color: #8C8C8C;
position: relative;
top: -35px;
display: flex;
flex-flow: row;
flex-wrap: wrap;
border-radius: 20px 20px 50px 50px;
align-content: flex-start;
padding: 0 0 0 25px;
box-shadow: inset 0 0 3px 15px rgba(0,0,0,.7),0 -15px 3px 0 rgba(0,0,0,0.7);
box-sizing: border-box;
}
.main span:nth-child(1) {
font-size: 28px;
margin: 35px 0 0 20px;
font-weight: 600;
text-shadow: 0px 2px 2px #fff;
}
.open {
width: 50px;
height: 25px;
background-color: #000;
box-shadow: inset 0px 0px 3px 5px rgba(33,33,33,0.5),inset 0 0px 5px 5px rgba(33,33,33,.8);
border-radius: 10px;
margin: 40px 0 0px 40px;
color: white;
text-align: center;
font-size: 22px;
cursor: pointer;
}
.close {
width: 50px;
height: 25px;
background-color: #000;
box-shadow: inset 0px 0px 3px 5px rgba(33,33,33,0.5),inset 0 0px 5px 5px rgba(33,33,33,.8);
border-radius: 10px;
margin: 40px 10px 0 20px;
color: white;
text-align: center;
font-size: 22px;
cursor: pointer;
}
.num {
width: 70px;
height: 50px;
background-color: #C5C1AA;
box-shadow: inset 0 -5px 3px 2px rgba(0,0,0,0.4),
inset 0 -2px 5px 0px rgba(0,0,0,.6),0 0 1px 1px rgba(0,0,0,.9),
inset 0 2px 2px 0 rgba(255,255,255,.8);
padding: 0 0 5px 0;
border-radius: 10px;
text-align: center;
line-height: 50px;
margin: 20px 10px 10px 10px;
color: white;
cursor: pointer;
transition: box-shadow 300ms ease;
}
.fun {
width: 70px;
height: 50px;
box-shadow: inset 0 -2px 5px 3px rgba(33,33,33,.6),
0 0 1px 1px rgba(0,0,0,.8),
inset 0 1px 2px 0 rgba(255,255,255,0.6);
background-color: #000;
border-radius: 12px;
text-align: center;
line-height: 50px;
margin: 20px 10px 10px 10px;
color: white;
cursor: pointer;
}
.fun:active {
box-shadow: inset 0 0 2px 1px rgba(73,73,73,.6),0 0 0 1px rgba(0,0,0,.6);
}
.special {
position: absolute;
bottom: 62px;
right: 25px;
width: 70px;
height: 110px;
background-color: #000;
box-shadow: inset 0 0px 5px 3px rgba(73,73,73,.8),0 0 1px 1px rgba(0,0,0,.8);
border-radius: 10px;
text-align: center;
line-height: 110px;
margin: 20px 10px 10px 10px;
color: white;
cursor: pointer;
}
.num:active {
box-shadow: inset 0 -2px 5px 1px rgba(0,0,0,0.6),0 0 1px 1px rgba(0,0,0, .8);
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script>
$(document).ready(function($) {
var result = $("#result");
var progress = $("#calculation");
var open = $("#open");
var close = $("#close");
var data = [];
var d_data = [];
var inx = 0;
var inx1 = 1;
var link = "";
var value = "";
var show = "";
var last = 0;
var flag = 0;
//开机
open.bind("mousedown", function(event) {
/* Act on the event */
value = $(this).text();
if (value == "NO") {
result.text("0");
}
//遍历按键
$("#main div").each(function(index, el) {
//触发事件
$(this).bind("mousedown", function() {
value = $(this).text();
// 判断是否出清除键
if (value == "AC") {
result.text("0");
initi();
}
//等号，清除，开机，关机，操作屏幕是不输出的
if (value != '=' && value != 'AC' && value != "NO" && value != "OFF") {
show += value;
check(show);
progress.text(show);
}
//多个数字连载一起是需要合成一个数组的
if (!isNaN(value) || value == ".") {
link += value;
} else {
//存储数字
data[inx] = Number(link);
inx += 2;
link = '';
// 等号不计入符号数组内
if (value != '=') {
//存储符号
data[inx1] = value;
inx1 += 2;
}
//要求输入且有俩个操作数
if (inx >= 2 && value == "=") {
handle(data);
initi();
}
//存储上一次结果
if (flag == 1) {
if (value == "M+" || value == "M-") {
data[0] = last;
flag = 0;
}
}
}
})
});
//判断符号优先级
//判断操作符号的匹配
function handle(data) {
for (var i = 1; i < data.length; i = i + 2) {
switch (data[i]) {
case "+":
case "M+":
once = add(data, i);
last = once;
break;
case "-":
case "M-":
once = sub(data, i);
last = once;
break;
case "*":
once = mul(data, i);
break;
case "÷":
once = div(data, i);
break;
case "%":
once = remainder(data, i);
break;
case "+/-":
once = mis(data, i);
break;
case "√":
once = radical(data, i);
break;
}
};
flag = 1;
result.text(once);
}
//初始到最初的状态
function initi() {
inx = 0;
inx1 = 1;
progress.text("");
link = '';
show = '';
}
//进行对应符号的运算
function add(data, index) {
return data[index + 1] = data[index - 1] + data[index + 1];
}
function sub(data, index) {
data[index + 1] = data[index - 1] - data[index + 1];
return data[index + 1] = data[index + 1].toFixed(1);
}
function mul(data, index) {
return data[index + 1] = data[index - 1] * data[index + 1];
}
function div(data, index) {
return data[index + 1] = data[index - 1] / data[index + 1];
}
function remainder(data, index) {
return data[index + 1] = data[index - 1] % data[index + 1];
}
function radical(data, index) {
console.log(data[index + 1]);
return data[index + 1] = Math.sqrt(data[index + 1]);
}
function mis(data, index) {
return data[index + 1] = -data[index + 1];
}
//检测输入是否合法
function check(show) {
var i = 0;
var j = 0;
while (!isNaN(show[i]) && i < show.length) i++;
while (isNaN(show[i]) && i < show.length && show[0] != "M" && show[0] != "√" &&
show[i] != "/" && show[i] != "N" && show[i] != "O") {
i++;
j++;
if (j > 1) {
result.text("您的输入不合法");
initi();
break;
}
}
}
})
//关机操作
close.mousedown(function(event) {
/* Act on the event */
result.text("");
progress.text("");
});
})
</script>
</head>
<body>
<div class="warp">
<div class="top">
<!--文字显示-->
<div class="topic">
<span>CASIO</span>
<span>MS-80V</span>
</div>
<!--显示器-->
<div class="screen">
<span class="calculation" id="calculation"></span>
<span class="result" id="result"></span>
</div>
<!--按键区域-->
</div>
<div class="main" id="main">
<span>AUTO POWER OFF</span>
<div class="open" id="close">OFF</div>
<div class="close" id="open">NO</div>
<div class="fun">MC</div>
<div class="fun">MR</div>
<div class="fun">M-</div>
<div class="fun">M+</div>
<div class="fun">÷</div>
<div class="fun">%</div>
<div class="num">7</div>
<div class="num">8</div>
<div class="num">9</div>
<div class="fun">*</div>
<div class="fun">+/-</div>
<div class="num">4</div>
<div class="num">5</div>
<div class="num">6</div>
<div class="fun">-</div>
<div class="fun">√</div>
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="special ">+</div>
<div class="num">0</div>
<div class="fun">AC</div>
<div class="num">0</div>
<div class="num">.</div>
<div class="fun">=</div>
</div>
</div>
</body>
</html>
jquery简单计算机功能代码实例，这样的场景在实际项目中还是用的比较多的，关于jquery简单计算机功能代码实例就介绍到这了。
jquery简单计算机功能代码实例属于前端实例代码，有关更多实例代码大家可以查看。