<!doctype html> <html> <head> <!--声明当前页面的编码集--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>计算器</title> <!-- 关键字和描述是用在像百度搜索之类的搜索的引擎上的 --> <meta name="keywords" content="计算器" /> <meta name="description" content="基于java开发的计算器的百度轻应用" /> <!-- css/js --> <!-- css层叠样式表 --> <!-- class=.cac这里的高度height:460px;是需要去掉的, 将高度固定了, 再在div里面添加东西的时候会露出在外面 --> <style type="text/css"> *{margin:0px;padding:0px} body{background:#e2e2e2;font-size:12px;font-family:"verdana";} /*cac start*/ .cac{width:830px;background:#f2f2f2;margin:40px auto;padding:10px} .cac .c_title{font-family:"仿宋";padding:10px 0px 10px 10px;font-size:24px;color:#000;cursor:move;} /* 控制输入框里面的字体 */ .cac .c_show .c_txt{width:810px;height:42px;border:none;outline:none;font-size:34px;font-family:"verdana";color:#999;line-height:42px;text-align:right;padding-right:20px;} .cac .c_key ul{border:1px solid snow;margin:14px 0;} .cac .c_key ul li{border:1px solid snow;list-style:none;width:140px;height:65px;background:#e2e2e2;float:left;font-size:32px;text-align:center;margin:11px;line-height:65px;cursor:pointer;} .cac .c_key ul li:hover{background:snow;} .cac .c_key .c_tools{background:#738fd8;} .cac .c_key .c_equ{background:#f90;} /*cac end*/ .clear{clear:both;} </style> </head> <body> <!-- cac start --> <div class="cac"> <div class="c_title">计算器</div> <div class="c_show"> <input id="c_result" type="text" class="c_txt" value="0" onfocus="this.blur()"/> </div> <div class="c_key"> <ul> <li onclick="command(7);">7</li> <li onclick="command(8);">8</li> <li onclick="command(9);">9</li> <li class="c_tools" onclick="backspace('j')">←</li> <li class="c_tools" onclick="clearzero();">C</li> <li onclick="command(4);">4</li> <li onclick="command(5);">5</li> <li onclick="command(6);">6</li> <li class="c_tools" onclick="tools('*','g');">×</li> <li class="c_tools" onclick="tools('/','g');">÷</li> <li onclick="command(1);">1</li> <li onclick="command(2);">2</li> <li onclick="command(3);">3</li> <li class="c_tools" onclick="tools('+','g');">＋</li> <li class="c_tools" onclick="tools('-','g');">－</li> <li onclick="command(0);">0</li> <li onclick="command('00');">00</li> <li onclick="dot('g');">.</li> <li class="c_tools" onclick="tools('%','g');">%</li> <li class="c_equ" onclick="equ('j');">＝</li> <!-- 哪里浮动在哪里清除 --> <div class="clear"></div> </ul> </div> <div class="c_welcome">欢迎使用计算器</div> </div> <!-- cac end --> <br> <div id="audDom"></div> <script type="text/javascript"> //运算的代码, 获取输入框的内容 var resultDom = document.getElementById("c_result"); //操作符加锁 var operate = true; var xop = true; var afequ = true; //点击播放声音 function command(num) { //点击等号之后要进行一次清空 if(!afequ) { clearzero(); } //获取输入框中value的值 var str = resultDom.value; //在这里加一个判断, 如果第一位是0, 就用""填充 str = str=="0"?"":str; //拼接数字, 然后赋值给文本框 str+=num; resultDom.value = str; //锁住操作符 operate = true; //播放音效 play(num); } //点击小数点 function dot(m) { //点击等号之后要进行一次清空 if(!afequ) { clearzero(); } if(xop) { var num = resultDom.value; num = num + "."; resultDom.value = num; xop = false; } play(m); } //点击操作符的方法, m相当于num function tools(op,m) { //点击等号之后要进行一次清空 if(!afequ) { afequ = true; } if(operate) { var num = resultDom.value; num = (num=="0"?"":num); //拼接操作符 resultDom.value = num + op; operate = false; xop = true; } //播放音效 play(m); } //点击等号, 计算等号 function equ(m) { play(m); var result = resultDom.value; var r = eval(result); resultDom.value = r; operate = true; var r = resultDom.value; afequ = false; xop = r.indexof(".")==-1?true:false; } //清空 function clearzero() { resultDom.value = 0; operate = true; xop = true; afequ = true; } //退格键的实现 function backspace(m) { play(m); if(resultDom.value==0) { operate = true; xop = true; } else if(resultDom.value!=0) { var str = resultDom.value; var str1 = str.substring(0,str.length-1); resultDom.value = (str1==""?0:str1); } } //播放音效 function play(num) { var adDom = document.getElementById("audDom"); //用参数来组合src的地址 adDom.innerHTML = "<embed src='wav/"+num+".wav' width='0' height='0'></embed>"; } </script> </body> </html>
音频文件的截图
