google chrome的一个计算器扩展

闲来无事儿，自己写了一个计算器的小插件。

我在JS代码中的有详细的注释，有兴趣的小伙伴可以看看。

manifest.json代码如下：

{  
  "name": "计算器",  
  "version": "0.9.0",
  "manifest_version":2,
  "description": "这是一个简单的计算器.",  
  "browser_action": {  
    "default_icon": "image/calculator.png" ,
    "default_title": "计算器",
    "default_popup": "popup.html"
  },
  "icons":{
	"32":"image/calculator_32.png",  
	"64":"image/calculator_64.png",
	"128":"image/calculator_128.png"
  }
}

popup.html:

<!document html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
			input{
					background:rgba(255, 251, 240, 0.5);<!-----设置按钮透明度0.5---->
					font-family:微软雅黑;
					font-size:18px;
					font-style:normal;
				}
		</style>
    </head>
    <body style="width:198; height:200; background-image:url(image/blackground.png); background-repeat:no-repeat">
        <script  type="text/javascript" src="js/popup.js"></script>
        <input type="text" id="txt" style="width:193; height:32; text-align:right; background:rgba(255, 251, 240, 0.6)" />
        <br />
        <input type="button" id="backspace" style="width:95; height:32" value="←" />
        <input type="button" id="delete" style="width:95.5; height:32" value="C" />
        <br />
        <input type="button" id="b7" style="width:46; height:32" value="7" />
        <input type="button" id="b8" value="8" style="width:46; height:32" />
        <input type="button" id="b9" value="9" style="width:46; height:32" />
        <input type="button" id="b10" value="/" style="width:46; height:32" />
        <br />
        <input type="button" id="b4" value="4" style="width:46; height:32" />
        <input type="button" id="b5" value="5" style="width:46; height:32" />
        <input type="button" id="b6" value="6" style="width:46; height:32" />
        <input type="button" id="b11" value="*" style="width:46; height:32" />
        <br />
        <input type="button" id="b1" value="1" style="width:46; height:32" />
        <input type="button" id="b2" value="2" style="width:46; height:32" />
        <input type="button" id="b3" value="3" style="width:46; height:32" />
        <input type="button" id="b12" value="-" style="width:46; height:32" />
        <br />
        <input type="button" id="b0" value="0" style="width:46; height:32" />
        <input type="button" id="b13" value="." style="width:46; height:32" />
        <input type="button" id="b14" value="=" style="width:46; height:32" />
        <input type="button" id="b15" value="+" style="width:46; height:32" />
        <br />
    </body>
</html>

popup.js代码如下：

