js实现Windows计算器

本文介绍了如何使用HTML、CSS和JavaScript技术,从头构建一个功能类似于Windows操作系统的计算器。通过JavaScript实现基本的数学运算,结合HTML创建用户界面,并利用CSS进行样式设计,达到交互和视觉效果。
摘要由CSDN通过智能技术生成

在这里插入图片描述
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 "←":
				//去掉最后一个字符 
				result.innerHTML = result.innerHTML.substring(0,result.innerHTML.length-1);
			
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值