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、大家可以试着尝试一下哦！谢谢浏览！