学习js也有一段时间了,根据要求做了一个简单的计算器
首先我们查看windows计算器是什么样子的
有了这样一个模板,我们可以先设计好需求
- 要实现鼠标点击控制
- 键盘输入控制
在这个基础上我又增加了查看历史记录,和点击变色这两个需求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="calculator3.plus.css" type="text/css" rel="stylesheet" >
<script src="calculator3.plus.js" type="text/javascript"></script>
</head>
<body>
<div class="top">
<div class="top-left">window计算器3.0.plus</div>
<div id="top-right">
<button title="历史记录" id ='look'></button>
</div>
</div>
<ul id="keys">
<input id="inputExp" /><br/>
<li class="opt">(</li><li class="opt">)</li><li class="opt">C</li><li class="opt">BackSpace</li>
<li>7</li><li>8</li><li>9</li><li class="opt">/</li>
<li>4</li><li>5</li><li>6</li><li class="opt">*</li>
<li>1</li><li>2</li><li>3</li><li class="opt">+</li>
<li>0</li><li>.</li><li>=</li><li class="opt">-</li>
</ul>
</body>
</html>
我这里用的是li,当然可以直接button,都是可以的
也可以增加一些数学模块之类,根据大家兴趣
*{margin: 0;padding: 0;list-style-type: none;}
.top{width: 338px;height: 60px;margin: auto;border: 3px #ddd ridge;}
.top-left{float: left;line-height:60px;font-size: 25px;text-align: center;}
#top-right{width:30px;height:60px;float: right;}
#top-right button{width: 30px; height: 60px;background: url("new-look.png");}
#inputExp{width: 320px; height: 50px;font-size: larger;padding: 8px;text-align: right;border: 3px #ddd ridge;}
#keys{width: 344px;margin: auto;}
#keys li{float: left;width: 80px;height: 50px;border: 3px #bbb outset;text-align: center;line-height: 50px;background-color: #eef;}
#key li :hover{background-color: salmon;}
#keys.opt{color: #fe6600; background-color: #f9f9f9;}
onload=init;
keys=['0','1','2','3','4','5','6','7','8','9','\.','\-','\*','\/','\+','=','C']
BgColor=['red','blue','green','yellow']
//定义一个数组来存储历史字符串
var lastNums = [];
function init() {
var exp = document.getElementById("inputExp");
exp.value = "";
// exp.focus();
//获取所有的li对象数据组
var liArray = document.getElementsByTagName("li");
var look =document.getElementById('look');
//获取所有的li,然后给他们添加点击事件
function getRandomNumberByRange(start, end) {
return Math.floor(Math.random() * (end - start) + start)
}
look.onclick=function(){
let allstr=''
// alert("历史记录第一次"+lastNums[0]);
// exp.value=lastNums[0];
for(var i=0; i<lastNums.length;i++){
let str="历史记录第"+(i+1)+"次:"+lastNums[i]+'\n';
allstr +=str;
}alert(allstr);
}
for (var i = 0; i < liArray.length; i++) {
let item = liArray[i];//获取所有的li元素,给其添加点击事件
// let number=Math.random()
// item.οnmοuseοver=function() {
// let num=getRandomNumberByRange(0,4)
// this.style.backgroundColor=BgColor[num];
// }
// item.οnmοuseοut=function(){
// this.style.backgroundColor='#eef';
// }
item.onclick = function () {
exp.focus();
let num=getRandomNumberByRange(0,4)//注意let的作用域
this.style.backgroundColor=BgColor[num];
try {
if (item.innerHTML == '=') {
lastNums.push(exp.value);
let result = eval(exp.value);
if (!isFinite(result)) {
throw "Err1";
}
exp.value = result;
} else if (item.innerHTML == 'C') {
exp.value = "";
} else if (item.innerHTML == 'BackSpace') {
let str = exp.value;
exp.value = str.substring(0, str.length - 1);
} else {
exp.value += item.innerHTML;
}
} catch (e) {
if(e=="Err1"){
alert("结果无穷大!");}
else {
alert("你的运算有误:" + exp.value + "\n仔细检查");
exp.value = "";
exp.focus();
}
}
}
exp.onkeyup = function () {
try {
lastchar = exp.value.charAt(exp.value.length - 1);
if (lastchar.toUpperCase() == 'C') {
exp.value = "";
}
if (keys.indexOf(lastchar) == -1) {//如果不是keys不能被打印
let str = exp.value;
exp.value = str.substring(0, str.length - 1);
alert("请输入合法的字符");
}
if (lastchar == '=') {
let str = exp.value;
exp.value = str.substring(0, str.length - 1);
let result = eval(exp.value);
if (!isFinite(result)) {
throw "zeroErr2";
}
exp.value = result;
}
} catch (e) {
alert("你的运算有误:" + exp.value + "\n仔细检查");
exp.value = "";
exp.focus();
}
}
}
}
单击变色,我在注释一部分是实现了鼠标移入移出的效果
在查看历史记录那块,注释的实现了在输入框内查看,有一些查看历史记录的做法是重新跳出一个界面,我这里是用alet去实现的,其想法是把每一次=之前的式子存放在一个数组中,当点击查看历史记录,则触发该事件