扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
HTML+CSS+JavaScript如何制作简易计算器?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
在大厂等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、网站设计 网站设计制作按需开发,公司网站建设,企业网站建设,成都品牌网站建设,全网营销推广,外贸网站建设,大厂网站建设费用合理。
实例描述:用HTML和CSS搭建页面,用JavaScript实现加减乘除的功能,当点击清零时,输入框没有值,当点击“=”时,显示计算结果,具体代码如下:
HTML部分:
计算器
CSS部分:
* { border: none; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; } .center { background-color: #fff; border-radius: 50%; height: 600px; margin: auto; width: 600px; } h2 { color: #495678; font-size: 30px; margin-top: 20px; padding-top: 50px; display: block; text-align: center; } form { background-color: #495678; margin: 40px auto; padding: 40px 0 30px 40px; width: 280px; } .btn { outline: none; cursor: pointer; font-size: 20px; height: 45px; margin: 5px 0 5px 10px; width: 45px; } .btn:first-child { margin: 5px 0 5px 10px; } .btn, #display, form { border-radius: 25px; } #display { outline: none; background-color: #98d1dc; color: #dededc; font-size: 20px; height: 47px; text-align: right; width: 165px; padding-right: 10px; margin-left: 10px; } .number { background-color: #72778b; color: #dededc; } .number:active { -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px); } .operator { background-color: #dededc; color: #72778b; } .operator:active { -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px); } .other { background-color: #e3844c; color: #dededc; } .other:active { -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px); }
JavaScript部分:
/* limpa o display */ document.getElementById("clear").addEventListener("click", function() { document.getElementById("display").value = ""; }); /* recebe os valores */ function get(value) { document.getElementById("display").value += value; } /* calcula */ function calculates() { var result = 0; result = document.getElementById("display").value; document.getElementById("display").value = ""; document.getElementById("display").value = eval(result); };
效果如图所示:
关于HTML+CSS+JavaScript如何制作简易计算器问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流