‘编程学习’ 分类下的所有文章
2013四月26

收房费用计算器源码

使用地址:http://www.alplaza.cn/jsq/jsq.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>收房费用计算器 - 交房验房 - 安粮城市广场业主论坛</title>
    <script tyoe="text/javascript" src="jquery-1.8.0.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            var t;
            $("#bt").click(function() {
                js();
            });
            $("#mj").keyup(function() {
                ze();
            });
            $("#dj").keyup(function() {
                ze();
            }); 
            $("#mj").click(function() {
                t = $(this).val();
                $(this).val("");
            });
            $("#dj").click(function() {
                t = $(this).val();
                $(this).val("");
            });
            $("#fj").click(function() {
                t = $(this).val();
                $(this).val("");
            });
            $("#mj").blur(function() {
                if ($(this).val() == "")
                    $(this).val(t);
            });
            $("#dj").blur(function() {
                if ($(this).val() == "")
                    $(this).val(t);
            });
            $("#fj").blur(function() {
                if ($(this).val() == "")
                    $(this).val(t);
            });
            for (var i = 1; i <= 10; i++) {
                $("#f0" + i).keyup(function() {
                    hj();
                });
                $("#f0" + i).click(function() {
                    t = $(this).val();
                    $(this).val("");
                });
                $("#f0" + i).blur(function() {
                    if ($(this).val() == "")
                        $(this).val(t);
                });
            }
        });
        function lk() {

        }
        function js() {
            var st = $("#st").attr("checked");
            var mj = parseFloat($("#mj").val());
            var fl = 0.02;
            if (st && mj < 90) {
                $("#qs").html("1%");
                fl = 0.01;
            } else if (st && mj >= 90 && mj < 144) {
                $("#qs").html("2%");
                fl = 0.02;
            } else {
                $("#qs").html("4%");
                fl = 0.04;
            }
            $("#f01").val(parseFloat($("#fj").val()) * fl);
            $("#f02").val("5.00");
            $("#f03").val(parseFloat($("#fj").val()) * 0.02);
            $("#f04").val("80.00");
            $("#f05").val("5.00");
            $("#f06").val("4.00");
            $("#f07").val(parseFloat($("#fj").val()) * 0.0005);
            $("#f08").val("0");
            $("#f09").val(parseFloat($("#mj").val()) * 1.44 * 6);
            $("#f010").val(parseFloat($("#fj").val()) * 0.0001 * -14);
            hj();

        }
        function hj() {
            var sum = 0.0;
            for (var i = 1; i <= 10; i++) {
                sum += parseFloat($("#f0" + i).val());
            }

            $("#hj").val(sum);
        }
        function ze() {
            var sum = 0.0;
            sum = parseFloat($("#mj").val()) * parseFloat($("#dj").val());
            $("#fj").val(sum);
        }
    </script>
</head>
<body>
<div>
    <div>住房面积:<input id="mj" value="0" size="5"/>㎡
        单价:<input id="dj" value="0" size="5"/>元
        总房款:<input id="fj" value="0" size="8"/>元 首套房:<input id="st" type="checkbox"> <input
                type="button" id="bt" value=" 计 算 "></div>
    <div style="height:10px"></div>
    <div>
        <table width="300" cellpadding="1" border="0" cellspacing="5">
            <tr>
                <td width="220">税费种类</td>
                <td align="right" width="50">税率</td>
                <td align="right" width="80">金额</td>
            </tr>
            <tr>
                <td><strong>契税</strong></td>
                <td align="right">
                    <div id="qs"></div>
                </td>
                <td align="right"><input id="f01" size="5" type="text" value="0"/></td>
            </tr>
            <tr>
                <td>买卖合同印刷税</td>
                <td align="right"></td>
                <td align="right"><input id="f02" size="5" type="text" value="5.00"/></td>
            </tr>
            <tr>
                <td><strong>公共维修基金</strong></td>
                <td align="right">2%</td>
                <td align="right"><input id="f03" size="5" type="text" value="0"/></td>
            </tr>
            <tr>
                <td>房屋所有权登记费</td>
                <td align="right"></td>
                <td align="right"><input id="f04" size="5" type="text" value="80.00"/></td>
            </tr>
            <tr>
                <td>房屋所有权印花贴</td>
                <td align="right"></td>
                <td align="right" id="yh"><input id="f05" size="5" type="text" value="5.00"/></td>
            </tr>
            <tr>
                <td>税权证工本费</td>
                <td align="right"></td>
                <td align="right"><input id="f06" size="5" type="text" value="4.00"/></td>
            </tr>
            <tr>
                <td>印花税</td>
                <td align="right">0.05%</td>
                <td align="right"><input id="f07" size="5" type="text" value="0"/></td>
            </tr>
            <tr>
                <td>有线电视开通费</td>
                <td align="right">360</td>
                <td align="right"><input id="f08" size="5" type="text" value="0"/></td>
            </tr>
            <tr>
                <td>物业费(半年)</td>
                <td align="right">1.44</td>
                <td align="right"><input id="f09" size="5" type="text" value="0"/></td>
            </tr>
            <tr>
                <td>逾期交房(14天)</td>
                <td align="right">0.01%</td>
                <td align="right"><input id="f010" size="5" type="text" value="0"/></td>
            </tr>
            <tr>
                <td colspan="3">
                    <hr>
                </td>
            </tr>
            <tr>
                <td>合 计:</td>
                <td align="right"></td>
                <td align="right"><input id="hj" size="10" type="text" value=""/></td>
            </tr>
        </table>
    </div>
    <div>仅做参考!
        <script type="text/javascript">
            var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
            document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ff60828d0b1ab0acb57c4bbec23edd765' type='text/javascript'%3E%3C/script%3E"));
        </script>
    </div>
