本文实例为大家分享了JavaScript实现简单计算器的具体代码,供大家参考,具体内容如下
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算器</title> <style> *{padding: 0;margin: 0;box-sizing: border-box;} body>div{width: 300px;height: 400px;background-color: rgb(141, 141, 141);display: flex;justify-content: space-around;flex-direction: column;margin: auto;border: 2px solid #000;position: relative;} body>div>div{height: 16%;margin: 0 8px;padding: 10px;line-height: 40px; border: 3px double #000;font-size: 40px;text-align: right;background-color: rgb(221, 221, 221);overflow: hidden;} body>div>ul{list-style: none;display: flex;flex-wrap: wrap;justify-content: space-around;user-select: none;} body>div>ul>li{border: 1px solid #000;width: 50px;height: 50px;padding: 15px;cursor: pointer; text-align: center;background-color: rgb(219, 219, 219); border-radius: 10%;margin: 10px;} body>div>ul>li:hover{background-color: rgb(126, 126, 126);border: 1px solid rgb(255, 228, 228);border: 1px solid rgb(201, 201, 201);} body>div>span{position: absolute;font-size: 5px;top: 380px;left: 230px;color: rgb(94, 94, 94);} </style> </head> <body> <div> <div></div> <ul> <li>0</li> <li>C</li> <li>/</li> <li>*</li> <li>7</li> <li>8</li> <li>9</li> <li>-</li> <li>4</li> <li>5</li> <li>6</li> <li>+</li> <li>1</li> <li>2</li> <li>3</li> <li>=</li> </ul> <span>隂陽G.M ©</span> </div> <script> var ul=document.querySelector("body>div>ul"); var XS=document.querySelector("body>div>div"); ul.onclick=function(e){ if(e.target.nodeName=="LI"){ switch(e.target.innerHTML){ case "C":XS.innerHTML="";break; case "=":try{XS.innerHTML=eval(XS.innerHTML)}catch(err){XS.innerHTML="错误"};break; default: XS.innerHTML+=e.target.innerHTML; } } } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。