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

来源：互联网发布：打不开网络共享文件夹编辑：程序博客网时间：2024/05/17 12:23
知识点: 布局的巧妙的运用，js运算判断，类型转换，符号与值的判断，赋值的类型，点击判断等。
源代码：
<!doctype html><html lang="en">    <head>        <!--声明当前页面的编码集GBK,gb2312(中文编码)，UTF-8(国际编码)-->        <metacharset="UTF-8">                <!--声明当前页面三要素-->        <title>网页标题</title>        <metaname="Keywords"content="123">        <metaname="Description"content="456">                        <!--css样式 层叠样式表 化妆品 衣服-->        <styletype="text/css">            *{                margin:0;/*外边距*/                padding:0;/*内*/            }            body{                background:#000000;            }            #jsq{                width:540px;                margin:80pxauto;/*上下 左右*/                box-shadow:0px0px 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:1pxsolid yellow;                background:#FFF7B2;                width:480px;                margin:0auto;                line-height:50px;                font-size:50px;                text-align:right;                border-radius:5px;            }            #jsq .but{                width:490px;                height:310px;                margin:35pxauto 0px;            }            #jsq .but ul li{                color:white;                list-style-type:none;                width:80px;                height:60px;                background:#212121;                float:left;/*向左看齐*/                margin:9px;                box-shadow:00 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>    </head>    <body>        <divid="jsq">            <h2>计算器</h2>            <divclass="num"id="result">0</div>            <divclass="but">                <ul>                    <lionclick="command(7)">7</li>                    <lionclick="command(8)">8</li>                    <lionclick="command(9)">9</li>                    <liclass="tool">←</li>                    <liclass="tool"onclick="clearZero('j')">C</li>                    <lionclick="command(4)">4</li>                    <lionclick="command(5)">5</li>                    <lionclick="command(6)">6</li>                    <liclass="tool">*</li>                    <liclass="tool"onclick="tools('/','g')">÷</li>                    <lionclick="command(3)">3</li>                    <lionclick="command(2)">2</li>                    <lionclick="command(1)">1</li>                    <liclass="tool"onclick="tools('+','g')">+</li>                    <liclass="tool"onclick="tools('-','g')">-</li>                    <li>0</li>                    <li>00</li>                    <lionclick="dian('g')">.</li>                    <liclass="tool">%</li>                    <liclass="tool2"onclick="eq('j')">=</li>                </ul>            </div>            <p>欢迎作用轻量级计算器^_^</p>        </div>                        <scripttype="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>    </body></html>
web前端/JavaScript/html5学习群：575308719
关注公众号→‘学习web前端’跟大佬一起学前端！
阅读全文
0 0