javaee论坛

普通会员

225648

帖子

324

回复

338

积分

楼主
发表于 2019-11-01 17:45:13 | 查看: 33 | 回复: 0

源码Demo

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>js计算器</title></head>

关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。

<style>*{border:none;margin:0auto;padding:0;font-family:'OpenSans',sans-serif;}.center{/*居中*/margin:0auto;text-align:center;}h1{color:#495678;font-size:30px;display:block;margin:25px;}form{background-color:#495678;box-shadow:4px4px#3d4a65;width:350px;height:380px;border-radius:18px;padding-top:45px;}.btn{cursor:pointer;font-size:20px;width:45px;height:45px;margin:10px;border-radius:15px;outline:none;/*避免点击按钮时出现轮廓*/}.number{background-color:#72778b;box-shadow:04px#5f6680;color:white;}.operator{background-color:#dededc;box-shadow:04px#bebebe;color:#72778b;}.other{background-color:#e3844c;box-shadow:04px#e76a3d;color:#dededc;}.btn:active{/*active设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式属性。*/box-shadow:2px2pxcornflowerblue;-webkit-transform:translateY(2px);/*谷歌*/-ms-transform:translateY(2px);/*IE*/-moz-tranform:translateY(2px);/*火狐*/transform:translateY(2px);/*Transform属性应用于元素的2D或3D转换,Y轴方向*/}#display{outline:none;background-color:#98d1dc;box-shadow:inset3px3px0#3facc0;/*color:#dededc;*/color:#666;width:190px;height:45px;font-size:20px;text-align:right;border-radius:15px;padding:010px;}</style><body><divclass="center"><h1>HTMLCSSJavaScript计算器</h1><formname="calculator"><inputtype="button"id="clear"class="btnother"value="C"><inputtype="text"id="display"><!--显示框--><inputtype="button"class="btnother"value="回退"onclick="fallback();"><br><inputtype="button"class="btnnumber"value="7"onclick="get(this.value);"><inputtype="button"class="btnnumber"value="8"onclick="get(this.value);"><inputtype="button"class="btnnumber"value="9"onclick="get(this.value);"><inputtype="button"class="btnoperator"value="+"onclick="get(this.value);"><br><inputtype="button"class="btnnumber"value="4"onclick="get(this.value);"><inputtype="button"class="btnnumber"value="5"onclick="get(this.value);"><inputtype="button"class="btnnumber"value="6"onclick="get(this.value);"><inputtype="button"class="btnoperator"value="-"onclick="get(this.value);"><br><inputtype="button"class="btnnumber"value="1"onclick="get(this.value);"><inputtype="button"class="btnnumber"value="2"onclick="get(this.value);"><inputtype="button"class="btnnumber"value="3"onclick="get(this.value);"><inputtype="button"class="btnoperator"value="*"onclick="get(this.value);"><br><inputtype="button"class="btnnumber"value="0"onclick="get(this.value);"><inputtype="button"class="btnoperator"value="."onclick="get(this.value);"><inputtype="button"class="btnoperator"value="/"onclick="get(this.value);"><inputtype="button"class="btnother"value="="onclick="calculates();"></form></div><script>//点击C按钮清理显示器document.getElementById('clear').addEventListener('click',function(){//addEventListener()方法用于向指定元素添加事件句柄。向id='clear'元素添加click事件,click事件是将id='display'的元素变为空''.document.getElementById('display').value="";});//接收值functionget(value){document.getElementById('display').value+=value;}functionfallback(){varstr=document.getElementById('display').valuedocument.getElementById('display').value=str.substring(0,str.length-1);}//计算functioncalculates(){varresult=0;result=document.getElementById('display').value;document.getElementById('display').value='';document.getElementById('display').value=eval(result);//eval()计算括号里的内容}</script></body></html>

您需要登录后才可以回帖 登录 | 立即注册

触屏版| 电脑版

技术支持 历史网 V2.0 © 2016-2017