您的位置：首页 > Web前端 > JavaScript

利用css和javascript实现简单的计算器

2016-02-28 22:06 891 查看 
<!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>


音频文件的截图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航