</div>
</body>
</html>
2013四月11

Velocity遍历hashtable输出key和value

#foreach($key in $yygldwlx.keySet())

key:$!key —>$!yygldwlx.get(“$!key”)

#end

2013四月7

Oracle服务无法启动时手动启动数据库命令

SET ORACLE_SID=ORCL
sqlplus /nolog
SQL> connect / as sysdba
SQL> startup

2013三月25

Nutz:Java开发框架搭建基本完成

一直想拥有一个开发快捷、界面美观、用户体验好的java开发框架,网罗不来只好自己动手,现在框架基础功能已完成,界面还需要美工优化一下。(以下图片点击查看全图)

1

 

购买咨询Q:11624317
验证信息:框架

技术:Nutz + Velocity + c3p0 + zDialog +  jQuery + zTree

环境:JDK + Eclipse +Tomcat + Oracle/MySQL

1、系统采用国产开源Nutz框架,实现项目的“零配置”(这可比SSH轻松多了),Nutz在一个类中可以随意定义访问地址,返回String、JSON、对象或跳转到具体页面,也可以利用Velocity打印结果;
2、系统集成泽元CMS1.0系统中的弹出窗口及页面验证、控制JS,并结合jquery easyui实现标签页;
3、系统无缝集成jQuery,jquery和nutz真是天作之合,可方便的实现ajax功能,另外你也可以使用velocity在页面输出内容,比较灵活;
4、已完成系统管理模块,数据表设计合理,权限控制到按钮级,可按机构建用户角色等。

下面是一段简单的Nutz类实现,Nutz更多介绍可以访问官网:http://nutzam.com/

@IocBean
@At("/private")//访问路径
@Filters({ @By(type = GlobalsFilter.class) })
public class LoginAction extends BaseAction {

	@At //访问路径,不指定则为方法名称,即:/private/logout
	@Ok(">>:/private/login")//外连接,跳转到 /private/login
	public void logout(HttpSession session) {
		session.removeAttribute("userSession");
	}

	@At("/login")
	@Ok("->:/private/login.html")//内连接,输出到 /private/login.html
	public void login(HttpServletRequest req) {
		req.setAttribute("menulist", "helloworld");//页面可以用velocity语言输出
	}
	@At
	@Ok("raw") //返回字符串类型,也可以是json、对象等
	public int Online(@Param("loginname") String loginname,HttpSession session) { 
		Sys_user user = (Sys_user) session.getAttribute("userSession");
		if(user==null){ 
			return -2;
		}
		if (loginname != null&&!"".equals(loginname)) {
			OnlineUtil.addUser(loginname, String.valueOf(1));
		} 
		return OnlineUtil.getOnlineCount(String.valueOf(1));
	} 

}

2

 

3

 

4

5

2013三月8

Phonegap开发经验总结:Android与iOS应用开发的平滑移植

之前用phonegap做过Anroid项目,主要功能是人员定位、表单提交、拍照上传、通知提醒等功能,这也是最常用而基本的应用功能,最近打算出iOS版本的客户端,这里简单总结使用phonegap开发的一些经验以及探讨代码在不同手机系统的平移工作。

