js实现Windows计算器

在这里插入图片描述
HTML:

<div id="calc">
		<h2 class="header">
			<a href="javascript:void(0);" class="mini"></a>
			<a href="javascript:void(0);" class="close"></a>
		</h2>
		<div class="wrapper">
			<div class="content">
				<div class="led">
					<p id="first-part"></p>
					<p id="result">0</p>
				</div>
				<div class="btn-panel" id="base-panel">
					<a href="javascript:void(0);">←</a>
					<a href="javascript:void(0);">CE</a>
					<a href="javascript:void(0);">C</a>
					<a href="javascript:void(0);">±</a>
					<a href="javascript:void(0);">√</a>
					<a href="javascript:void(0);">7</a>
					<a href="javascript:void(0);">8</a>
					<a href="javascript:void(0);">9</a>
					<a href="javascript:void(0);">/</a>
					<a href="javascript:void(0);">%</a>
					<a href="javascript:void(0);">4</a>
					<a href="javascript:void(0);">5</a>
					<a href="javascript:void(0);">6</a>
					<a href="javascript:void(0);">*</a>
					<a href="javascript:void(0);">1/x</a>
					<a href="javascript:void(0);">1</a>
					<a href="javascript:void(0);">2</a>
					<a href="javascript:void(0);">3</a>
					<a href="javascript:void(0);">-</a>
					<a class="cols-2" href="javascript:void(0);">0</a>
					<a href="javascript:void(0);">.</a>
					<a href="javascript:void(0);">+</a>
					<a class="rows-2 abs-lt" href="javascript:void(0);">=</a>
				</div>
			</div>	
		</div>
	</div>

JavaScript:

var fn = function(id){
	return document.getElementById(id);
};

Math.fix = function(n){
	return 1 / n;
};

var Util = {
	"√"	 : "sqrt",
	"1/x": "fix"
};


(function($){

	var result = $("result"), part1 = $("first-part"), calcReady, functionReady;

	var sizeChange = function(){
		if( result.innerHTML.length <= 12 ){
			result.style.fontSize = "22px";
			if( !result.innerHTML ){
				result.innerHTML = 0;
			}
		}else{
			result.style.fontSize = "18px";
		}
	};
	var toggle = function(){
		part1.innerHTML += result.innerHTML.charAt(0) === "-" 
			?
			"(" + result.innerHTML + ")" 
			: 
			result.innerHTML;
	};

	var _switch = function(chr){
		//console.log(chr);
		switch(chr){
			case "←&#
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的实现HTML代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Windows Calculator</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="calculator"> <div class="output"> <div id="result">0</div> </div> <div class="buttons"> <button onclick="clearResult()">C</button> <button onclick="deleteLast()">←</button> <button onclick="calculate('%')">%</button> <button onclick="calculate('/')">÷</button> <button onclick="addDigit(7)">7</button> <button onclick="addDigit(8)">8</button> <button onclick="addDigit(9)">9</button> <button onclick="calculate('*')">x</button> <button onclick="addDigit(4)">4</button> <button onclick="addDigit(5)">5</button> <button onclick="addDigit(6)">6</button> <button onclick="calculate('-')">-</button> <button onclick="addDigit(1)">1</button> <button onclick="addDigit(2)">2</button> <button onclick="addDigit(3)">3</button> <button onclick="calculate('+')">+</button> <button onclick="addDigit(0)">0</button> <button onclick="addDigit('.')">.</button> <button class="equal" onclick="calculate('=')">=</button> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS代码: ``` .calculator { width: 300px; margin: 50px auto; background-color: #eee; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0,0,0,0.3); } .output { height: 60px; padding: 10px; text-align: right; font-size: 30px; font-weight: bold; background-color: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5px; padding: 10px; background-color: #ccc; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } button { width: 100%; height: 50px; font-size: 20px; font-weight: bold; border-radius: 5px; border: none; background-color: #fff; cursor: pointer; } button:hover { background-color: #ddd; } .equal { background-color: #f90; color: #fff; font-size: 24px; } .equal:hover { background-color: #ff0; } ``` JavaScript代码: ``` let result = document.getElementById('result'); let expression = ''; function addDigit(digit) { expression += digit; result.textContent = expression; } function clearResult() { expression = ''; result.textContent = '0'; } function deleteLast() { expression = expression.slice(0, -1); result.textContent = expression || '0'; } function calculate(operator) { if (operator === '=') { expression = eval(expression).toString(); } else { expression += operator; } result.textContent = expression; } ``` 这个计算器支持加减乘除、百分数、小数点和删除操作,可以进行基本的数学运算。但是需要注意的是,这个计算器使用了`eval`函数来计算表达式,可能存在一些安全问题,因此不应该在生产环境中使用。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值