chrome插件开发计算器小例子
来源：互联网 发布：电子病历源码下载 编辑：程序博客网 时间：2024/05/11 18:26
computer.css
body {
font-size:12px;font-family:Arial, Georgia, "Times New Roman", Times, serif;
color:#555;
text-align:center;
background-color:#e2e2e2;
}
h6{
margin:0;
font-size:12px;
}
#calculator {
width:240px;
height:auto;
overflow:hidden;
margin:10px auto;
border:#fff 1px solid;
padding-bottom:10px;
background-color:#f2f2f2;
}
#calculator div {
clear:both;
}
#calculator ul{
padding:0;
margin:5px 14px;
border:#fff 1px solid;
height:auto;
overflow:hidden
}
#calculator li{
list-style:none;
float:left;
width:32px;
height:32px;
margin:5px;
display:inline;
line-height:32px;
font-size:14px;
background-color:#eaeaea;
}
#calculator li.tool{
background-color:#e2e2e2;
}
#calculator li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
#calculator li:active{
background-color:#fc0;
cursor:pointer;
}
#calculator li.tool:active{
background-color:#d8e8ff;
cursor:pointer;
}
#calcu-head {
text-align:left;
padding:10px 15px 5px;
}
span.imyeah {
float:right;
color:#ccc;
}
span.imyeah a{
color:#ccc;
}
.screen{
width:200px;
height:24px;
line-height:24px;
padding:4px;
border:#e6e6e6 1px solid;
border-bottom:#f2f2f2 1px solid;
border-right:#f2f2f2 1px solid;
margin:10px auto;
direction:ltr;
text-align:right;
font-size:16px;
color:#999;
}
#calcu-foot{
text-align:left;
padding:10px 15px 5px;
height:auto;
overflow:hidden;
}
span#note{
float:left;
width:210px;
height:auto;
overflow:hidden;
color:red;
}
span.welcome{
clear:both;
color:#999;
}
span.welcome a{
float:right;
color:#999;
}
computer.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>写给新手：js表单操作（四） 简单计算器（二）</title>
<link href="computer.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="calculator">
<div id="calcu-head"><span class="imyeah">© <a href="http://blog.csdn.net/zhangge360" target="_blank">I'm Zhangge!</a></span><h6>简单的计算器</h6></div>
<form name="calculator" action="" method="get">
<div id="calcu-screen">
<input type="text" name="numScreen" class="screen" value="0" id="numScreen"/>
</div>
<div id="calcu-btn">
<ul>
<li id="7">7</li>
<li id="8">8</li>
<li id="9">9</li>
<li class="tool" id="del">←</li>
<li class="tool" id="clear">C</li>
<li id="4">4</li>
<li id="5">5</li>
<li id="6">6</li>
<li class="tool" id="mul">×</li>
<li class="tool" id="divv">÷</li>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li class="tool" id="plus">+</li>
<li class="tool" id="minus">-</li>
<li id="0">0</li>
<li id="dzero">00</li>
<li id="dot">.</li>
<li class="tool" id="persent">%</li>
<li class="tool" id="equal">=</li>
</ul>
</div>
<div id="calcu-foot">
<span id="note"></span>
<span class="welcome">欢迎使用小嘎子计算器！<a href="http://blog.csdn.net/zhangge360" target="_blank">反馈</a></span>
</div>
</form>
</div>
</body>
<script type="text/javascript" src="computer.js"></script>
</html>
computer.js
var num=0,result=0,numshow="0";
var operate=0; //判断输入状态的标志
var calcul=0; //判断计算状态的标志
var quit=0; //防止重复按键的标志
function command(num){
var str=String(document.calculator.numScreen.value); //获得当前显示数据
str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
str=str + String(num); //给当前值追加字符
document.calculator.numScreen.value=str; //刷新显示
operate=0; //重置输入状态
quit=0; //重置防止重复按键的标志
alter(num);
}
function dzero(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";
document.calculator.numScreen.value=str;
operate=0;
}
function dot(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
for(i=0; i<=str.length;i++){ //判断是否已经有一个点号
if(str.substr(i,1)==".") return false; //如果有则不再插入
}
str=str + ".";
document.calculator.numScreen.value=str;
operate=0;
}
function del(){ //退格
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? str : "";
str=str.substr(0,str.length-1);
str=(str!="") ? str : "0";
document.calculator.numScreen.value=str;
}
function clearscreen(){ //清除数据
num=0;
result=0;
numshow="0";
document.calculator.numScreen.value="0";
}
function plus(){ //加法
calculate(); //调用计算函数
operate=1; //更改输入状态
calcul=1; //更改计算状态为加
}
function minus(){ //减法
calculate();
operate=1;
calcul=2;
}
function times(){ //乘法
calculate();
operate=1;
calcul=3;
}
function divide(){ //除法
calculate();
operate=1;
calcul=4;
}
function persent(){ //求余
calculate();
operate=1;
calcul=5;
}
function equal(){
calculate(); //等于
operate=1;
num=0;
result=0;
numshow="0";
}
//
function calculate(){
numshow=Number(document.calculator.numScreen.value);
if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态
switch(calcul){ //判断要输入状态
case 1:result=num+numshow;break; //计算"+"
case 2:result=num-numshow;break; //计算"-"
case 3:result=num*numshow;break;
case 4:if(numshow!=0){result=num/numshow;}else{document.getElementById("note").innerHTML="被除数不能为零！"; setTimeout(clearnote,4000)} break;
case 5:result=num%numshow;break;
}
quit=1; //避免重复按键
}
else{
result=numshow;
}
numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result; //存储当前值
}
function clearnote(){ //清空提示
document.getElementById("note").innerHTML="";
}
function one(){
command(1);
}
function two(){
command(2);
}
function three(){
command(3);
}
function four(){
command(4);
}
function five(){
command(5);
}
function six(){
command(6);
}
function seven(){
command(7);
}
function eight(){
command(8);
}
function nine(){
command(9);
}
function zero(){
command(0);
}
NoExec = function(event) {
event.returnValue = false;
}
document.getElementById("numScreen").addEventListener("keydown",NoExec);
document.getElementById("numScreen").addEventListener("keyup",NoExec);
document.getElementById("1").addEventListener("click",one);
document.getElementById("2").addEventListener("click",two);
document.getElementById("3").addEventListener("click",three);
document.getElementById("4").addEventListener("click",four);
document.getElementById("5").addEventListener("click",five);
document.getElementById("6").addEventListener("click",six);
document.getElementById("7").addEventListener("click",seven);
document.getElementById("8").addEventListener("click",eight);
document.getElementById("9").addEventListener("click",nine);
document.getElementById("0").addEventListener("click",zero);
document.getElementById("dzero").addEventListener("click",dzero);
document.getElementById("dot").addEventListener("click",dot);
document.getElementById("divv").addEventListener("click",divide);
document.getElementById("mul").addEventListener("click",times);
document.getElementById("del").addEventListener("click",del);
document.getElementById("clear").addEventListener("click",clearscreen);
document.getElementById("plus").addEventListener("click",plus);
document.getElementById("minus").addEventListener("click",minus);
document.getElementById("persent").addEventListener("click",persent);
document.getElementById("equal").addEventListener("click",equal);
manifest.json
{
"manifest_version": 2,
"name": "computer",
"version": "0.9.0",
"description": "Management my everyday's task lists.",
"browser_action": {
"default_icon": "computer.png" ,
"default_title": "computer",
"default_popup": "computer.html"
},
"content_scripts": [ {
"css": [ "computer.css" ],
"js": [ "computer.js" ],
"matches": [ "<all_urls>" ]
} ]
}
- chrome插件开发计算器小例子
- 计算器小例子
- Chrome插件开发 小插件-acfun看图 1
- Chrome插件开发 小插件-acfun看图 2
- Chrome插件开发 小插件-acfun看图 3
- Chrome 插件之 计算器插件小工具
- Chrome插件开发实例---刷论坛在线时间小程序
- extjs4计算器插件开发
- chrome插件开发
- Chrome 插件开发指导
- Chrome 插件初学开发
- 开发Chrome插件入门
- Chrome插件开发进阶
- Chrome插件开发入门
- Chrome 插件开发
- Chrome插件开发入门
- chrome浏览器插件开发
- Chrome扩展插件开发
- springmvc之RedirectAttributes重定向带参数设置
- #week1# hihocoder 1032 最长回文子串
- 练习2：输出MyBank系统菜单 teacher
- PHP+Apache+MySQL环境配置
- 手把手教你如何配置Android环境-(一)Java环境变量
- chrome插件开发计算器小例子
- 一天一条Linux指令-ifconfig
- idea 创建maven（ssm框架整合）
- Intellij 常用设置大全
- 内部比较器Comparable和外部比较器Comparator
- Netflix Curator 使用（Zookeeper 简化客户端）
- 阅读JVM高级特性与最佳实践-3
- java调用Linux 命令、Shell脚本
- DAY23：leetcode #56 Merge Intervals
