当前位置：网站首页>实现简易计算器

实现简易计算器

2022-04-22 17:12:00 【時間不夠以後】

在这里插入图片描述
问题描述：
1、除法操作时，如果被除数为0，则结果为0
2、结果如果为小数，最多保留小数点后两位，如2 / 3 =0.67（显示0.67），1 / 2 = 0.5（显示0.5）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度笔试0329</title>
		<style type="text/css"> body, ul, li,select {
       margin: 0; padding: 0; box-sizing: border-box; } ul,li {
      list-style: none;} .calculator {
       max-width: 300px; margin: 20px auto; border: 1px solid #eee; border-radius: 3px; } .cal-header {
       font-size: 16px; color: #333; font-weight: bold; height: 48px; line-height: 48px; border-bottom: 1px solid #eee; text-align: center; } .cal-main {
       font-size: 14px; } .cal-main .origin-value {
       padding: 15px; height: 40px; line-height: 40px; font-size: 20px; text-align: right; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .cal-main .origin-type, .cal-main .target-type {
       padding-left: 5px; width: 70px; font-size: 14px; height: 30px; border: 1px solid #eee; background-color: #fff; vertical-align: middle; margin-right: 10px; border-radius: 3px; } .cal-keyboard {
       overflow: hidden; } .cal-items {
       overflow: hidden; } .cal-items li {
       user-select: none; float: left; display: inline-block; width: 75px; height: 75px; text-align: center; line-height: 75px; border-top: 1px solid #eee; border-left: 1px solid #eee; box-sizing: border-box; } li:nth-of-type(4n+1) {
       border-left: none; } li[data-action=operator] {
       background: #f5923e; color: #fff; } .buttons {
       float: left; width: 75px; } .buttons .btn {
       width: 75px; background-color: #fff; border-top: 1px solid #eee; border-left: 1px solid #eee; height: 150px; line-height: 150px; text-align: center; } .btn-esc {
       color: #ff5a34; } .btn-backspace {
       position: relative; } </style>
	</head>
	<body>
		<div class="calculator">
		    <header class="cal-header">简易计算器</header>
		    <main class="cal-main">
		        <div class="origin-value">0</div>
		        <div class="cal-keyboard">
		            <ul class="cal-items">
		                <li data-action="num">7</li>
		                <li data-action="num">8</li>
		                <li data-action="num">9</li>
		                <li data-action="operator">÷</li>
		                <li data-action="num">4</li>
		                <li data-action="num">5</li>
		                <li data-action="num">6</li>
		                <li data-action="operator">x</li>
		                <li data-action="num">1</li>
		                <li data-action="num">2</li>
		                <li data-action="num">3</li>
		                <li data-action="operator">-</li>
		                <li data-action="num">0</li>
		                <li data-action="operator">清空</li>
		                <li data-action="operator">=</li>
		                <li data-action="operator">+</li>
		            </ul>
		        </div>
		    </main>
		</div>
		<script type="text/javascript"> var Calculator = {
       init: function () {
       var that = this; if (!that.isInited) {
       that.isInited = true; // 保存操作信息 // total: Number, 总的结果 // next: String, 下一个和 total 进行运算的数据 // action: String, 操作符号 that.data = {
      total: 0, next: '', action: ''}; that.bindEvent(); } }, bindEvent: function () {
       var that = this; // 获取 .cal-keyboard 元素 var keyboardEl = document.getElementsByClassName('cal-keyboard')[0] keyboardEl && keyboardEl.addEventListener('click', function (event) {
       // 获取当前点击的dom元素 var target = event.target; // 获取target的 data-action 值 var action = target.getAttribute('data-action'); // 获取target的内容 var value = target.innerHTML; if (action === 'num' || action === 'operator') {
       that.result(value, action === 'num'); } }); }, result: function (action, isNum) {
       var that = this; var data = that.data; if (isNum) {
       data.next = data.next === '0' ? action : (data.next + action); !data.action && (data.total = 0); } else if (action === '清空') {
       // 设置清空时的对应状态 data.total = 0; data.next = ''; data.action = ''; } else if (action === '=') {
       if (data.next || data.action) {
       data.total = that.calculate(data.total, data.next, data.action); data.next = ''; data.action = ''; } } else if (!data.next) {
       data.action = action; } else if (data.action) {
       data.total = that.calculate(data.total, data.next, data.action); data.next = ''; data.action = action; } else {
       data.total = +data.next || 0; data.next = ''; data.action = action; } // 获取 .origin-value 元素 var valEl = document.getElementsByClassName('origin-value')[0]; valEl && (valEl.innerHTML = data.next || data.total || '0'); }, calculate: function (n1, n2, operator) {
       n1 = +n1 || 0; n2 = +n2 || 0; if (operator === '÷') {
       // 获取除法的结果 if(n2 == 0 || n1 == 0) return 0 return Math.round((n1/n2)*100)/100; } else if (operator === 'x') {
       // 获取乘法的结果 return n1 * n2; } else if (operator === '+') {
       // 获取加法的结果 return n1 + n2; } else if (operator === '-') {
       // 获取减法的结果 return n1 - n2; } } }; Calculator.init(); </script>
	</body>
</html>

版权声明
本文为[時間不夠以後]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_43972213/article/details/105187145

边栏推荐

猜你喜欢

随机推荐