知识点: 布局的巧妙的运用，js运算判断，类型转换，符号与值的判断，赋值的类型，点击判断等。
源代码：
<!--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></head><body> <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> <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></body>程序员小建议：
坚持大量实践
在开发上有所进步的最好方法就是大量写程序坚持做东西。作为老师，在我力所能及范围内我将会给予帮助。但是一旦掌握了足够的知识储备，你将有能力弄懂我告诉你的任何事情而不需要太多时间。所以坚持写程序吧。正如一位智者曾经告诉我的：“只要有耐心，成功不可避免。”
多读优秀代码
有太多的程序员比我们聪明了。他们写了很多代码，只要你需要你都可以阅读。
没有所谓的“最好的语言”
某些语言和工具只是在解决特定对应的问题时比其它的要好一点。当学习新的语言的时候，不要尝试把你过去的思维模式带到新的语言系统中。相应地，我们应该学会如何更“地道”用新语言编程。
web前端群：524262608，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。
关注公众号→‘学习web前端’跟大佬一起学前端！
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。