我做的这个计算器只是简单的四则运算计算器，主要实现的功能就只是四则运算以及连续的运算，并不包含复杂的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
//前边用简单的DIV布局，做出大致的计算器框架
//将按键主要分为三大块：数字部分，操作运算部分，以及独立的部分（清除，百分号。等号，退格功能）
#zym{
width: 1400px;
height: 800px;
border: 1px blueviolet solid;
background-image: url(img/ds.jpg);
background-size:100% 100% ;
}
#wai{
width: 400px;
height: 520px;
border: 2px skyblue solid;
margin-left: 500px;
margin-top: 150px;
}
#div1{
width: 380px;
height: 80px;
border: 0.1px black solid;
margin-left: 10px;
margin-top: 10px;
}
#div2{
width: 380px;
height: 410px;
border: 1px skyblue solid;
margin-left: 10px;
margin-top: 10px;
}
.jianpan{
width: 360px;
height: 70px;
border: 0px black solid;
margin-left: 10px;
margin-top: 10px;
}
.num{
width: 80px;
height: 70px;
border: 0px black solid;
margin-left: 13px;
float: left;
border-radius: 10px;
}
.czf{
width: 80px;
height: 70px;
border: 0px black solid;
margin-left: 13px;
float: left;
border-radius: 10px;
}
.duli{
width: 80px;
height: 70px;
border: 0px black solid;
margin-left: 13px;
float: left;
border-radius: 10px;
}
#result{
width: 174px;
}
span{
font-size: 25px;
}
input{
width: 375px;
height: 80px;
font-size:60px;
}
input:disabled{
background-color: ghostwhite;
}
button:hover{
background-color: lightgrey;
}
</style>
</head>
<body>
<div id="zym" >
<div id="wai">
//在div1中，主要是实现显示屏功能
<div id="div1">
<input type="text" name="" id="show" value="0" disabled="disabled" />
</div>
<div id="div2">
//在div2中实现按键功能
<div id="div21" class="jianpan">
<button type="button" id="clear" class="duli" style="margin-left: 0px;"><span >C</span></button>
<button type="button" id="del" class="duli"><span >DEL</span></button>
<button type="button" id="bfh" class="duli"><span >%</span></button>
<button type="button" class="czf"><span >/</span></button>
</div>
<div id="div22" class="jianpan">
<button type="button" class="num" style="margin-left: 0px;"><span >7</span></button>
<button type="button" class="num"><span >8</span></button>
<button type="button" class="num"><span >9</span></button>
<button type="button" class="czf"><span >*</span></button>
</div>
<div id="div23" class="jianpan">
<button type="button" class="num" style="margin-left: 0px;"><span >4</span></button>
<button type="button" class="num"><span >5</span></button>
<button type="button" class="num"><span >6</span></button>
<button type="button" class="czf"><span >-</span></button>
</div>
<div id="div24" class="jianpan">
<button type="button" class="num" style="margin-left: 0px;"><span >1</span></button>
<button type="button" class="num"><span >2</span></button>
<button type="button" class="num"><span >3</span></button>
<button type="button" class="czf"><span >+</span></button>
</div>
<div id="div25" class="jianpan">
<button type="button" class="num" style="margin-left: 0px;"><span >0</span></button>
<button type="button" class="num"><span >.</span></button>
<button type="button" id="result" class="duli"><span >=</span></button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/* 思路：1.布局页面
2.页面按键分为三类 数字和小数点归为一类，操作符归为一类， 退格 等号 清除 显示框 百分号单独的
3.通过id 或者class 先获取出这些dom元素
4.把我们点的数字显示上去,我们需要给所有数字设置点击事件
*/
//获取显示框
var show_result = document.getElementById("show");
//获取清除键
var clear_btn = document.getElementById("clear");
//获取退格键
var del_btn = document.getElementById("del");
//获取等号
var result_btn = document.getElementById("result");
//获取百分号
var bfh_btn = document.getElementById("bfh");
//获取所有的数字键
var nums = document.getElementsByClassName("num");
//获取所有的操作符键
var czfs = document.getElementsByClassName("czf");
//定义三个变量,来存储第一个数字,第二个数字,运算符
var numValue1 = '';
var numValue2 = '';
var ysf = '';
//给数字置点击
for (var i = 0; i < nums.length; i++) {
nums[i].onclick = function() {
//取出标签之间的数字
if(this.innerText=='.'){
if(numValue1.indexOf('.')==-1){
numValue1 += this.innerText;
}else{
numValue1 += this.innerText;
numValue1 = numValue1.substring(0, numValue1.length - 1);
}
}else{
numValue1 += this.innerText; //注意this代表的是你点击的那个元素对象
}
if(numValue1=='.'){
numValue1=0+numValue1;
}
show_result.value =numValue1*1;
}
}
//给%设置监听事件
bfh_btn.onclick=function(){
numValue1=numValue1*0.01;
show_result.value = numValue1;
}
//给操作符设置点击事件
for (var i = 0; i < czfs.length; i++) {
czfs[i].onclick = function() {
if(numValue2==''){
//当你点击操作符号时:我们把第一个数字,给第二个数字,然后把第一个数字清空,用来接收用户下次的输入
//保存操作符
numValue2 = numValue1;
numValue1 = '';
ysf = this.innerText;
}else{
//处理四则运算
//把上一次两个数运算的结果算出来,赋值给numValue2 再把numValue1清空,去接收下一次的输入
if (numValue1 != '') {
resultFun();
}
ysf = this.innerText;
}
}
}
//给等号设置监听,运算结果
result_btn.onclick = function() {
if(numValue2==''){
show_result.value=numValue1;
numValue1='';
}else{
resultFun();
}
}
function resultFun() {
//把两个字符串数字,转成数字类型
var one = Number(numValue2);
var two = Number(numValue1);
var r = 0;
switch (ysf) {
case '+':
r = one + two;
break;
case '-':
r = one - two;
break;
case '*':
r = one * two;
break;
case '/':
if (two == 0) {
clean();
r = 0;
alert("除数不能为0");
} else {
r = one / two;
}
break;
}
numValue2=r;
numValue1='';
show_result.value =Number(numValue2).toFixed(5)*1;
}
//实现退格键
del_btn.onclick = function() {
if (numValue1.length > 1) {
numValue1 = numValue1.substring(0, numValue1.length - 1);
show_result.value = numValue1;
}
}
//实现清除键
var clean = function() {
numValue1 = '';
numValue2 = '';
ysf = '';
show_result.value = '0';
}
clear_btn.onclick = clean;
</script>
</html>
757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
