实现简易计算器

最新推荐文章于 2024-05-28 13:09:25 发布
最新推荐文章于 2024-05-28 13:09:25 发布
阅读量311 收藏 4
点赞数 5
分类专栏： 效果实现 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43972213/article/details/105187145
版权

在这里插入图片描述
问题描述：
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>
時間不夠以後
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
C语言---简易计算器的实现
2301_81250340的博客
02-06 2266
序言：在学习了C语言函数调用、函数指针数组、回调函数后，我们可以用三种方法实现简易计算器的功能。
Java 实现简易计算器
iPhone_g的博客
09-05 1万+
设计一个计算器，可以接收用户输入两个数字与 + - * / 的符号，然后计算他们的结果并输出。 程序可以重复计算，并不能说计算一次程序就结束
Qt实现简易计算器
叶子与海的博客
09-10 1万+
用Qt实现计算器，首先得在ui界面设计一个计算器，当然也可以代码写，我觉得没必要就直接拖啦，而且槽函数也可以直接转到，非常方便。
Java实现简易计算器
qq_47387991的博客
05-14 1392
需求：实现加减乘除的运算。 实现代码： Const类（常量类）： package gui.carculator; import java.awt.*; /** * 常量类 */ public class Const { //设置窗体大小 public static final int FRAME_W = 400; public static final int FRAME_H = 400; //得到窗体的宽度,得到窗体的高度 public stati
JavaScript实现简易计算器
明哥
03-20 3360
效果图： 1、涉及内容 1、文本域标签 <textarea></textarea> 的 readonly 属性用于设置文本域文字为只读； 2、DOM 获取元素，getElementById() 获取带有指定 id 的节点； 3、DOM 事件中的 target 是指获取事件的目标，即触发事件的真实元素。 如下代码中： btn.onclick = function (e) { //判断只有点击到按钮...
【C语言】实现简易计算器
热门推荐
超烦豆先森
07-31 2万+
实现一个简易的计算器，可以计算两个整数的加减乘除。
用Java实现简易计算器
pzl1974的博客
04-10 2万+
计算器 Java实现代码 package New; import java.util.Scanner; public class Calculator { public double add(double a, double b) { return a + b; } // 减法 public double sub(double a, double b) { return a - b; } // 乘法 ...
C++实现简易计算器
qq_53175673的博客
11-11 1155
C++实现简易计算器
QT实现简易计算器。
m0_73406998的博客
03-22 1128
通过qt实现简单的+，-，*，/四则运算。运算通过栈把中缀表达式转换成后缀表达式实现的。
java实现简易计算器功能
08-27
主要为大家详细介绍了java实现简易计算器功能，具有一定的参考价值，感兴趣的朋友可以参考一下
html+js实现简易计算器功能
04-22
简易计算器，利用html+js实现，通过浏览器客户端进行编译实现，弹出窗口，进行选择计算。
android实现简易计算器
01-04
本文实例为大家分享了android实现简易计算器展示的具体代码，供大家参考，具体内容如下 效果图： 一、如图，首先布局计算器主页显示 activity_main.xml xmlns:tools=http://schemas.android.com/tools android:...
Java实现简易计算器.doc
11-17
Java实现简易计算器.doc
javascript实现简易计算器功能
10-14
主要为大家详细介绍了javascript实现简易计算器功能，实现四则运算，小数点，回退，归0等功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css-垂直居中的几种写法
xxuxioxx的博客
05-27 328
垂直居中的几种写法
CSS 媒体查询 响应式开发
生产队的驴
05-27 293
媒体查询（Media Queries）是CSS3的技术，可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。媒体查询可以使网页在不同设备上呈现不同的样式，以实现响应式设计。
CSS实现一个雨滴滑落效果
云加速
05-28 440
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
了解CSS中的link和@import引入CSS的区别
最新发布
祈澈菇凉
05-28 129
【代码】了解CSS中的link和@import引入CSS的区别。
二叉树实现简易计算器
12-09
二叉树可以用来实现简易计算器，具体实现方法如下： 1.定义二叉树节点类，包含数字和运算符两种类型的节点。 ```python class TreeNode: def __init__(self, val): self.val = val self.left = None self....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值