效果知识点：switch关键字，if判断，项目功能分析，函数封装形参实参，字符串拼接。

文章分享之前小编推荐一下我的前端学习群：575308719，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我精心整理的一份前端教程，欢迎初学和进阶中的小伙伴。

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>