找不到计算器？那就自己用javascript写一个吧

web前端群，189394454，有视频、源码、学习方法等大量干货分享

知识点: 布局的巧妙的运用，js运算判断，类型转换，符号与值的判断，赋值的类型，点击判断等。
👇html代码：

        <div id="jsq">
            <h2>计算器</h2>
            <div class="num" id="result">0</div>
            <div class="but">
                <ul>
                    <li onclick="command(7)">7</li>
                    <li onclick="command(8)">8</li>
                    <li onclick="command(9)">9</li>
                    <li class="tool">←</li>
                    <li class="tool" onclick="clearZero('j')">C</li>
                    <li onclick="command(4)">4</li>
                    <li onclick="command(5)">5</li>
                    <li onclick="command(6)">6</li>
                    <li class="tool">*</li>
                    <li class="tool" onclick="tools('/','g')">÷</li>
                    <li onclick="command(3)">3</li>
                    <li onclick="command(2)">2</li>
                    <li onclick="command(1)">1</li>
                    <li class="tool" onclick="tools('+','g')">+</li>
                    <li class="tool" onclick="tools('-','g')">-</li>
                    <li>0</li>
                    <li>00</li>
                    <li onclick="dian('g')">.</li>
                    <li class="tool">%</li>
                    <li class="tool2" onclick="eq('j')">=</li>
                </ul>
            </div>
            <p>欢迎作用轻量级计算器^_^</p>
        </div>

👇css代码：

        <style type="text/css">
            *{
                margin:0;/*外边距*/
                padding:0;/*内*/
            }
            body{
                background:#000000;
            }
            #jsq{
                width:540px;
                margin:80px auto;/*上下 左右*/
                box-shadow:0px 0px 10px #ffffff;
                border-radius:5px;
            }
            #jsq h2{
                color:white;
                text-indent:30px;
                font-weight:100;
                font-size:18px;
                font-family:'Microsoft Yahei';
                line-height:55px;
            }
            #jsq .num{
                border:1px solid yellow;
                background:#FFF7B2;
                width:480px;
                margin:0 auto;
                line-height:50px;
                font-size:50px;
                text-align:right;
                border-radius:5px;
            }
            #jsq .but{
                width:490px;
                height:310px;
                margin:35px auto 0px;
            }
            #jsq .but ul li{
                color:white;
                list-style-type:none;
                width:80px;
                height:60px;
                background:#212121;
                float:left;/*向左看齐*/
                margin:9px;
                box-shadow:0 0 5px white;
                border-radius:5px;
                text-align:center;
                line-height:60px;
                font-size:22px;
                font-family:'微软雅黑';
                cursor:pointer;
            }
            #jsq .but ul li.tool{
                background:#EF616E;
            }
            #jsq .but ul li.tool2{
                background:#FFAF3F;
            }
            #jsq p{
                color:white;
                font-size:12px;
                text-indent:30px;
                line-height:50px;
            }
        </style>

👇javascript代码：

        <script type="text/javascript">
            var resultDom = document.getElementById('result');
            var dianmark = true; //真的
            var mark = false;
            function command(num){
                
                var str = resultDom.innerText;
                str = (str=="0"?"":str)
                str= str+num; //字符串连接
                document.title = str;
                resultDom.innerText = str;
                mark = true;
                play(num);
            }

            //点击小数点
            function dian(m){
                if(dianmark){
                    var num = resultDom.innerText;
                    num = num+".";
                    resultDom.innerText = num;
                    dianmark = false;
                }
                play(m);
            }
            //点击运算符
            function tools(op,m){
                if(mark){
                    var num = resultDom.innerText;
                    num = (num =="0"?"":num) //如果。。。？那么就。。:否则。。
                    resultDom.innerText = num+op;
                    mark = false;
                }
            }
            
            //计算等于
            function eq(m){
                var result = resultDom.innerText;
                var r = eval(result);
                resultDom.innerText = r;
                mark = true;
                 play(m)
            }
            
            //清空
            function clearZero(m){
                resultDom.innerText = '0';
                mark = true;
                dianmark = true;
                play(m)
            }
            function play(num){
                var music = document.getElementById('music');
                    music.src = "wav/"+num+".wav";
                    music.play();
            }
        </script>