1、PhoneGap介绍

PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。这是PhoneGap最大的优点,支持jquery使其开发功能简单而强大。官方网站为 http://www.phonegap.com/ 更新速度较快,一般1个月就会发布一个新版本支持最新版本的手机系统。

既然要实现跨平台开发,大部分功能代码要做到可移植复用,在保持安全性、功能性的基础上尽量使用HTML+JS+PhoneGap API来实现业务功能,尽量避免使用手机系统的SDK开发实现。

UI层使用 Jquery Mobile ,API介绍见 http://www.jqmapi.com  ,定义了表单元素、页面和对话框等,和PhoneGap结合使用比较方便。

2、Android应用开发

2.1 数据库操作

PhoneGap API数据库操作是跨平台的,所以这里介绍后iOS段就不再赘述。

	var db ;
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        db = window.openDatabase("testdb", "1.0", "MyApp", 12000000);      
        db.transaction(creatDB,errorDB); //创建表    
		db.transaction(loginDB,errorDB); //查询表初始化表单    
    }	
    function creatDB(tx)
    { 
        tx.executeSql('CREATE TABLE IF NOT EXISTS USER (ID,LOGINNAME,PASSWORD)');  
    }
    function errorDB(err) {
       navigator.notification.alert("异常信息: "+err.code,null,"温馨提示","确定");
    }
    function loginDB(tx) {
	    tx.executeSql('SELECT * FROM USER', [], querySuccess, errorDB);  
    }
    function querySuccess(tx, results) {
        var len = results.rows.length;
        if(len>0)
        { 
            $("#loginname").val(results.rows.item(0).LOGINNAME);//LOGINNAME大写
            $("#password").val(results.rows.item(0).PASSWORD);   
        }
    }

2.2 表单提交

使用jquery+JSON解析和提交表单,常用示例:

	function getData(){
	    //{"mc":"Hello World!","list":[{"key":"0001","value":"张三"},{"key":"0002","value":"李四"}]}
		$.mobile.showPageLoadingMsg( "加载中....." ); //打开加载进度条	
		$.post(//使用jquery的POST方法  serverurl 放在公共JS里定义
				serverurl+ "/json/getdata.jsp",
				{
					"doAction":"getdata",
					"loginname":comHT.get("loginname"),//comHT 定义了从URL获取参数赋值到Hashtable中方法
					"password":hex_md5(comHT.get("password")),//hex_md5 实现对密码的加密
					"resourceid":"00100002",
					"rmd":Math.random()
				},
				function(data) {
					var jsondata = jQuery.parseJSON(data); //解析数据为JSON格式
                    $("#mc").val(jsondata.mc);//文本框赋值
					jQuery.each(jsondata.list, function(index, obj) {
						$("#czyy").append('<option value="'+obj.key+'">'+obj.value+'</option>');//下拉框架赋值  
					});
					$.mobile.hidePageLoadingMsg(); //关闭进度条

				});
	}

2.3 拍照上传

使用phonegap提供的API来使用,iOS下代码略有不同,注:此段代码phonegap 为2.0.0

原理是先把文件提交,提交成功后获得服务器真实路径,在表单提交的时候保存进数据库。

