您的位置：首页 > Web前端 > JavaScript

js 实现简单计算器+代码

2018-01-22 16:50 288 查看

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>计算器</title>
<style>
#screen {
width: 150px;
height: 50px;
background-color: white;
font-size: 20px;
resize:none;
}

button {
width: 35px;
height: 35px;
background-color: greenyellow;
}

#title {
text-align: center;
}

#bk {
width: 200px;
height: 350px;
border: 1px solid #333;
text-align: center;
float: left;
border-radius: 4px;
margin: 1px;
background-color: yellow;
}
</style>
</head>

<body>
<div id="bk">
<p id="title">亮亮计算器</p>
<textarea id="screen" name="screen" disabled="disabled"></textarea>
<br></br>
<button value="1" name="num">1</button>
<button value="2" name="num">2</button>
<button value="3" name="num">3</button>
<button value="4" name="num">4</button>
<br></br>
<button value="5" name="num">5</button>
<button value="6" name="num">6</button>
<button value="7" name="num">7</button>
<button value="8" name="num">8</button>
<br></br>
<button value="9" name="num">9</button>
<button value="0" name="num">0</button>
<button value="+" name="operate">+</button>
<button value="-" name="operate">-</button>
<br></br>
<button value="*" name="operate">*</button>
<button value="/" name="operate">/</button>
<button value="=" name="last">=</button>
<button value="ac" name="ac">ac</button>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$sum1 = 0;
$sum2 = 0;
$operate = "";
$a = 1;
$b = "";
$c = "";
$(document).ready(function() {
$("button[name='num']").click(function() {
if($a == 1) {
$sum1 = $(this).val().toString();
var $text = $("#screen").val() + $sum1;
$b += $sum1;
$sum1 = $b;
} else {
$sum2 = $(this).val().toString();
var $text = $("#screen").val() + $sum2;
$c += $sum2;
$sum2 = $c;
}
$("#screen").val($text);
});
$("button[name='operate']").click(function() {
if($sum1 != "") {
$a = 2;
$operate = $(this).val();
var $text = $("#screen").val() + $operate;
$("#screen").val($text);
}

});
$("button[name='last']").click(function() {
var $s1 = parseInt($sum1);
var $s2 = parseInt($sum2);
if($operate == "+") {
var $s3 = $s1 + $s2;
}
if($operate == "-") {
var $s3 = $s1 - $s2;
}
if($operate == "*") {
var $s3 = $s1 * $s2;
}
if($operate == "/") {
var $s3 = $s1 / $s2;
}
var $t = "=";
var $text = $("#screen").val() + $t + $s3;
$("#screen").val($text);

});
$("button[name='ac']").click(function() {
$sum1 = 0;
$sum2 = 0;
$operate = "";
$a = 1;
$b = "";
$c = "";
$("#screen").val("");
});

});
</script>
</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js jquery

相关文章推荐

新的分享

章节导航