JS制作计算器（键盘版）

最新推荐文章于 2023-04-09 14:33:09 发布

weixin_30520015

最新推荐文章于 2023-04-09 14:33:09 发布

阅读量394

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/niuniudashijie/p/6099187.html

版权

<!DOCTYPE html>

<html>

<head>

#show {

width: 232px;

height: 80px;

color: white;

border-radius: 5px 5px 0 0;

background-color: rgba(127, 128, 127, 1);

text-align: right;

border: none;

font-size: 45px;

outline: none;

}

table {

border: 1px solid black;

border-collapse: collapse;

width: 234px;

text-align: center;

font-size: 30px;

}

td {

height: 55px;

width: 57.5px;

background-color: wheat;

}

td:active {

background-color: coral;

}

.aperation {

background-color: rgb(245, 146, 62);

color: white;

}

#ape {

background-color: wheat;

color: #000000;

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

//获取数字的集合

var nums = document.getElementsByClassName("num");

//获取操作符的集合

var options = document.getElementsByClassName("aperation");

//获取等号

var result = document.getElementById("result");

//获取归0

var clear = document.getElementById("clear");

//获取展示框

var show = document.getElementById("show");

//声明用于保存内容的三个变量

var numValue = ""; //存储数字

var optionC = ""; //存储操作符

var numTemp = ""; //存储暂存值

//点击数字键时触发事件

for(var i = 0; i < nums.length; i++) {

nums[i].onclick = function() {

if(numValue == "0") {

numValue = "";

}

numValue += this.innerHTML;

show.value = numValue;

}

//点击操作键触发事件

for(var i = 0; i < options.length - 1; i++) {

options[i].onclick = function() {

//先存储之前记录的数字

numTemp = numValue;

//记录操作符

optionC = this.innerHTML;

//清除原有记录的数字

numValue = "";

}

//等号操作

result.onclick = function() {

show.value = eval(numTemp + optionC + numValue);

}

//清零操作

clear.onclick = function() {

show.value = "0";

numValue = "";

optionC = "";

numTemp = "";

}

</script>

</html>

转载于:https://www.cnblogs.com/niuniudashijie/p/6099187.html

weixin_30520015

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS制作计算器（键盘版）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #show { width: 232px; height: 80px...
复制链接

扫一扫