闲来无事儿,自己写了一个计算器的小插件。
我在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');
});
});
背景图
图标: