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

用JS实现了一个简单的计算器。

2015-11-20 13:25 726 查看

----恢复内容开始---

上午第二节课拿着电脑去教室，又练了上周老师讲的——用JS实现简单的计算器功能。连续点击数字按钮实现字符串相连那部分还是有点不太明白，晚上要再练习一遍。

还练习了网页时钟。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
div input{
margin-top: 10px;
height: 40px;
width: 40px;
border: none;
background-color: #999;
}
input{
border-radius: 8px;

}
</style>
</head>
<body>
<input class="show" type="text" id="show">
<div>
<input type="button" value="1" id="number">
<input type="button" value="2" id="number">
<input type="button" value="3" id="number">
<input type="button" id="operate" value="+">
</div>
<div>
<input type="button" id="number" value="4">
<input type="button" id="number" value="5">
<input type="button" id="number" value="6">
<input type="button" id="operate" value="-">
</div>
<div>
<input type="button" id="number" value="7">
<input type="button" id="number" value="8">
<input type="button" id="number" value="9">
<input type="button" id="operate" value="*">
</div>
<div>
<input type="button" style="width: 130px;" id="number" value="0">
<input type="button" id="operate" value="/">
</div>
<div>
<input type="button" id="count" value="计算" style="width: 85px;">
<input type="button" id="clear" value="清除" style="width: 85px;">
</div>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script>
var shownum1 = "";
var shownum2 = "";
var ope = "";
$("input#number").click(function(){
if(ope == ""){
$("#show").val(shownum1 + this.value);
shownum1 = $("#show").val();
}else{
$("#show").val(shownum2 + this.value);
shownum2 = $("#show").val();
}
}).mousedown(function(){
$(this).css("background-color","#ccc");
}).mouseup(function(){
$(this).css("background-color","#999");
})
$("input#operate").click(function(){
ope = $(this).val();
// $("#show").val("");
}).mousedown(function(){
$(this).css("background-color","#ccc");
}).mouseup(function(){
$(this).css("background-color","#999");
})
$("#count").click(function(){
switch(ope){
case "+" : $("#show").val(Number(shownum1) + Number(shownum2));break;
case "-" : $("#show").val(Number(shownum1) - Number(shownum2));break;
case "*" : $("#show").val(Number(shownum1) * Number(shownum2));break;
case "/" : $("#show").val(Number(shownum1) / Number(shownum2));break;
}

}).mousedown(function(){
$(this).css("background-color","#ccc");
}).mouseup(function(){
$(this).css("background-color","#999");
})
$("#clear").click(function(){
shownum1 = "";
shownum2 = "";
$("#show").val("");
ope = "";
}).mousedown(function(){
$(this).css("background-color","#ccc");
}).mouseup(function(){
$(this).css("background-color","#999");
})
</script>
</body>
</html>

---恢复内容结束--

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

标签：

相关文章推荐

新的分享

章节导航