使用JavaScript写一个简易计算器
方法/步骤
-
1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#computer{
width: 200px;
height: 300px;
margin: 50px 50px;
font-weight :bold;
}
#ipt{
width: 100%;
height: 40px;
}
#computer ul{
width: 100%;
height: 260px;
}
#computer ul li{
width: 24%;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
border: 1px solid black;
list-style:none;
}
</style>
<body>
<div id='computer'>
<input type="" name="" id="ipt" value="" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>+</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>-</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>*</li>
<li>0</li>
<li id='eql'>enter</li>
<li>.</li>
<li>/</li>
</ul>
</div>
</body>
<script>
var com=document.getElementById('computer');
var aLi=document.getElementsByTagName('li');
var ipt=document.getElementById('ipt');
var eql =document.getElementById('eql');
//循环事件
for(i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
ipt.value+= this.innerText;
}
//鼠标移入变色
aLi[i].onmouseover=function(){
this.style.background='yellow'
}
//鼠标移出变回原来的颜色
aLi[i].onmouseout=function(){
this.style.background=''
}
}
//点击事件
eql.onclick=function(){
ipt.value = eval( ipt.value);
}
ipt.onclick=function(){
ipt.value=''
}
</script>
</html>
-
2
大家可以试着尝试一下哦！谢谢浏览！
END
文章评论