JavaScript实现简单计算器小程序

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助

1. 本站所有资源来源于用户分享和网络转载,如有侵权请联系站长删除!
2. 分享目的仅供大家学习参考,源码类您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!

917资源网 » JavaScript实现简单计算器小程序

发表评论

提供最优质的资源集合

立即查看 了解详情