用js+html实现一个简易版的计算器资源-CSDN文库

共1个文件

html：1个

版权申诉

javascript

html

计算器

简易计算器

5星 · 超过95%的资源 110 浏览量 2022-07-02 17:07:28 上传评论收藏 1KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Easy_calculator.zip （1个子文件）

Easy_calculator

calculator.html 4KB

<html> <head> <style> *{margin:0;padding:0;} input{font-size:40px;font-family:"楷体";} input[type=button]{width:60px;;margin:10px;} input[type=text]{width:400px;text-align:right;} div{width:400px;background:black;font-size:40px;text-align:center;margin:50px auto;} #wunian{width:400px;text-align:left;background:blue;font-size:30px;color:white;} #movie,#theme{width:160px;} </style> <script> function btbNumberClickHander(sender){ var txtDisplay=document.getElementById("txtDisplay"); var txt=txtDisplay.value; if(txt=="0")txt=""; txt+=sender.value; txtDisplay.value=txt; } function clearTxt(){ var txtDisplay=document.getElementById("txtDisplay"); var txt=txtDisplay.value; if(txt=="0")return; txt="0"; txtDisplay.value=txt; } function backSpace(){ var txtDisplay=document.getElementById("txtDisplay"); var txt=txtDisplay.value; if(txt.length==1)txt="0"; else txt=txt.substr(0,txt.length-1); txtDisplay.value=txt; } function acquireResult(){ var txtDisplay=document.getElementById("txtDisplay"); var txt=txtDisplay.value; var result=eval(txt); txt+="="; txt+=result; txtDisplay.value=txt; } var i=0; function setTextColor(){ var txtDisplay=document.getElementById("txtDisplay"); var src; switch(i){ case 0:src="red";break; case 1:src="blue";break; case 3:src="green";break; case 4:src="pink";break; case 5:src="purple";break; case 6:src="black";break; } txtDisplay.style.background=src; i++; if(i>6)i=0; } var j=0; function setThemeColor(){ var container=document.getElementById("container"); var src; switch(j){ case 0:src="red";break; case 1:src="blue";break; case 3:src="green";break; case 4:src="pink";break; case 5:src="purple";break; case 6:src="black";break; } container.style.background=src; j++; if(j>6)j=0; } </script> </head> <body> <div id="container"> <input type="text" value="勿念计算器" id="wunian" readOnly="readOnly"> <input type="text" value="0" id="txtDisplay"> <input type="button" value="0" onclick="btbNumberClickHander(this)"/> <input type="button" value="<--" onclick="backSpace()"/> <input type="button" value="ce" onclick="clearTxt()"/> <input type="button" value="+" onclick="btbNumberClickHander(this)"/> <input type="button" value="1" onclick="btbNumberClickHander(this)"/> <input type="button" value="2" onclick="btbNumberClickHander(this)"/> <input type="button" value="3" onclick="btbNumberClickHander(this)"/> <input type="button" value="-" onclick="btbNumberClickHander(this)"/> <input type="button" value="4" onclick="btbNumberClickHander(this)"/> <input type="button" value="5" onclick="btbNumberClickHander(this)"/> <input type="button" value="6" onclick="btbNumberClickHander(this)"/> <input type="button" value="*" onclick="btbNumberClickHander(this)"/> <input type="button" value="7" onclick="btbNumberClickHander(this)"/> <input type="button" value="8" onclick="btbNumberClickHander(this)"/> <input type="button" value="9" onclick="btbNumberClickHander(this)"/> <input type="button" value="/" onclick="btbNumberClickHander(this)"/> <input type="button" value="." onclick="btbNumberClickHander(this)"/> <input type="button" value="=" onclick="acquireResult()"/> <input type="button" value="(" onclick="btbNumberClickHander(this)"/> <input type="button" value=")" onclick="btbNumberClickHander(this)"/> <input type="button" value="屏幕" id="movie" onclick="setTextColor()"/> <input type="button" value="主题" id="theme" onclick="setThemeColor()"/> </div> </body> </html>

评论收藏

内容反馈

版权申诉