var FirstNumber = 0;//存放每次计算的被减（加，除，乘）数
var str1 = " ";//存放符号str1和str2等效的
var str2 = " ";//
var equal = false;//判断等号是否被点击
var result = 0;//存放计算结果
function num(number){//数字输入的响应函数(小数点也算)
	var t = document.getElementById("txt");//获取文本框元素
	if(number == '.' && t.value.indexOf('.') != -1){//用indexOf()函数查找用户是否已经输入过小数点,如果输入过，并且有一次输入，返回false
		return false;
	}
	if(equal){//判断书否点击了等号，因为equal初始化是false，如果点击等号equal=ture,之后还的判断用户是否点击过运算符
		if(str2 == " "){//没点过运算符，文本框内的数字继续增加
			t.value += number;
			equal = false;
		}else{//点过运算符，将现在点击的数字替换文本框内的数字
			t.value = number;
			equal = false;
		}
	}else if(str1 != " "){//判断是否点过运算符,是的话，将现在点击的数字替换文本框内的数字
		t.value = number;
		str1 = " ";
	}else{
		t.value += number;
	}

}
function Str(number){//符号输入的响应函数
	var t = document.getElementById("txt");
	str1 = number;
	str2 = number;
	if(str1 != " "){//如果用户点击运算符，将之前输入的数值赋给FirstNumber
		FirstNumber = parseFloat(t.value);
		//alert(number);
	}
	
}
function Result(){//等于号的响应函数
	equal = true;
	var t = document.getElementById("txt");
	switch(str2){//判断运算符,从而执行不同的运算
		case "+":
			result = FirstNumber + parseFloat(t.value);
			t.value = result;
			break;
		case "-":
			result = FirstNumber - parseFloat(t.value);
			t.value = result;
			break;
		case "*":
			result = FirstNumber * parseFloat(t.value);
			t.value = result;
			break;
		case "/":
			result = FirstNumber / parseFloat(t.value);
			t.value = result;
			break;
	}
}
function BackSpace(){//退格键函数,下面用到的函数本人在之前介绍过http://blog.csdn.net/weilixin88/article/details/53925294
	var t = document.getElementById("txt");
	t.value += " ";//现在文本框中的字符串最后加上一个空格字符
	var i = t.value.lastIndexOf(" ");//用lastIndexOf()函数读取空格字符在字符串中最后出现的位置,赋值给i
	i -=1;//再将i值减1,就是原来字符串中倒数第二个字符的索引号
	t.value = t.value.substr(0,i);//调用substr（）函数将文本中的字符从0到i提取出来,然后重新赋给文本框
}
function Delete(){//清除按钮函数，就是将所有元素和变量都初始化
	var t = document.getElementById("txt");
	t.value = null;
	FirstNumber = 0;
	str1 = " ";
	str2 = " ";
	equal = false;
	result = 0;
}
//鼠标滑过
function mouseover(id){//鼠标移到按钮上，按钮的透明度减少
	document.getElementById(id).style.background = "rgba(255,251,240,0.8)";
}
//鼠标滑出函数
function mouseout(id){
	document.getElementById(id).style.background = "rgba(255,251,240,0.5)";
}
//解决扩展不能访问内联函数的方法（因为google浏览器老是报错，禁止访问内联函数，就在一个论坛里面找到一个这样的解决方法，但是很罗嗦，不知道有没有小伙伴有好方法告诉我哦）
document.addEventListener('DOMContentLoaded', function() {
    var link7 = document.getElementById('b7');//访问按钮7元素
    link7.addEventListener('click', function() {//调用addEventListener方法,当动作是click执行函数num(7)
        num(7);
    });
	link7.addEventListener('mouseover',function(){//调用addEventListener方法,当作动作是mouseover时执行函数mouseover('b7')
		 mouseover('b7');
	});
	link7.addEventListener('mouseout',function(){//调用addEventListener方法，当动作是mouseout执行函数mouseout('b7')。后面的都一样
		 mouseout('b7');
	});
	
	var link8 = document.getElementById('b8');
    link8.addEventListener('click', function() {
        num(8);
    });
	link8.addEventListener('mouseover',function(){
		 mouseover('b8');
	});
	link8.addEventListener('mouseout',function(){
		 mouseout('b8');
	});
	
	var link9 = document.getElementById('b9');
    link9.addEventListener('click', function() {
        num(9);
    });
	link9.addEventListener('mouseover',function(){
		 mouseover('b9');
	});
	link9.addEventListener('mouseout',function(){
		 mouseout('b9');
	});
	
	var link4 = document.getElementById('b4');
    link4.addEventListener('click', function() {
        num(4);
    });
	link4.addEventListener('mouseover',function(){
		 mouseover('b4');
	});
	link4.addEventListener('mouseout',function(){
		 mouseout('b4');
	});
	
	var link5 = document.getElementById('b5');
    link5.addEventListener('click', function() {
        num(5);
    });
	link5.addEventListener('mouseover',function(){
		 mouseover('b5');
	});
	link5.addEventListener('mouseout',function(){
		 mouseout('b5');
	});
	
	var link6 = document.getElementById('b6');
    link6.addEventListener('click', function() {
        num(6);
    });
	link6.addEventListener('mouseover',function(){
		 mouseover('b6');
	});
	link6.addEventListener('mouseout',function(){
		 mouseout('b6');
	});
	
	var link1 = document.getElementById('b1');
    link1.addEventListener('click', function() {
        num(1);
    });
	link1.addEventListener('mouseover',function(){
		 mouseover('b1');
	});
	link1.addEventListener('mouseout',function(){
		 mouseout('b1');
	});
	
	var link2 = document.getElementById('b2');
    link2.addEventListener('click', function() {
        num(2);
    });
	link2.addEventListener('mouseover',function(){
		 mouseover('b2');
	});
	link2.addEventListener('mouseout',function(){
		 mouseout('b2');
	});
	
	var link3 = document.getElementById('b3');
    link3.addEventListener('click', function() {
        num(3);
    });
	link3.addEventListener('mouseover',function(){
		 mouseover('b3');
	});
	link3.addEventListener('mouseout',function(){
		 mouseout('b3');
	});
	
	var link0 = document.getElementById('b0');
    link0.addEventListener('click', function() {
        num(0);
    });
	link0.addEventListener('mouseover',function(){
		 mouseover('b0');
	});
	link0.addEventListener('mouseout',function(){
		 mouseout('b0');
	});
	
	var link13 = document.getElementById('b13');
    link13.addEventListener('click', function() {
        num(".");
    });
	link13.addEventListener('mouseover',function(){
		 mouseover('b13');
	});
	link13.addEventListener('mouseout',function(){
		 mouseout('b13');
	});
	
	var link10 = document.getElementById('b10');
    link10.addEventListener('click', function() {
        Str("/");
    });
	link10.addEventListener('mouseover',function(){
		 mouseover('b10');
	});
	link10.addEventListener('mouseout',function(){
		 mouseout('b10');
	});
	
	var link11 = document.getElementById('b11');
    link11.addEventListener('click', function() {
        Str("*");
    });
	link11.addEventListener('mouseover',function(){
		 mouseover('b11');
	});
	link11.addEventListener('mouseout',function(){
		 mouseout('b11');
	});
	
	var link12 = document.getElementById('b12');
    link12.addEventListener('click', function() {
        Str("-");
    });
	link12.addEventListener('mouseover',function(){
		 mouseover('b12');
	});
	link12.addEventListener('mouseout',function(){
		 mouseout('b12');
	});
	
	var link15 = document.getElementById('b15');
    link15.addEventListener('click', function() {
        Str("+");
    });
	link15.addEventListener('mouseover',function(){
		 mouseover('b15');
	});
	link15.addEventListener('mouseout',function(){
		 mouseout('b15');
	});
	
	var link14 = document.getElementById('b14');
    link14.addEventListener('click', function() {
        Result();
    });
	link14.addEventListener('mouseover',function(){
		 mouseover('b14');
	});
	link14.addEventListener('mouseout',function(){
		 mouseout('b14');
	});
	
	var link16 = document.getElementById('backspace');
    link16.addEventListener('click', function() {
        BackSpace();
    });
	link16.addEventListener('mouseover',function(){
		 mouseover('backspace');
	});
	link16.addEventListener('mouseout',function(){
		 mouseout('backspace');
	});
	
	var link17 = document.getElementById('delete');
    link17.addEventListener('click', function() {
        Delete();
    });
	link17.addEventListener('mouseover',function(){
		 mouseover('delete');
	});
	link17.addEventListener('mouseout',function(){
		 mouseout('delete');
	});
});

背景图

图标：

迷茫的小羊

原创文章 24 获赞 45 访问量 3万+

关注私信

google chrome的一个计算器扩展

猜你喜欢