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

HTML+CSS+JavaScript写了个简易的计算器

2018-02-12 20:56 309 查看

跟着教学视频学javascript，课后实践让写一个简单的计算器，花了几个小时写了这个很“笨拙”的计算器。

1、html<html>
<head>
<link href="calculator.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="calculator.js">
</script>
</head>
<body>
<div class="calcu">
<table >
<tr><td colspan=5>My Calculator</tr>
<tr><td colspan=5><input id="text" class="text" width=395px type='text' name='text' value='0'/></td></tr>
<tr><td><input onclick="calculater(this)" class="button" type='button' value='7'/></td><td><input onclick="calculater(this)" class="button" type='button' value='8'/></td><td><input onclick="calculater(this)" class="button" type='button' value='9'/></td><td><input onclick="calculater(this)" class="button" type='button' value='X'/></td><td><input onclick="calculater(this)" class="button" type='button' value='C'/></td></tr>
<tr><td><input onclick="calculater(this)" class="button" type='button' value='4'/></td><td><input onclick="calculater(this)" class="button" type='button' value='5'/></td><td><input onclick="calculater(this)" class="button" type='button' value='6'/></td><td><input onclick="calculater(this)" class="button" type='button' value='+'/></td><td><input onclick="calculater(this)" class="button" type='button' value='-'/></td></tr>
<tr><td><input onclick="calculater(this)" class="button" type='button' value='1'/></td><td><input onclick="calculater(this)" class="button" type='button' value='2'/></td><td><input onclick="calculater(this)" class="button" type='button' value='3'/></td><td><input onclick="calculater(this)" class="button" type='button' value='*'/></td><td><input onclick="calculater(this)" class="button" type='button' value='/'/></td></tr>
<tr><td><input onclick="calculater(this)" class="button" type='button' value='0'/></td><td><input onclick="calculater(this)" class="button" type='button' value='.'/></td><td><input onclick="calculater(this)" class="button" type='button' value='%'/></td><td colspan=2><input onclick="results()" class="button" type='button' value='='/></td></tr>
</table>
</div>
</body>
</html>2、css

.calcu{
margin:0 auto;
border:1px #898989 solid;
width:405px;
height:305px;
background-color:ECECEC;
}
table{
font-size:10;
text-align:center;
table-layout:fixed;
width:405px;
height:300px;
}
input{
font-size:18;
width:100%;
height:100%;
}
.text{
text-align: right;
background-color:ECECEC;
outline:none;
border:none;
font-size:50;
}

.button{
background-color:FAFAFA;
outline:none;
border:none;
}
.button:hover{
background-color:#898989;
cursor: pointer;
}

3、javascriptvar values="";
//把算式放在text上
function calculater(button){
text=document.getElementById("text");
//归零
if(button.value=="C")
{
values="";
text.value="0";
return;
}
//按下等号则return
if (button.value=="=") {
return;
}

values+=button.value;
//按下删除X，删除X已经最后输入的字符
if (button.value=="X") {
values=values.substr(0,values.length-2);
}
text.value=values;
}
//计算并把结果放在text上
function results(){
try{
result=eval(values);
text=document.getElementById("text");
text.value=result;
}
catch(e)
{
text.value="输入有误";
values="";
return;
}

}。。。得到按钮的value后，再交给text.value，这样按下去过一会会才会在text上显示。现在只会这样做，学到后面再用更好的方法把。
今天第一次看到codepen，看到几个案例后把我吓到了，被web前端的制造力和别人的创意所惊吓。我要学的真的事太多太多了。

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

标签： Javascript html css

相关文章推荐

新的分享

章节导航