<img style="width:120px;height:120px;" id="zpzp1" src="../image/zpsc.png" onclick="pz(this,1)" /> 
<input type="hidden" id="zp1" value="">
    function pz(obj,v_zdz) {
		zdz=v_zdz;
		zpobj = obj;
		navigator.camera.getPicture(onSuccess, onFail, {
			quality : 25,
			destinationType : Camera.DestinationType.FILE_URI
		}); 
	}
 	// 采集操作成功完成后的回调函数
	function onSuccess(imageURI) {
		zpobj.src = imageURI;
		uploadFile(imageURI);
	}
	// 采集操作出错后的回调函数
	function onFail(error) {
	}
	// 上传文件到服务器
	function uploadFile(path) {
		    var ft = new FileTransfer();
		    var loginname=comHT.get("loginname");
            var options = new FileUploadOptions();
            var fn=loginname+"-"+path.substr(path.lastIndexOf('/')+1);
            options.fileKey="file";
            options.fileName=path.substr(path.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";
            options.chunkedMode = false; 
		    ft.upload(
				 path, 
				 serverurl+"/json/upload.jsp?fn="+fn,
			     function(result) {
					 var jsondata = jQuery.parseJSON(result.response);
					 $("#zp"+zdz).val(jsondata.path);
					 navigator.notification.alert("照片"+zdz+" "+decodeURI(jsondata.res),null,"温馨提示","确定");
		         }, 
		         function(error) {
		        	 navigator.notification.alert("照片"+zdz+" 上传失败!"+ error.code,null,"温馨提示","确定"); 
		         }, 
		         options
		    );
	}

2.4 人员定位

采用百度定位SDK,从用户表中读取用户标识,详细的开发过程过繁琐不写了(好吧,下班了。。),下载和查看百度定位SDK请访问

http://developer.baidu.com/map/geosdk-android-download.htm

2.5 通知提醒

使用androidpn来实现android下消息推送功能,嗯,这个网上教程比较多,大家搜一下吧。

 

3、iOS应用开发

首先搭建iOS开发环境,详见本站教程 /?p=2438 ,目前phonegap 2.5.0支持iOS6.0以下版本,iOS6.1暂时不支持要等phonegap新版咯。

拍照功能需要真机测试,而真机测试需要证书,这大大的头疼,还好找到了方法,就是找到了一篇《Xcode 4.5.2 + iOS 6.0免证书(iDP)开发+真机调试+生成IPA全攻略》文章,哇哈哈,iOS6.1也适应。文章地址 http://www.cnblogs.com/yuanxiaoping_21cn_com/archive/2012/11/15/2772388.html

 

3.1 数据库操作

同android,略。

3.2 表单提交

同android,略。

3.3 拍照上传

在研究,以后更新。

3.4 人员定位

在研究,以后更新。

3.5 通知提醒

在研究,以后更新。

2012十二月27

jquerymobile 实现提示框

引入JS和CSS文件:

<link rel="stylesheet" href="../css/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="../css/jquery.mobile.simpledialog.min.css" /> 
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile.simpledialog2.min.js"></script>

JS代码:

$('<div>').simpledialog2({
				mode: 'button',
				headerText: '提示',
				headerClose: true,
				buttonPrompt: '请选择商品',
				buttons : {
					'确定': {
						click: function () { 
							//$('#outputbutton1').text('OK');
						}
					}
				}
			});

 

2012十二月11

JS源码:网页滚动右下角出现返回顶部goTop

效果如图:

直接贴代码:

<!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>
  <TITLE> Wizzer.cn </TITLE>
  <style type="text/css" media="screen">
#goTop {position:fixed;right:20px;bottom:20px;width:40px;height:32px;padding:8px 0 0;background-color:#69c;border-radius:6px;cursor:pointer;}
#goTop:hover {background-color:#369;}
#goTop:hover .gotop1 {border-left:12px solid #369;border-right:12px solid #369;}
#goTop .gotop1 {width:0;margin:0 auto;border-bottom:12px solid #FFF;border-left:12px solid #69c;border-right:12px solid #69c;}
#goTop .gotop2 {width:10px;height:10px;margin:0 auto;background-color:#FFF;}
</style>
 </HEAD>

 <BODY>

a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>

<div title="返回顶部" id="goTop" style="display:none;">
	<div class="gotop1"></div>
	<div class="gotop2"></div>
</div>

<script type="text/javascript">
	    function $getId(Id) {
	        return document.getElementById(Id);
	    }
	    var goTop = $getId("goTop");
	    window.onscroll = function () {
	        if (document.documentElement.scrollTop + document.body.scrollTop > 350) {
	            goTop.style.display = "";
	        } else {
	            goTop.style.display = "none";
	        }
	    }
	    goTop.onclick = function () {
	        var Timer = setInterval(GoTop, 10);
	        function GoTop() {
	            if (document.documentElement.scrollTop + document.body.scrollTop < 1) {
	                clearInterval(Timer);
	            } else {
	                document.documentElement.scrollTop /= 1.1;
	                document.body.scrollTop /= 1.1;
	            }
	        }
	    }
	</script>
 </BODY>
</HTML>

 

 

2012十一月27

搭建iOS6开发环境:VMware 9.0.1安装Mac OS X Mountain Lion 10.8.2指南

准备工作

1、VMware Workstation Build 9.0.1 + 序列号生成器

磁力链:下载地址1

2、Mac OS X Mountain Lion 10.8.2 build 12C60 原版

磁力链:  下载地址1

3、7z 解压软件

点击打开:下载地址1

4、unlock-all-v110    VMware9 补丁

点击打开:CSDN下载页面

5、UltraISO 9.5.3

点击打开:中关村下载页面

软件安装

1、下载好Mac OS X安装镜像文件 InstallESD.dmg,使用7z打开,找到子文件夹下面的 installesd.dmg解压出来,再使用 UltraISO 转换格式为 iso 文件。

2、使用序列号生成器生成序列号,安装好VMware9,解压VMware9补丁,找到 unlock-all-v110\windows 下面的install.cmd双击执行。

虚拟机安装

1、相信大家都使用过VMware,怎么用就不再赘述(不晓得的可以百度或google   o(∩_∩)o )

安装补丁后就可以看到 Apple Mac OS X选项。

2、接下来就是配置虚拟机,找到iso文件,启动虚拟机下一步、下一步、下一步……

详细教程可以移步这里:http://bbs.pcbeta.com/viewthread-1130227-1-1.html

3、VMware Tools 安装,配置虚拟机光驱选择  unlock-all-v110\tools 下面的文件 darwin.iso,在mac系统下找到光驱执行安装即可。

安装成功后,mac 支持HD4000、可以全屏、设置分辨率。

Xcode 4.5.2

1、系统安装成功登陆系统后,在mac系统下访问:

https://developer.apple.com/xcode/

点击页面上的 View Downloads 链接,输入你的Apple帐号密码即可下载。

2、Xcode 4.5.2 变化很大,以前老的教程已经不适用,再也找不到 View-based Application 和 Window-based Application里,这里推荐大家去买个新教程吧,我买了个但为了避免广告就不帖地址了。质量如何还不知道,还没发给我。- –

 

 


2012十一月22

经验分享:Firefox插件开发说明

Firefox插件分为两种,即extension和plugin,网上搜索到的示例多是 XUL应用程序开发,XUL插件安装后需要重启浏览器才能使用,而这篇文章主要介绍如何使用 Add-on 来开发JS+HTML+CSS 应用,如Chrome插件可直接安装使用。

(感兴趣的朋友可以查看本站上一篇文章:chrome插件开发说明,对比一下你会发现chrome插件开发简直太easy – -)

言归正传,Add-on 提供SDK下载和在线开发两种方式,访问 https://builder.addons.mozilla.org/ 通过简单的注册,点击“Create an Add-on Now”,自动生成一个带main.js 的项目,如下图所示,你可以在Data文件夹下上传编辑自己的文件(若上传文件后左侧半天不出来按下F5即可):

Add-on 启动函数为 main.js,这里可以通过 require 申请一些资源权限,而放置在Data用户文件夹里的JS是不能直接使用 require 的,可能是Add-on 框架设计本身就不支持随意的调用系统资源吧,这个时候就得利用 port.on 和 port.emit 来传递变量和执行方法。

网络请求的示例可以访问:https://builder.addons.mozilla.org/package/89576/ 来查看,里面具体介绍了 port.on 和 port.emit 的使用、panel的生成、jQuery的引入、网络请求等,这个例子非常好。

通过查看其他网友分享的代码学习,地址:https://builder.addons.mozilla.org/search/ 输入关键词,查找你关心想实现的功能吧。

 

具体功能开发不在累述,我写的这个简单查询功能的插件在商城里搜索“合肥公积金查询”即可下载,下载后若你是win7系统,则:

C:\Users\Wizzer\AppData\Roaming\Mozilla\Firefox\Profiles\zah0wctd.default\extensions

找到 wizzer.cn@gmail.com.xpi  解压即可,源代码没加密,给大家做学习参考之用。

 

其他:

打包:在根文件夹选择所有文件,压缩成zip文件,改后缀名为 xpi。

安装:把xpi文件拖到firefox浏览器中即可。

调试:ctrl—shfit—j 调试插件。

 

扩展组件在线安装地址:

https://addons.mozilla.org/zh-CN/firefox/addon/%E5%90%88%E8%82%A5%E5%85%AC%E7%A7%AF%E9%87%91%E6%9F%A5%E8%AF%A2/

 

2012十一月20

经验分享:Chrome插件开发源码说明

Chrome插件开发极其简单,只要会JS+HTML+CSS即可,当然我捣鼓的是简单的应用作为学习和验证之用,没有更多的深入。

本示例采用 jQuery 实现用户登录查询公积金余额功能,接口提供的功能较多但作为学习么,只开发了一个查询余额的功能。

运行效果:

1、首先创建文件夹,文档结构如下:

2、编辑manifest.json文件,填写应用信息、访问权限等:

{ 
  "name": "合肥公积金查询",
  "version": "2012.11.20.0",
  "manifest_version": 2,
  "description": "这是一款合肥市住房公积金查询工具,用于学习测试仅提供余额查询。@Wizzer",
  "icons":{"16":"16.png","48":"48.png"},
  "content_scripts":[{
      "js": [ "scripts/lib/jquery-1.7.2.min.js","scripts/main.js"],
      "matches": [ "http://*/*", "https://*/*" ] 
   }],
  "browser_action": {
	"default_icon": "16.png",
	"default_popup": "index.html"
  },
  "homepage_url":"",
  "permissions": [ "cookies", "tabs", "http://*/*", "https://*/*" ]

}

注意事项:

A、目前最新版的chrome要求设置  “manifest_version”: 2 ;

B、permissions 配置了cookies权限,因为在应用中加入了记住密码功能;

C、API要求JS不可以内联,就是不能直接在页面元素上写JS,例如点击按钮alert提示都不会执行的;

3、本着JS和HTML分离的原则,编写  main.js 文件:

var url = "/chrome";
var key = "接口APP_KEY隐藏";
var zgyhzh="";
var dwyhzh="";
var uptime="";
var hm="";
var mm="";
if (!chrome.cookies) {
  chrome.cookies = chrome.experimental.cookies;
}
function delCookie(name) {
  chrome.cookies.remove({"name": name,"url":url});
}

function setCookie(name,value) {
  chrome.cookies.set({"name": name,"value":value,"url":url ,"expirationDate":1392000000});
}

function initCookie() {
  var str="";
  chrome.cookies.get({"name": "hm","url":url },function(cookie){
        str=cookie.value; 
		if(""!=str){
			$('#savehm').attr("checked",true);
			$('#hm').val(Base64.decode(str));
		}
  });
  chrome.cookies.get({"name": "mm","url":url },function(cookie){
		str=cookie.value; 
		if(""!=str){
			$('#savemm').attr("checked",true);
			$('#mm').val(Base64.decode(str));
		}
  });
}

function login(){
	 hm=Base64.encode($('#hm').val());
	 mm=Base64.encode($('#mm').val());

	$.ajax({
        			url : "http://220.178.98.86/hfgjj/service/login.jsp",
        			data : {"hm":hm,"mm":mm,"app_key":key} ,
        			success : function (res) {
						loginData(res);
						return false;
        			},
        			fail : function(res) {
        				loginData(res);
        			}
        		});

}

function loginData(res){
	if(res.indexOf("error")>=0){
	    var obj = jQuery.parseJSON(res);
		if(""!=obj.tip){
			$("#tip").html("<HR><span style='color:red'>"+obj.tip+"</span>");

		}
	}else if(res.indexOf("more")>=0){
		var obj = jQuery.parseJSON(res);
		if("false"==obj.more){
			zgyhzh=obj.zgyhzh;
			dwyhzh=obj.dwyhzh;
			uptime=obj.uptime;
			oneData();

		}else if("true"==obj.more){
			uptime=obj.uptime;
			var zgyhzhlist=obj.zgyhzhlist;
			$.each(zgyhzhlist,function(entryIndex,entry){ 
				if("true"==entry.zt){
					zgyhzh=entry.zgyhzh;
					dwyhzh=entry.dwyhzh;
					oneData();
					$("#note")[0].style.display='block';
					return;

				}
                });     
		}

	}else{

		$("#tip").html("<HR><span style='color:red'>"+res+"</span>");
	}

}
function oneData(){

			var z=Base64.encode(zgyhzh);
			var d=Base64.encode(dwyhzh);
			$.ajax({
        			url : "http://220.178.98.86/hfgjj/service/grindex.jsp",
        			data : {"hm":hm,"mm":mm,"app_key":key,"zgyhzh":z,"dwyhzh":d} ,
        			success : function (res) {
						showData(res);
						return false;
        			},
        			fail : function(res) {

        			}
        		});

}

function showData(res){
	if(res.indexOf("error")>=0){
	    var obj = jQuery.parseJSON(res);
		if(""!=obj.tip){
			$("#tip").html("<HR><span style='color:red'>"+obj.tip+"</span>");

		}
	}else{
			$("#T1")[0].style.display='none'; 
			$("#T2")[0].style.display='block';
	var obj = jQuery.parseJSON(res);
	var scje=obj.scje;

	$("#uptime").html("<span style='color:red'>"+uptime+"</span>");
	$("#yue").html("<span style='color:red'>"+scje+"</span>");
	}
}

function init(){
  initCookie();
  $('#bt').click(function() {
	  if($('#savemm').attr('checked')){
		 setCookie("mm",Base64.encode($('#mm').val()));
		 setCookie("hm",Base64.encode($('#hm').val()));
	  }else if($('#savehm').attr('checked')){
		 setCookie("mm","");
		 setCookie("hm",Base64.encode($('#hm').val()));
	  }else{
		 setCookie("mm","");
		 setCookie("hm","");
	  }
	  $("#tip").html("<HR><span style='color:red'>Loading...</span>");
	  login();

  });

  $('#savemm').click(function() {
	 if($('#savemm').attr('checked')){
		$('#savehm').attr("checked",true);
	 }else{
		$('#savehm').attr("checked",false);
	 }
  });
}

document.addEventListener('DOMContentLoaded', function () {
  init();
});

PS:搞开发的JS都能看懂,就不注释了。。。

4、index.html 页面的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>合肥市住房公积金查询</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta http-equiv="Cache-Control" content="no-cache"/><!-- 公共样式 -->
<script type='text/javascript' src='scripts/lib/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='scripts/lib/Base64.js'></script>
<script type='text/javascript' src='scripts/main.js'></script> 

<STYLE type=text/css>BODY {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 1.5em; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: break-word; FONT-SIZE: 12px; WORD-BREAK: break-all; PADDING-TOP: 0px
}
DIV {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 1.5em; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: break-word; FONT-SIZE: 12px; WORD-BREAK: break-all; PADDING-TOP: 0px
}
P {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 1.5em; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: break-word; FONT-SIZE: 12px; WORD-BREAK: break-all; PADDING-TOP: 0px
}
EM {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 1.5em; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: break-word; FONT-SIZE: 12px; WORD-BREAK: break-all; PADDING-TOP: 0px
}
SPAN {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 1.5em; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: break-word; FONT-SIZE: 12px; WORD-BREAK: break-all; PADDING-TOP: 0px
}
A {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 1.5em; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: break-word; FONT-SIZE: 12px; WORD-BREAK: break-all; PADDING-TOP: 0px
}
TD {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 1.5em; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: break-word; FONT-SIZE: 12px; WORD-BREAK: break-all; PADDING-TOP: 0px
}
FORM {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 1.5em; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: break-word; FONT-SIZE: 12px; WORD-BREAK: break-all; PADDING-TOP: 0px
}
BUTTON {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 1.5em; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: break-word; FONT-SIZE: 12px; WORD-BREAK: break-all; PADDING-TOP: 0px
}
body {COLOR: #333 ;min-width: 220px; margin: 0; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; width: auto}

EM {
	FONT-WEIGHT: bold
}
STRONG {
	FONT-WEIGHT: bold
}
DEL {
	TEXT-DECORATION: line-through
}
INPUT {
	MARGIN: 2px 0px; FONT-SIZE: 12px
}
SELECT {
	MARGIN: 2px 0px; FONT-SIZE: 12px
}
IMG {
	BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none
}
HR {
	BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; HEIGHT: 0px; CLEAR: both; BORDER-TOP: #ddd 1px solid; BORDER-RIGHT: 0px
}
A:link {
	COLOR: #36c; TEXT-DECORATION: underline
}
A:visited {
	COLOR: #36c; TEXT-DECORATION: underline
}
A.im {
	COLOR: #f60
}
.im {
	COLOR: #f60
}
.imp {
	COLOR: #f00
}
.gp {
	COLOR: #06c
}
.mp {
	COLOR: #f90
}
.module {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 0px
}
.wrapper {

}
.none {
	DISPLAY: none
}
.header {
	BORDER-BOTTOM: #d2d2d2 1px solid; PADDING-BOTTOM: 2px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: #f5f5f5; PADDING-TOP: 2px
}
.footer {
	PADDING-BOTTOM: 2px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BORDER-TOP: #d2d2d2 1px solid; PADDING-TOP: 2px
}
.logo {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 2px
}
.logo A {
	FONT-SIZE: 14px; TEXT-DECORATION: none
}
.nav {
	PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px
}
.cl {

}
.module {
	MARGIN-TOP: 3px
}
.gtt {
	TEXT-ALIGN: center
}
.capt {
	VERTICAL-ALIGN: middle
}
.err {
	BACKGROUND: #fc9
}
.ptit {
	COLOR: #000; FONT-SIZE: 14px
}
</STYLE>
<BODY> 
<DIV class=wrapper id=top>
<DIV class=logo><A href="http://220.178.98.86/hfgjj/jsp/web/public/search/grlogin.jsp" target="_blank"><IMG alt="合肥市住房公积金中心" 
src="sjimg/logo.jpg"></A></DIV>
<DIV  ID="T1">
<DIV class="tit module"><STRONG>个人公积金查询</STRONG></DIV> 
<DIV class=module>身份证号码<BR>
<INPUT id="hm" maxLength="18" type="text" 
name="hm"> <input id="savehm" name="savehm" type="checkbox"> 记住号码
<BR>密码<BR>
<INPUT id="mm" maxLength="6" type="password" 
name="mm"> <input id="savemm" name="savemm" type="checkbox"> 记住密码
<div id="tip"></div>
<HR>
<INPUT id="bt" class="bts" value="登 录" type="button">
</DIV>
</DIV>
<DIV  ID="T2" style="display:none">
<DIV class="tit module"><STRONG>公积金余额</STRONG></DIV>

截至:<div id="uptime"></div>
您的公积金账户余额为:<div id="yue"></div>
<div id="note" style="display:none">您有多个帐号,本工具只显示您正常缴费的公积金帐号余额。</div>

</DIV>

<DIV class=footer><A href="index.html">返回首页</A>  <BR>Copyright @Wizzer</DIV>

</DIV>

</BODY></HTML>

5、调试部署:

菜单–工具–扩展程序–载入正在开发的扩展程序,右上角会出现16*16的图标,o(∩_∩)o 哈哈

6、将应用发布到google网上应用商城:

首次发布项目之前,您必须支付 US$5.00的一次性开发者注册费。我们收取此费用的目的是对开发者帐户进行验证,并为用户提供更好的保护,以防他们受到欺骗性活动的侵害。 支付注册费后,您就可以发布任意数量的项目,且无需再支付注册费了。

首先你需要有一张VISA信用卡,登陆google电子钱包注册信用卡。

https://www.google.com/checkout/   –注意要加https哦,你懂得

这里要注意的是,自动弹出的第一张信用卡注册界面不是如上的,很可能支付不成功,这个时候进入“支付方式”,选择修改信用卡,出现上面的界面选择New York 输入正确的邮编才能支付成功。

进入开发者中心(扩展程序最下面点击“获取更多扩展程序”,进入网上应用商城)

在开发者中心修改用户偏好设置,勾选“为我在 Chrome 网上应用店中的所有应用启用用户反馈功能。”,否则点击“立即支付注册费”会没反应(实在没辙换成IE试试吧)。

支付成功后耐心等待吧,我正在等待订单审核ing……

7、发布应用:

开发者中心点击添加新项目,把项目文件夹打包为zip压缩包上传即可。其他略,都能看懂。。

8、关于firewall:

以上许多操作,你会发现一会这个网页打不开,那个网页等白天没反应,这个时候你就需要用chrome插件“SwitchySharp”了,具体怎么用百度一下吧,步骤也很多很麻烦,关键是耐心按教程来。

chrome里可以用 SwitchySharp,那么IE里要用怎么办,在IE里手动设置下代理即可,端口号到 SwitchySharp 选项里查看。

可移步:http://www.delver.net/?p=267  看教程~~

9、其他

等订单审核完毕应用发布后,大家就可以在chrome 商城里搜索“合肥公积金查询”,那就是我写的这个应用了,如果你是win7系统的话,可以在:

C:\Users\Wizzer\AppData\Local\Google\Chrome\User Data\Default\Extensions

文件夹下看到源代码。over~~

几点思考,chrome插件是js+html+CSS的网页应用,不能直接执行JSP、ASP、PHP什么的,实现功能都需要调用chrome的接口、你自己应用提供的接口,那么可以不可以使用iframe嵌入自己的应用呢(- -)。

另外就是session传递的问题,从一个页面到另外一页面,信息怎么传递,用cookies感觉不太合适,也不能把所有的逻辑写在一个页面啊,这个需要深入的去研究。

再之就是js不能内联,那么实现一些功能就比较麻烦了,比如动态创建可点击的按钮,现在还没想到什么好办法,相信深入研究是可以解决的,JS要相当的熟才行啊,偶么就一般般。- –