您好,登录后才能下订单哦!
本文将为大家详细介绍“使用html+css+js实现简易计算器的案例”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“使用html+css+js实现简易计算器的案例”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。
1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。 3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
使用html+css+js实现简易计算器,
效果图如下:
html代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>calculator</title> <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" > <script type="text/javascript" src="contain.js"></script> <title>Document</title> </head> <body> <div class="calculator"> <form name="calculator"> <input type="text" id="display" value=""> <br> <input type="button" class="btn number txt" value="TYNAM"> <input type="button" id="clear" class="btn number" value="AC" onclick="cleardisplay();"> <input type="button" class="btn number" value="<-" onclick="del();"> <input type="button" class="btn operator" value="/" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="7" onclick="get(this.value);"> <input type="button" class="btn number" value="8" onclick="get(this.value);"> <input type="button" class="btn number" value="9" onclick="get(this.value);"> <input type="button" class="btn operator" value="*" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="4" onclick="get(this.value);"> <input type="button" class="btn number" value="5" onclick="get(this.value);"> <input type="button" class="btn number" value="6" onclick="get(this.value);"> <input type="button" class="btn operator" value="+" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="1" onclick="get(this.value);"> <input type="button" class="btn number" value="2" onclick="get(this.value);"> <input type="button" class="btn number" value="3" onclick="get(this.value);"> <input type="button" class="btn operator" value="-" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="0" onclick="get(this.value);"> <input type="button" class="btn number" value="." onclick="get(this.value);"> <input type="button" class="btn operator equal" value="=" onclick="calculates();"> </form> </div> </body> </html>
CSS代码如下:
* { border: none; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; } .calculator { background-color: #fff; height: 600px; margin: 50px auto; width: 600px; } form { background-color: rgb(75, 70, 71); padding: 5px 1px auto; width: 245px; } .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; } #display { outline: none; background-color: #dededc; color: rgb(75, 70, 71); font-size: 40px; height: 47px; text-align: right; width: 224px; margin: 10px 10px auto; } .number { background-color: rgb(143, 140, 140); color: #dededc; } .operator { background-color: rgb(239, 141, 49); color: #ffffff; } .equal{ width: 105px; } .txt{ font-size:12px; background: none; }
JS代码如下:
/* display clear */ function cleardisplay() { document.getElementById("display").value = ""; } /* del */ function del() { var numb = ""; numb = document.getElementById("display").value; for(i=0;i<numb.length;i++) { document.getElementById("display").value = numb.substring(0,numb.length-1); if(numb == '') { 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+js实现简易计算器的案例”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。