FED95. 简易计算器
描述
本题展示了一个简化版的计算器，需求如下：
1、除法操作时，如果被除数为0，则结果为0
2、结果如果为小数，最多保留小数点后两位，如 2 / 3 = 0.67(显示0.67), 1 / 2 = 0.5(显示0.5)
3、请阅读并根据提示补充完成函数initEvent、result和calculate
4、请不要手动修改html和css
5、不要使用第三方插件
FED95. 简易计算器
描述
HTML/CSS/JavaScript 解法, 执行用时: 965ms, 内存消耗: 77884KB, 提交时间: 2021-07-11
{"css":"body, ul, li,select {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\nul,li {list-style: none;}\n.calculator {\n max-width: 300px;\n margin: 20px auto;\n border: 1px solid #eee;\n border-radius: 3px;\n}\n.cal-header {\n font-size: 16px;\n color: #333;\n font-weight: bold;\n height: 48px;\n line-height: 48px;\n border-bottom: 1px solid #eee;\n text-align: center;\n}\n.cal-main {\n font-size: 14px;\n}\n.cal-main .origin-value {\n padding: 15px;\n height: 40px;\n line-height: 40px;\n font-size: 20px;\n text-align: right;\n overflow: hidden;\n text-overflow:ellipsis;\n white-space: nowrap;\n}\n.cal-main .origin-type,\n.cal-main .target-type {\n padding-left: 5px;\n width: 70px;\n font-size: 14px;\n height: 30px;\n border: 1px solid #eee;\n background-color: #fff;\n vertical-align: middle;\n margin-right: 10px;\n border-radius: 3px;\n}\n.cal-keyboard {\n overflow: hidden;\n}\n.cal-items {\n overflow: hidden;\n}\n.cal-items li {\n user-select: none;\n float: left;\n display: inline-block;\n width: 75px;\n height: 75px;\n text-align: center;\n line-height: 75px;\n border-top: 1px solid #eee;\n border-left: 1px solid #eee;\n box-sizing: border-box;\n}\nli:nth-of-type(4n+1) {\n border-left: none;\n}\nli[data-action=operator] {\n background: #f5923e;\n color: #fff;\n}\n.buttons {\n float: left;\n width: 75px;\n}\n.buttons .btn {\n width: 75px;\n background-color: #fff;\n border-top: 1px solid #eee;\n border-left: 1px solid #eee;\n height: 150px;\n line-height: 150px;\n text-align: center;\n}\n.btn-esc {\n color: #ff5a34;\n}\n.btn-backspace {\n position: relative;\n}","js":"var Calculator = {\n init: function () {\n var that = this;\n if (!that.isInited) {\n that.isInited = true;\n // 保存操作信息\n // total: Number, 总的结果\n // next: String, 下一个和 total 进行运算的数据\n // action: String, 操作符号\n that.data = {total: 0, next: '', action: ''};\n that.bindEvent();\n }\n },\n bindEvent: function () {\n var that = this;\n // 请补充代码：获取 .cal-keyboard 元素\n var keyboardEl = document.querySelector('.cal-keyboard')\n\n keyboardEl && keyboardEl.addEventListener('click', function (event) {\n // 请补充代码：获取当前点击的dom元素\n var target = event.target;\n if(target.tagName !== 'LI'){return}\n // 请补充代码：获取target的 data-action 值\n var action = target.dataset.action\n // 请补充代码：获取target的内容\n var value = target.innerHTML\n if (action === 'num' || action === 'operator') {\n that.result(value, action === 'num');\n }\n });\n },\n result: function (action, isNum) {\n var that = this;\n var data = that.data;\n if (isNum) {\n data.next = data.next === '0' ? action : (data.next + action);\n !data.action && (data.total = 0);\n } else if (action === '清空') {\n // 请补充代码：设置清空时的对应状态\n data.total = 0;\n data.next = '';\n data.action = '';\n } else if (action === '=') {\n if (data.next || data.action) {\n data.total = that.calculate(data.total, data.next, data.action);\n data.next = '';\n data.action = '';\n }\n } else if (!data.next) {\n data.action = action;\n } else if (data.action) {\n data.total = that.calculate(data.total, data.next, data.action);\n data.next = '';\n data.action = action;\n } else {\n data.total = +data.next || 0;\n data.next = '';\n data.action = action;\n }\n \n // 请补充代码：获取 .origin-value 元素\n var valEl = document.querySelector('.origin-value');\n valEl && (valEl.innerHTML = data.next || data.total || '0');\n },\n calculate: function (n1, n2, operator) {\n n1 = +n1 || 0;\n n2 = +n2 || 0;\n if (operator === '÷') {\n // 请补充代码：获取除法的结果\n if(n2 == 0) {\n return 0\n }else {\n var val = n1 / n2\n return Math.round(val * 100)/100\n }\n } else if (operator === 'x') {\n // 请补充代码：获取乘法的结果\n var val = n1 * n2\n return Math.round(val * 100)/100\n } else if (operator === '+') {\n // 请补充代码：获取加法的结果\n var val = n1 + n2\n return Math.round(val * 100)/100\n } else if (operator === '-') {\n // 请补充代码：获取减法的结果\n var val = n1 - n2\n return Math.round(val * 100)/100\n }\n }\n};\nCalculator.init();","html":"<div class=\"calculator\">\n <header class=\"cal-header\">简易计算器</header>\n <main class=\"cal-main\">\n <div class=\"origin-value\">0</div>\n <div class=\"cal-keyboard\">\n <ul class=\"cal-items\">\n <li data-action=\"num\">7</li>\n <li data-action=\"num\">8</li>\n <li data-action=\"num\">9</li>\n <li data-action=\"operator\">÷</li>\n <li data-action=\"num\">4</li>\n <li data-action=\"num\">5</li>\n <li data-action=\"num\">6</li>\n <li data-action=\"operator\">x</li>\n <li data-action=\"num\">1</li>\n <li data-action=\"num\">2</li>\n <li data-action=\"num\">3</li>\n <li data-action=\"operator\">-</li>\n <li data-action=\"num\">0</li>\n <li data-action=\"operator\">清空</li>\n <li data-action=\"operator\">=</li>\n <li data-action=\"operator\">+</li>\n </ul>\n </div>\n </main>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 965ms, 内存消耗: 78176KB, 提交时间: 2021-07-14
{"css":"body, ul, li,select {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\nul,li {list-style: none;}\n.calculator {\n max-width: 300px;\n margin: 20px auto;\n border: 1px solid #eee;\n border-radius: 3px;\n}\n.cal-header {\n font-size: 16px;\n color: #333;\n font-weight: bold;\n height: 48px;\n line-height: 48px;\n border-bottom: 1px solid #eee;\n text-align: center;\n}\n.cal-main {\n font-size: 14px;\n}\n.cal-main .origin-value {\n padding: 15px;\n height: 40px;\n line-height: 40px;\n font-size: 20px;\n text-align: right;\n overflow: hidden;\n text-overflow:ellipsis;\n white-space: nowrap;\n}\n.cal-main .origin-type,\n.cal-main .target-type {\n padding-left: 5px;\n width: 70px;\n font-size: 14px;\n height: 30px;\n border: 1px solid #eee;\n background-color: #fff;\n vertical-align: middle;\n margin-right: 10px;\n border-radius: 3px;\n}\n.cal-keyboard {\n overflow: hidden;\n}\n.cal-items {\n overflow: hidden;\n}\n.cal-items li {\n user-select: none;\n float: left;\n display: inline-block;\n width: 75px;\n height: 75px;\n text-align: center;\n line-height: 75px;\n border-top: 1px solid #eee;\n border-left: 1px solid #eee;\n box-sizing: border-box;\n}\nli:nth-of-type(4n+1) {\n border-left: none;\n}\nli[data-action=operator] {\n background: #f5923e;\n color: #fff;\n}\n.buttons {\n float: left;\n width: 75px;\n}\n.buttons .btn {\n width: 75px;\n background-color: #fff;\n border-top: 1px solid #eee;\n border-left: 1px solid #eee;\n height: 150px;\n line-height: 150px;\n text-align: center;\n}\n.btn-esc {\n color: #ff5a34;\n}\n.btn-backspace {\n position: relative;\n}","js":"\t\t\tvar Calculator = {\n\t\t\t\tinit: function() {\n\t\t\t\t\tvar that = this;\n\t\t\t\t\tif (!that.isInited) {\n\t\t\t\t\t\tthat.isInited = true;\n\t\t\t\t\t\t// 保存操作信息\n\t\t\t\t\t\t// total: Number, 总的结果\n\t\t\t\t\t\t// next: String, 下一个和 total 进行运算的数据\n\t\t\t\t\t\t// action: String, 操作符号\n\t\t\t\t\t\tthat.data = {\n\t\t\t\t\t\t\ttotal: 0,\n\t\t\t\t\t\t\tnext: '',\n\t\t\t\t\t\t\taction: ''\n\t\t\t\t\t\t};\n\t\t\t\t\t\tthat.bindEvent();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tbindEvent: function() {\n\t\t\t\t\tvar that = this;\n\t\t\t\t\t// 请补充代码：获取 .cal-keyboard 元素\n\t\t\t\t\tvar keyboardEl = document.querySelector(\".cal-keyboard\");\n\t\t\t\t\tkeyboardEl && keyboardEl.addEventListener('click', function(event) {\n\t\t\t\t\t\t// 请补充代码：获取当前点击的dom元素\n\t\t\t\t\t\tvar target = event.path[0];\n\t\t\t\t\t\t// 请补充代码：获取target的 data-action 值\n\t\t\t\t\t\tvar action = target.dataset.action;\n\t\t\t\t\t\t// 请补充代码：获取target的内容\n\t\t\t\t\t\tvar value = target.innerText;\n\t\t\t\t\t\tif (action === 'num' || action === 'operator') {\n\t\t\t\t\t\t\tthat.result(value, action === 'num');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tresult: function(action, isNum) {\n\t\t\t\t\tvar that = this;\n\t\t\t\t\tvar data = that.data;\n\t\t\t\t\tif (isNum) {\n\t\t\t\t\t\tdata.next = data.next === '0' ? action : (data.next + action);\n\t\t\t\t\t\t!data.action && (data.total = 0);\n\t\t\t\t\t} else if (action === '清空') {\n\t\t\t\t\t\t// 请补充代码：设置清空时的对应状态\n\t\t\t\t\t\tdata.total = 0;\n\t\t\t\t\t\tdata.next = \"\";\n\t\t\t\t\t\tdata.action = \"\";\n\t\t\t\t\t} else if (action === '=') {\n\t\t\t\t\t\tif (data.next || data.action) {\n\t\t\t\t\t\t\tdata.total = that.calculate(data.total, data.next, data.action);\n\t\t\t\t\t\t\tdata.next = '';\n\t\t\t\t\t\t\tdata.action = '';\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (!data.next) {\n\t\t\t\t\t\tdata.action = action;\n\t\t\t\t\t} else if (data.action) {\n\t\t\t\t\t\tdata.total = that.calculate(data.total, data.next, data.action);\n\t\t\t\t\t\tdata.next = '';\n\t\t\t\t\t\tdata.action = action;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdata.total = +data.next || 0;\n\t\t\t\t\t\tdata.next = '';\n\t\t\t\t\t\tdata.action = action;\n\t\t\t\t\t}\n\n\t\t\t\t\t// ���补充代码：获取 .origin-value 元素\n\t\t\t\t\tvar valEl = document.querySelector(\".origin-value\");\n\t\t\t\t\tvalEl && (valEl.innerHTML = data.next || data.total || '0');\n\t\t\t\t},\n\t\t\t\tcalculate: function(n1, n2, operator) {\n\t\t\t\t\tn1 = +n1 || 0;\n\t\t\t\t\tn2 = +n2 || 0;\n\t\t\t\t\tif (operator === '÷') {\n\t\t\t\t\t\t// 请补充代码：获取除法的结果\n\t\t\t\t\t\t// 【需求】1、除法操作时，如果被除数为0，则结果为0\n\t\t\t\t\t\t// 【需求】2、结果如果为小数，最多保留小数点后两位，如 2 / 3 = 0.67(显示0.67), 1 / 2 = 0.5(显示0.5)\n\t\t\t\t\t\treturn n2 === 0 ? 0 : Math.floor((n1 / n2) * 100) / 100;\n\n\n\t\t\t\t\t} else if (operator === 'x') {\n\t\t\t\t\t\t// 请补充代码：获取乘法的结果\n\t\t\t\t\t\treturn Math.floor((n1 * n2) * 100 / 100);\n\t\t\t\t\t} else if (operator === '+') {\n\t\t\t\t\t\t// 请补充代码：获取加法的结果\n\t\t\t\t\t\treturn Math.floor((n1 + n2) * 100) / 100;\n\t\t\t\t\t} else if (operator === '-') {\n\t\t\t\t\t\t// 请补充代码：获取减法的结果\n\t\t\t\t\t\treturn Math.floor((n1 - n2) * 100) / 100;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t};\n\t\t\tCalculator.init();","html":"<div class=\"calculator\">\n <header class=\"cal-header\">简易计算器</header>\n <main class=\"cal-main\">\n <div class=\"origin-value\">0</div>\n <div class=\"cal-keyboard\">\n <ul class=\"cal-items\">\n <li data-action=\"num\">7</li>\n <li data-action=\"num\">8</li>\n <li data-action=\"num\">9</li>\n <li data-action=\"operator\">÷</li>\n <li data-action=\"num\">4</li>\n <li data-action=\"num\">5</li>\n <li data-action=\"num\">6</li>\n <li data-action=\"operator\">x</li>\n <li data-action=\"num\">1</li>\n <li data-action=\"num\">2</li>\n <li data-action=\"num\">3</li>\n <li data-action=\"operator\">-</li>\n <li data-action=\"num\">0</li>\n <li data-action=\"operator\">清空</li>\n <li data-action=\"operator\">=</li>\n <li data-action=\"operator\">+</li>\n </ul>\n </div>\n </main>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 973ms, 内存消耗: 77884KB, 提交时间: 2021-07-14
{"css":"body, ul, li,select {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\nul,li {list-style: none;}\n.calculator {\n max-width: 300px;\n margin: 20px auto;\n border: 1px solid #eee;\n border-radius: 3px;\n}\n.cal-header {\n font-size: 16px;\n color: #333;\n font-weight: bold;\n height: 48px;\n line-height: 48px;\n border-bottom: 1px solid #eee;\n text-align: center;\n}\n.cal-main {\n font-size: 14px;\n}\n.cal-main .origin-value {\n padding: 15px;\n height: 40px;\n line-height: 40px;\n font-size: 20px;\n text-align: right;\n overflow: hidden;\n text-overflow:ellipsis;\n white-space: nowrap;\n}\n.cal-main .origin-type,\n.cal-main .target-type {\n padding-left: 5px;\n width: 70px;\n font-size: 14px;\n height: 30px;\n border: 1px solid #eee;\n background-color: #fff;\n vertical-align: middle;\n margin-right: 10px;\n border-radius: 3px;\n}\n.cal-keyboard {\n overflow: hidden;\n}\n.cal-items {\n overflow: hidden;\n}\n.cal-items li {\n user-select: none;\n float: left;\n display: inline-block;\n width: 75px;\n height: 75px;\n text-align: center;\n line-height: 75px;\n border-top: 1px solid #eee;\n border-left: 1px solid #eee;\n box-sizing: border-box;\n}\nli:nth-of-type(4n+1) {\n border-left: none;\n}\nli[data-action=operator] {\n background: #f5923e;\n color: #fff;\n}\n.buttons {\n float: left;\n width: 75px;\n}\n.buttons .btn {\n width: 75px;\n background-color: #fff;\n border-top: 1px solid #eee;\n border-left: 1px solid #eee;\n height: 150px;\n line-height: 150px;\n text-align: center;\n}\n.btn-esc {\n color: #ff5a34;\n}\n.btn-backspace {\n position: relative;\n}","js":"var Calculator = {\n init: function () {\n var that = this;\n if (!that.isInited) {\n that.isInited = true;\n // 保存操作信息\n // total: Number, 总的结果\n // next: String, 下一个和 total 进行运算的数据\n // action: String, 操作符号\n that.data = {total: 0, next: '', action: ''};\n that.bindEvent();\n }\n },\n bindEvent: function () {\n var that = this;\n // 请补充代码：获取 .cal-keyboard 元素\n var keyboardEl = documents.getElementsByclassName('cal-keyboard')\n //var keyboardEl = null;\n keyboardEl && keyboardEl.addEventListener('click', function (event) {\n // 请补充代码：获取当前点击的dom元素\n var target = event.target;\n // 请补充代码：获取target的 data-action 值\n var action = target.dataset.action//target.getAttribute('data-action');\n // 请补充代码：获取target的内容\n var value = target.innerText;\n if (action === 'num' || action === 'operator') {\n that.result(value, action === 'num');\n }\n });\n },\n result: function (action, isNum) {\n var that = this;\n var data = that.data;\n if (isNum) {\n data.next = data.next === '0' ? action : (data.next + action);\n !data.action && (data.total = 0);\n } else if (action === '清空') {\n // 请补充代码：设置清空时的对应状态 [Done]\n that.data = {total: 0, next: '', action: ''};\n //data.total = undefined;\n //data.next = undefined;\n //data.action = undefined;\n } else if (action === '=') {\n if (data.next || data.action) {\n data.total = that.calculate(data.total, data.next, data.action);\n data.next = '';\n data.action = '';\n }\n } else if (!data.next) {\n data.action = action;\n } else if (data.action) {\n data.total = that.calculate(data.total, data.next, data.action);\n data.next = '';\n data.action = action;\n } else {\n data.total = +data.next || 0;\n data.next = '';\n data.action = action;\n }\n \n // ���补充代码：获取 .origin-value 元素\n var valEl = document.querySelector('.origin-value');\n valEl && (valEl.innerHTML = data.next || data.total || '0');\n },\n calculate: function (n1, n2, operator) {\n n1 = +n1 || 0;\n n2 = +n2 || 0;\n if (operator === '÷') {\n // 请补充代码：获取除法的结果\n return n2 === 0 ? 0 : Math.floor((n1 / n2) * 100) / 100;\n } else if (operator === 'x') {\n // 请补充代码：获取乘法的结果\n return Math.floor((n1 * n2) * 100) / 100;\n } else if (operator === '+') {\n // 请补充代码：获取加法的结果\n return Math.floor((n1 + n2) * 100) / 100;\n } else if (operator === '-') {\n // 请补充代码：获取减法的结果\n return Math.floor((n1 - n2) * 100) / 100;\n }\n }\n};\nCalculator.init();","html":"<div class=\"calculator\">\n <header class=\"cal-header\">简易计算器</header>\n <main class=\"cal-main\">\n <div class=\"origin-value\">0</div>\n <div class=\"cal-keyboard\">\n <ul class=\"cal-items\">\n <li data-action=\"num\">7</li>\n <li data-action=\"num\">8</li>\n <li data-action=\"num\">9</li>\n <li data-action=\"operator\">÷</li>\n <li data-action=\"num\">4</li>\n <li data-action=\"num\">5</li>\n <li data-action=\"num\">6</li>\n <li data-action=\"operator\">x</li>\n <li data-action=\"num\">1</li>\n <li data-action=\"num\">2</li>\n <li data-action=\"num\">3</li>\n <li data-action=\"operator\">-</li>\n <li data-action=\"num\">0</li>\n <li data-action=\"operator\">清空</li>\n <li data-action=\"operator\">=</li>\n <li data-action=\"operator\">+</li>\n </ul>\n </div>\n </main>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 992ms, 内存消耗: 77940KB, 提交时间: 2021-07-03
{"css":"body, ul, li,select {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\nul,li {list-style: none;}\n.calculator {\n max-width: 300px;\n margin: 20px auto;\n border: 1px solid #eee;\n border-radius: 3px;\n}\n.cal-header {\n font-size: 16px;\n color: #333;\n font-weight: bold;\n height: 48px;\n line-height: 48px;\n border-bottom: 1px solid #eee;\n text-align: center;\n}\n.cal-main {\n font-size: 14px;\n}\n.cal-main .origin-value {\n padding: 15px;\n height: 40px;\n line-height: 40px;\n font-size: 20px;\n text-align: right;\n overflow: hidden;\n text-overflow:ellipsis;\n white-space: nowrap;\n}\n.cal-main .origin-type,\n.cal-main .target-type {\n padding-left: 5px;\n width: 70px;\n font-size: 14px;\n height: 30px;\n border: 1px solid #eee;\n background-color: #fff;\n vertical-align: middle;\n margin-right: 10px;\n border-radius: 3px;\n}\n.cal-keyboard {\n overflow: hidden;\n}\n.cal-items {\n overflow: hidden;\n}\n.cal-items li {\n user-select: none;\n float: left;\n display: inline-block;\n width: 75px;\n height: 75px;\n text-align: center;\n line-height: 75px;\n border-top: 1px solid #eee;\n border-left: 1px solid #eee;\n box-sizing: border-box;\n}\nli:nth-of-type(4n+1) {\n border-left: none;\n}\nli[data-action=operator] {\n background: #f5923e;\n color: #fff;\n}\n.buttons {\n float: left;\n width: 75px;\n}\n.buttons .btn {\n width: 75px;\n background-color: #fff;\n border-top: 1px solid #eee;\n border-left: 1px solid #eee;\n height: 150px;\n line-height: 150px;\n text-align: center;\n}\n.btn-esc {\n color: #ff5a34;\n}\n.btn-backspace {\n position: relative;\n}","js":"var Calculator = {\n init: function () {\n var that = this;\n if (!that.isInited) {\n that.isInited = true;\n // 保存操作信息\n // total: Number, 总的结果\n // next: String, 下一个和 total 进行运算的数据\n // action: String, 操作符号\n that.data = {total: 0, next: '', action: ''};\n that.bindEvent();\n }\n },\n bindEvent: function () {\n var that = this;\n // 请补充代码：获取 .cal-keyboard 元素\n var keyboardEl = document.querySelector('.cal-keyboard');\n keyboardEl && keyboardEl.addEventListener('click', function (event) {\n // 请补充代码：获取当前点击的dom元素\n var target = event.target;\n // 请补充代码：获取target的 data-action 值\n var action = target.getAttribute('data-action');\n // 请补充代码：获取target的内容\n var value = target.innerText;\n if (action === 'num' || action === 'operator') {\n that.result(value, action === 'num');\n }\n });\n },\n result: function (action, isNum) {\n var that = this;\n var data = that.data;\n if (isNum) {\n data.next = data.next === '0' ? action : (data.next + action);\n !data.action && (data.total = 0);\n } else if (action === '清空') {\n // 请补充代码：设置清空时的对应状态\n data.total = 0;\n data.next = '';\n data.action = '';\n } else if (action === '=') {\n if (data.next || data.action) {\n data.total = that.calculate(data.total, data.next, data.action);\n data.next = '';\n data.action = '';\n }\n } else if (!data.next) {\n data.action = action;\n } else if (data.action) {\n data.total = that.calculate(data.total, data.next, data.action);\n data.next = '';\n data.action = action;\n } else {\n data.total = +data.next || 0;\n data.next = '';\n data.action = action;\n }\n \n // ���补充代码：获取 .origin-value 元素\n var valEl = document.querySelector('.origin-value');\n valEl && (valEl.innerHTML = data.next || data.total || '0');\n },\n calculate: function (n1, n2, operator) {\n n1 = +n1 || 0;\n n2 = +n2 || 0;\n if (operator === '÷') {\n // 请补充代码：获取除法的结果\n if(n2===0) return 0\n return Number((n1/n2).toFixed(2));\n } else if (operator === 'x') {\n // 请补充代码：获取乘法的结果\n return Number((n1*n2).toFixed(2));\n } else if (operator === '+') {\n // 请补充代码：获取加法的结果\n return Number((n1+n2).toFixed(2));\n } else if (operator === '-') {\n // 请补充代码：获取减法的结果\n return Number((n1-n2).toFixed(2));\n }\n }\n};\nCalculator.init();","html":"<div class=\"calculator\">\n <header class=\"cal-header\">简易计算器</header>\n <main class=\"cal-main\">\n <div class=\"origin-value\">0</div>\n <div class=\"cal-keyboard\">\n <ul class=\"cal-items\">\n <li data-action=\"num\">7</li>\n <li data-action=\"num\">8</li>\n <li data-action=\"num\">9</li>\n <li data-action=\"operator\">÷</li>\n <li data-action=\"num\">4</li>\n <li data-action=\"num\">5</li>\n <li data-action=\"num\">6</li>\n <li data-action=\"operator\">x</li>\n <li data-action=\"num\">1</li>\n <li data-action=\"num\">2</li>\n <li data-action=\"num\">3</li>\n <li data-action=\"operator\">-</li>\n <li data-action=\"num\">0</li>\n <li data-action=\"operator\">清空</li>\n <li data-action=\"operator\">=</li>\n <li data-action=\"operator\">+</li>\n </ul>\n </div>\n </main>\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1014ms, 内存消耗: 77912KB, 提交时间: 2021-07-12
{"css":"body, ul, li,select {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\nul,li {list-style: none;}\n.calculator {\n max-width: 300px;\n margin: 20px auto;\n border: 1px solid #eee;\n border-radius: 3px;\n}\n.cal-header {\n font-size: 16px;\n color: #333;\n font-weight: bold;\n height: 48px;\n line-height: 48px;\n border-bottom: 1px solid #eee;\n text-align: center;\n}\n.cal-main {\n font-size: 14px;\n}\n.cal-main .origin-value {\n padding: 15px;\n height: 40px;\n line-height: 40px;\n font-size: 20px;\n text-align: right;\n overflow: hidden;\n text-overflow:ellipsis;\n white-space: nowrap;\n}\n.cal-main .origin-type,\n.cal-main .target-type {\n padding-left: 5px;\n width: 70px;\n font-size: 14px;\n height: 30px;\n border: 1px solid #eee;\n background-color: #fff;\n vertical-align: middle;\n margin-right: 10px;\n border-radius: 3px;\n}\n.cal-keyboard {\n overflow: hidden;\n}\n.cal-items {\n overflow: hidden;\n}\n.cal-items li {\n user-select: none;\n float: left;\n display: inline-block;\n width: 75px;\n height: 75px;\n text-align: center;\n line-height: 75px;\n border-top: 1px solid #eee;\n border-left: 1px solid #eee;\n box-sizing: border-box;\n}\nli:nth-of-type(4n+1) {\n border-left: none;\n}\nli[data-action=operator] {\n background: #f5923e;\n color: #fff;\n}\n.buttons {\n float: left;\n width: 75px;\n}\n.buttons .btn {\n width: 75px;\n background-color: #fff;\n border-top: 1px solid #eee;\n border-left: 1px solid #eee;\n height: 150px;\n line-height: 150px;\n text-align: center;\n}\n.btn-esc {\n color: #ff5a34;\n}\n.btn-backspace {\n position: relative;\n}","js":" var Calculator = {\n init: function () {\n var that = this;\n if (!that.isInited) {\n that.isInited = true;\n // 保存操作信息\n // total: Number, 总的结果\n // next: String, 下一个和 total 进行运算的数据\n // action: String, 操作符号\n that.data = { total: 0, next: '', action: '' };\n that.bindEvent();\n }\n },\n bindEvent: function () {\n var that = this;\n // 请补充代码：获取 .cal-keyboard 元素\n var keyboardEl = document.querySelector('.cal-keyboard');\n keyboardEl && keyboardEl.addEventListener('click', function (event) {\n // 请补充代码：获取当前点击的dom元素\n var target = event.target;\n // 请补充代码：获取target的 data-action 值\n var action = target.getAttribute('data-action');\n // 请补充代码：获取target的内容\n var value = target.innerHTML;\n if (action === 'num' || action === 'operator') {\n that.result(value, action === 'num');\n }\n });\n },\n result: function (action, isNum) {\n var that = this;\n var data = that.data;\n if (isNum) {\n data.next = data.next === '0' ? action : (data.next + action);\n !data.action && (data.total = 0);\n } else if (action === '清空') {\n // 请补充代码：设置清空时的对应状态\n data.total = 0;\n data.next = '';\n data.action = '';\n } else if (action === '=') {\n if (data.next || data.action) {\n data.total = that.calculate(data.total, data.next, data.action);\n data.next = '';\n data.action = '';\n }\n } else if (!data.next) {\n data.action = action;\n } else if (data.action) {\n data.total = that.calculate(data.total, data.next, data.action);\n data.next = '';\n data.action = action;\n } else {\n data.total = +data.next || 0;\n data.next = '';\n data.action = action;\n }\n\n // 补充代码：获取 .origin-value 元素\n var valEl = document.querySelector('.origin-value');\n valEl && (valEl.innerHTML = data.next || data.total || '0');\n },\n calculate: function (n1, n2, operator) {\n n1 = +n1 || 0;\n n2 = +n2 || 0;\n if (operator === '÷') {\n // 请补充代码：获取除法的结果\n var res = n2 === 0 ? 0 : (n1 / n2);\n var len = Number.isInteger(res) ? 0 : String(res).length - (String(res).indexOf('.') + 1); //小数的位数\n return len > 1 ? res.toFixed(2) - 0 : res;\n } else if (operator === 'x') {\n // 请补充代码：获取乘法的结果\n var res = n1 * n2;\n var len = Number.isInteger(res) ? 0 : String(res).length - (String(res).indexOf('.') + 1); //小数的位数\n return len > 1 ? res.toFixed(2) - 0 : res;\n } else if (operator === '+') {\n // 请补充代码：获取加法的结果\\\n N = 1000000\n var res = (n1 * N + n2 * N) / N;\n console.log(res);\n var len = Number.isInteger(res) ? 0 : String(res).length - (String(res).indexOf('.') + 1); //小数的位数\n return len > 1 ? res.toFixed(2) - 0 : res;\n } else if (operator === '-') {\n // 请补充代码：获取减法的结果\n var res = n1 - n2;\n var len = Number.isInteger(res) ? 0 : String(res).length - (String(res).indexOf('.') + 1); //小数的位数\n return len > 1 ? res.toFixed(2) - 0 : res;\n }\n }\n };\n Calculator.init();","html":"<div class=\"calculator\">\n <header class=\"cal-header\">简易计算器</header>\n <main class=\"cal-main\">\n <div class=\"origin-value\">0</div>\n <div class=\"cal-keyboard\">\n <ul class=\"cal-items\">\n <li data-action=\"num\">7</li>\n <li data-action=\"num\">8</li>\n <li data-action=\"num\">9</li>\n <li data-action=\"operator\">÷</li>\n <li data-action=\"num\">4</li>\n <li data-action=\"num\">5</li>\n <li data-action=\"num\">6</li>\n <li data-action=\"operator\">x</li>\n <li data-action=\"num\">1</li>\n <li data-action=\"num\">2</li>\n <li data-action=\"num\">3</li>\n <li data-action=\"operator\">-</li>\n <li data-action=\"num\">0</li>\n <li data-action=\"operator\">清空</li>\n <li data-action=\"operator\">=</li>\n <li data-action=\"operator\">+</li>\n </ul>\n </div>\n </main>\n</div>","libs":[]}