<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.calculator {
padding: 30px;
}
td {
width: 20%;
padding: 5px;
}
table {
border-radius: 16px;
background: #EAECF3;
padding: 5px;
}
button {
width: 100%;
height: 40px;
border: 0;
border-radius: 16px;
box-shadow: inset 1px 1px 1px 0px rgb(230 244 255 / 80%), inset -1px -1px 1px 0px rgb(40 48 85 / 30%), 1px 1px 3px 0px rgb(40 50 85 / 10%);
user-select: none;
color: #283155;
text-shadow: 2px 1px 1px rgb(0 0 0 / 10%);
opacity: 2 !important;
cursor: pointer;
background-image: linear-gradient(135deg, #F4F5F6, #fff);
font-size: 16px;
}
input {
height: 56px;
font-size: 20px;
border: 0;
border-radius: 18px;
background: #fff;
box-shadow: inset -1px -1px 1px 0 rgb(223 255 257 / 70%);
box-shadow: inset 1px 1px 1px 0 rgb(40 49 86 / 30%);
overflow: hidden;
}
.add {
height: 90px;
}
.operator {
background-image: linear-gradient(133deg, #D9DCE8, #E2E4EF);
}
.del-button {
background-image: linear-gradient(133deg, #FFA80E, #FFC355);
color: #fff;
}
.equal-button {
box-shadow: inset 1px 1px 1px 0px rgb(223 255 255 / 21%), inset -2px -2px 1px 0px rgb(40 49 85 / 30%), 1px 1px 3px 0px rgb(157 174 167 / 20%);
background: #4f6ef2;
color: #fff;
}
.result {
padding-left: 10px;
}
</style>
</head>
<body>
<div class="calculator">
<table>
<tr>
<!--
colspan：跨列合并
-->
<td colspan="5">
<!-- 文本输入框
: 用来显示结果。
disable：属性禁用文本输入的功能
-->
<input type="text" class="result" disabled="disabled">
</td>
</tr>
<tr>
<!--
计算器每一个按键，我们认为都是一个button按钮
value属性：button的真实值
-->
<td><button value="7">7</button></td>
<td><button value="8">8</button></td>
<td><button value="9">9</button></td>
<td><button class="del-button ac" id="ac">AC</button></td>
<td><button class="del-button c" id="c">C</button></td>
</tr>
<tr>
<td><button value="4">4</button></td>
<td><button value="5">5</button></td>
<td><button value="6">6</button></td>
<td><button value="-" class="operator">-</button></td>
<td><button value="*" class="operator">*</button></td>
</tr>
<tr>
<td><button value="1">1</button></td>
<td><button value="2">2</button></td>
<td><button value="3">3</button></td>
<td rowspan="2"><button value="+" class="add operator">+</button></td>
<td><button value="/" class="operator">/</button></td>
</tr>
<tr>
<td><button value="0">0</button></td>
<td><button value=".">.</button></td>
<td><button value="00">00</button></td>
<td><button class="equal-button">=</button></td>
</tr>
</table>
</div>
</body>
</html>
<script>
/*
立即执行函数
()()
doc = document
*/
(function(doc) {
var oCalculator = doc.getElementsByClassName('calculator')[0],// table标签外层的父元素对象div
oResult = oCalculator.getElementsByClassName("result")[0], // 显示结果的input对象
// 根据标签名获取所有的button元素【一共：19个】
btnGroup = oCalculator.getElementsByTagName('button'),// 19个按钮
btnEqual = oCalculator.getElementsByClassName("equal-button")[0],// = 按钮
ac = oCalculator.getElementsByClassName("ac")[0], // AC 按钮
c = oCalculator.getElementsByClassName("c")[0], // C 按钮
strRest = ''; // 定义一个空字符串
/* 定义函数表达式 */
var init = function() {
/*
调用函数：bindEvents()
我们需要定义这个函数
*/
bindEvents();
}
/*
函数的声明
函数名：bindEvents
这个函数用来干嘛？
我们不是一共19个按钮，我要给每一个按钮绑定一个事件（click：点击事件）
*/
/* 给19个按钮添加监听事件 */
function bindEvents() {
/*
for循环
btnGroup.length： 获取的到时button集合元素的长度（19）
集合对象索引[0 btnGroup.length)
btnGroup[i]: 根据索引获取对应的button元素对象
*/
for (let i = 0; i < btnGroup.length ; i++) {
/*
添加监听事件： addEventListener
添加的事件都是点击事件：click
点击的时候，触发我们自定义的函数：computed
*/
btnGroup[i].addEventListener('click', computed, false)
}
/*
给 = 的按钮添加点击的监听事件，触发 equal这个自定义函数
*/
btnEqual.addEventListener('click', equal, false)
/*
给 AC 按钮添加点击的监听事件，触发 empty 这个自定义函数
*/
ac.addEventListener('click', empty, false)
/*
给 C 按钮添加点击的监听事件，触发 fDelete 这个自定义函数
*/
c.addEventListener('click', fDelete, false)
}
function computed(ev) {
var e = ev || window.event, // 获取到点击的元素对象
value = e.target.value; // 获取点击的元素对象的值【value的值】
if (strRest.length === 0) {
if (Number(value)) {
strRest += value;
renderResult()
}
}
else if (strRest.length < 15) {
if (oResult.value.substr(-1) === '+' || oResult.value.substr(-1) === '-' || oResult.value.substr(-
1) === '*' || oResult.value.substr(-1) === '/') {
if (Number(value)) {
strRest += value;
renderResult()
}
} else {
strRest += value;
renderResult()
}
}
/*
15： 第一个操作数最多只能是15个
如果是15个数字，就不能按 运算键！
*/
else if (strRest.length === 15) {
/*
Number(): 将数字字符串转换为 数值类型
*/
if (Number(value)) {
strRest += value;
renderResult()
}
}
}
function renderResult() {
oResult.value = strRest
}
// 显示最终的运算结果！
function equal() {
oResult.value = eval(strRest);
strRest = oResult.value;
}
// 清空内容
function empty() {
strRest = '';
oResult.value = strRest;
}
// 删除最后一个文本内容
function fDelete() {
strRest = strRest.slice(0, strRest.length - 1);
oResult.value = strRest;
}
/* 调用函数表达式 */
init();
})(document)
</script>
WIKI主页
作者
我的
TIANYUEZHISUI0001
地球Ⅳ