博客园_艾梦尔的回忆录

HTML5学习之Canvas标记试例

2011-06-25T12:27:00Z

html5当道.到处都是关于html5的新闻和报道.感觉自己还不去了解下html5就真的快敢不上时代的步伐了

所以今天星期六.放假休息在家.没事看了下网上的相关博客.还有一些试例.

只不过看归看.不自己动手还是像在喝鸡汤--不经过大脑的.

html5新加了很多标记和相关的功能.

什么Web Sql DataBase,Web Storage,Web Socket等相关功能

还有一些新标记:Canvas,声音,视频等.......

今天我主要也就看了下Canvas标记,所以自己也来写写Demo.

由于才开始学习.所以问题也会有很多.希望大家手下留情.

主要学习还是看了下mozilla发布的一个Canvas:https://developer.mozilla.org/cn/Canvas_tutorial

自己就做了一个小试例.只不过在Canvas标记中还只主要用到一个方法.其它很牛的方法也慢慢学习之中

下面的例子是我用Canvas的drawImage方法做的一个图片切换效果

演示地址1: http://liuju150.cacacoo.com/ImageSwitchUp.htm

演示地址2:http://liuju150.cacacoo.com/ImageSwitch.htm

Web Sql DataBase示例:http://liuju150.cacacoo.com/WebSql.htm

上代码:

<!DOCTYPE html>

<html>
<head>
<title></title>
<script type="text/javascript">
var _LoadImage = []; ///<summary>加载完成的Image对像数组</summary>
var _NextImageIndex = 0; ///<summary>下次要显示的图片在_LoadImage的索引位置</summary>
function LoadImageURL(ImageCount) {
///<summary>初始化的时候要得到所有图片的地址</summary>
///<param name="ImageCount" type="number">图片的个数</param>
var _InitImageURL = [];
for (var i = 0; i < parseInt(ImageCount); i++) {
var _url = "Image/" + (i + 1).toString() + ".jpg";
_InitImageURL.push(_url);
}
LoadImage(_InitImageURL);
}
function LoadImage(ImageURL) {
///<summary>用图片地址初始化Image对像</summary>
///<param name="ImageURL" type="array">图片的地址数组</param>
while (ImageURL.length != 0) {
var img = new Image();
img.src = ImageURL.pop();
img.onload = function () {
_LoadImage.push(this);
PushMsg("Push _LoadImage:" + this.src);
if (_LoadImage.length == 11) {
ImageSwitch.Images = _LoadImage;
ImageSwitch.Canvas = document.getElementById("CanvasSwitch");
ImageSwitch.Show();
}
}
}
}
function PushMsg(message) {
///<summary>日志输出</summary>
///<param name="message" type="string">日志内容</param>
var _span = document.createElement("span");
_span.innerText = message;
var msg = document.getElementById("msg");
msg.appendChild(_span);
var _br = document.createElement("br");
msg.appendChild(_br);
}
window.onload = function () {
LoadImageURL(11);
}

var ImageSwitch = new Object();
ImageSwitch.WidthCount = 11;//在X坐标上分成几等份
ImageSwitch.HeightCount = 8;//在Y坐标上分成几等份
ImageSwitch.Canvas = new Object();//Canvas标记对象
ImageSwitch.Images = [];//要显示的图片对象
ImageSwitch.NextImageIndex = 0;//下个要显示的图片对象在Images中的索引位置
ImageSwitch.SwitchTime = 1000;//图片切换效果用时(1S=10000)
ImageSwitch.ShowTime = 2000; //一个图片坐切换开始到切换另一个图片所用的时间
ImageSwitch.isHeightType = true;//true:以垂直方向显示,false:以水平方向显示
ImageSwitch.Current = new Object();
ImageSwitch.Show = function () {
if (!this.Canvas.getContext) {
return;
}
ImageSwitch.Current.CurWidth = 0;
ImageSwitch.Current.CurHeight = 0;
this.Canvas.getContext("2d").drawImage(this.Images[this.NextImageIndex], 0, 0);
this.NextImageIndex = (this.NextImageIndex + 1) % this.Images.length;
this.DrawImage();
}
ImageSwitch.DrawImage = function () {
var _ctx = this.Canvas.getContext("2d");
var _imageSW = this.Canvas.width / this.WidthCount;
var _imageSH = this.Canvas.height / this.HeightCount;
var _imageSX = _imageSW * this.Current.CurWidth;
var _imageSY = _imageSH * this.Current.CurHeight;
_ctx.drawImage(this.Images[this.NextImageIndex], _imageSX, _imageSY, _imageSW, _imageSH, _imageSX, _imageSY, _imageSW, _imageSH);

if (this.isHeightType) {
this.Current.CurHeight = (this.Current.CurHeight + 1) % this.HeightCount;
if (this.Current.CurHeight == 0) {
this.Current.CurWidth = (this.Current.CurWidth + 1) % this.WidthCount;
}
} else {
this.Current.CurWidth = (this.Current.CurWidth + 1) % this.WidthCount;
if (this.Current.CurWidth == 0) {
this.Current.CurHeight = (this.Current.CurHeight + 1) % this.HeightCount;
}
}

if (this.Current.CurWidth == 0 && this.Current.CurHeight == 0) {
this.NextImageIndex = (this.NextImageIndex + 1) % this.Images.length;
setTimeout(function () { ImageSwitch.DrawImage(); }, this.ShowTime - (this.SwitchTime / (this.WidthCount * this.HeightCount)));
} else {
setTimeout(function () { ImageSwitch.DrawImage(); }, this.SwitchTime / (this.WidthCount * this.HeightCount));
}
}

function ChangeType() {
ImageSwitch.isHeightType = !ImageSwitch.isHeightType;
}
</script>
</head>
<body>
<div>
<canvas id="CanvasSwitch" width="275" height="200"></canvas>
</div>
<div><input type="button" value="切换显示方式(水平/垂直)" onclick="ChangeType()" /></div>
<div id="msg"></div>
</body>
</html>

下面是有关Web Sql DataBase的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title></title>
<style type="text/css">
*{
margin:0;
}
</style>
<script src="JavaScript/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function jData() {};
jData.prototype.Open = function (Name, Version, Description, size, CallBack) {
///<summary>打开/创建数据库上下文对象</summary>
///<param name="Name" type="string">数据库名称</param>
///<param name="Version" type="string">数据库版本,默认1.0</param>
///<param name="Description" type="string">描述</param>
///<param name="size" type="number">数据库大小(最大5M:5*1024*1024)</param>
///<param name="CallBack" type="function">回调</param>
///<returns type="DataBase" >数据库下下文对象</returns>
return window.openDatabase(Name, Version, Description, size, CallBack(this));
}
jData.prototype.executeSql = function (DataBaseContext, SqlString, SqlPramary, SuccessCallBack, ErrorCallBack) {
///<summary>打开/创建数据库上下文对象</summary>
///<param name="DataBaseContext" type="DataBaseContext">数据库上下文对象(Open)</param>
///<param name="SqlString" type="string">Sql语句</param>
///<param name="SqlPramary" type="array">参数(?)</param>
///<param name="SuccessCallBack" type="function">成功回调</param>
///<param name="ErrorCallBack" type="function">错误回调</param>
///<returns type="void">用回调</returns>
DataBaseContext.transaction(function (tran) {
tran.executeSql(SqlString, SqlPramary, function (tran, SuccessResult) {
SuccessCallBack(SuccessResult);
}, function (tran, ErrorResult) {
ErrorCallBack(ErrorResult);
});
}, function (ErrorTran) {
}, function () {
});
}
function OpenDataBaseCallBack(DataBase) {
}

var j = new jData();
var DataBaseContext = j.Open("TestDataBase", "1.0", "test Db", 2 * 1024 * 1024, OpenDataBaseCallBack);
function GetAllTableName() {
document.getElementById("ShowMain").innerHTML = "";
ShowTableData("sqlite_sequence");
var SqlStr = "select * from sqlite_sequence order by seq";
j.executeSql(DataBaseContext, SqlStr, [], function (result) {
for (var i = 0; i < result.rows.length; i++) {
ShowTableData(result.rows.item(i).name);
}
}, function (Error) {
fun_ErrorCallBack(Error);
});
}
function ShowTableData(TableName) {
var SqlStr = "select * from " + TableName;
j.executeSql(DataBaseContext, SqlStr, [], function (result) {
if (result.rows.length > 0) {
var html = "<div style=\"color:blue;\">" + TableName + "</div><table><thead><tr>";
var firstRow = result.rows.item(0);
for (var Column in firstRow) {
html += "<th>" + Column + "</th>";
}
html += "</tr></thead><tbody>";
for (var i = 0; i < result.rows.length; i++) {
var _row = result.rows.item(i);
html += "<tr>";
for (var val in _row) {
html += "<td>" + _row[val] + "</td>";
}
html += "</tr>";
}
html += "</tbody></table>";
$("#ShowMain").append(html);
}
}, function (Error) {
fun_ErrorCallBack(Error);
});
}
function fun_ErrorCallBack(ErrorMsg) {
document.getElementById("SpanErrorMsg").innerHTML = ErrorMsg.message;
}
window.onload = function () {
var SqlStr = "drop table Company;";
j.executeSql(DataBaseContext, SqlStr, [], function (res) { }, function (res) { alert(res.message); });
SqlStr = "create table Company(id integer primary key autoincrement,CompanyName text,CompanyNo text,RecordStatus text default 'Active');";
j.executeSql(DataBaseContext, SqlStr, [], function (res) { }, function (res) { alert(res.message); });
for (var i = 1; i < 10; i++) {
SqlStr = "insert into Company(CompanyName,CompanyNo) values(?,?);";
j.executeSql(DataBaseContext, SqlStr, [i.toString() + "Company", "CNO" + i.toString()], function (res) { }, function (res) { alert(res.message); });
}
GetAllTableName();
}
function btnRunSqlClick() {
document.getElementById("SpanErrorMsg").innerHTML = "";
var SqlStr = document.getElementById("textSQLCommand").value;
if (SqlStr.length == 0) { return; }
j.executeSql(DataBaseContext, SqlStr, [], function (result) {
GetAllTableName();
}, function (Error) {
fun_ErrorCallBack(Error);
});
}
</script>
</head>
<body>
<form id="form1">
<div>
<h1>Web Sql DataBase</h1>
<span>这是html5中的新技术.请用支持html5的浏览器打开</span><br />
<span>Web Sql DataBase支持在本地(不在服务器)的一个数据库,可以用脚本进行读写</span><br />
<span>下面的例子是我在本地创建了一个数据库,创建了Company表.并插入了几条数据</span><br />
<span>你可以在textarea中写相关的SQL来操作这些数据(create,drop,insert,update,delete....)</span><br />
<span>注意:没有数据的表是不会显示出来,你插入一条数据就可以看到这个表</span><br />
</div>
<div>
<textarea id="textSQLCommand" style="width:80%;float:left;" rows="8" cols="80"></textarea>
<input id="btnRunSql" type="button" value="运行" style=" width:15%;height:135px; font-size:xx-large;" onclick="btnRunSqlClick()" />
</div>
<div><span style="color:Red;" id="SpanErrorMsg"></span></div>
<div>
<span>语法堂</span><br />
<span>insert into Company(CompanyName,CompanyNo) values('10Company','CNO10')</span><br />
<span>create table Employee(id integer primary key autoincrement,EmployeeName text,EmployeeNo text,CompanyID integer,EmployeeSex text,EmployeeAge integer,RecordStatus text default 'Acitve')</span><br />
<span>insert into Employee(EmployeeName,EmployeeNo,CompanyID,EmployeeSex,EmployeeAge) values('LiuJu01','EMP01',1,'Boy',23)</span><br />
</div>
<div id="ShowMain"></div>
</form>
</body>
</html>

本文链接

新浪,腾迅,网易微博OAuth统一认证接口实现

2011-05-14T09:11:00Z

看到国内微博兴起.各大门微博都提供了统一的OAuth认证

开始有想法做一个统一访问接口了.到时候就可以利用各大门户的注册用户来为我们服务

从而也使得最终用户不用每个网站都要去注册一个帐号.还有安全性的问题了

从开始一时兴趣.到专心的架构,把博客园有关OAuth认证的文章都看了一下.

从不知.到了解,到熟悉再到自己造轮子.

利用休息时间.自己终于写好了国内四大门户的三大微博接口.

由于搜狐的文档还没有看.用一般的方式去认证老是失败.等有时间再完工

现在只有新浪,腾迅,网易的认证成功了

接下来.先上图.有图有真相.这是我的架构图

项目地址 http://weibooauth.codeplex.com/ (源代码在这里下载)
欢迎有兴趣的人事进行一起研究.有的话就注册一个codeplex帐号.一起进行开发liuju150@gmail.com

OAuth项目写了几个公共接口分别是
IOAuthConfig这个是得到web.config的配置信息接口

namespace OAuth
{
public interface IOAuthConfig
{
/// <summary>
/// 得到AppKey
/// </summary>
/// <returns></returns>
string GetAppKey();

/// <summary>
/// 得到AppSecret
/// </summary>
/// <returns></returns>
string GetAppSecret();

/// <summary>
/// 得到回调URL
/// </summary>
/// <returns></returns>
Uri GetCallBackURI();

/// <summary>
/// 得到请求类型
/// GET,POST,HEADER
/// </summary>
/// <returns></returns>
OAuthEnum.RequestType GetRequestType();

}
}

IOAuthMode这个接口得对OAuth认证的参数接口这里接口比较多

namespace OAuth
{
public interface IOAuthMode
{
/// <summary>
/// 得到回调地址
/// </summary>
/// <returns></returns>
OAuthParameter GetOAuthCallBack();

/// <summary>
/// 得到申请的ConsumerKey
/// </summary>
/// <returns></returns>
OAuthParameter GetOAuthConsumerKey();

/// <summary>
/// 设置随机字符串
/// </summary>
/// <param name="OAuthNoncd"></param>
void SetOAuthNonce(string OAuthNonceString);

/// <summary>
/// 得到随机字符串
/// </summary>
/// <returns></returns>
OAuthParameter GetOAuthNonce();

/// <summary>
/// 得到签名方式
/// </summary>
/// <returns></returns>
OAuthParameter GetOAuthSignatureMethod();

/// <summary>
/// 设置时间戳
/// </summary>
/// <param name="OAuthTimeStamp"></param>
void SetOAuthTimeStamp(string OAuthTimeStampString);

/// <summary>
/// 得到时间戳
/// </summary>
/// <returns></returns>
OAuthParameter GetOAuthTimeStamp();

/// <summary>
/// 得到OAuth版本
/// </summary>
/// <returns></returns>
OAuthParameter GetOAuthVersion();

/// <summary>
/// 设置签名字符串
/// </summary>
void SetOAuthSignature(string OAuthSignatureString);

/// <summary>
/// 得到签名字符串
/// </summary>
/// <returns></returns>
OAuthParameter GetOAuthSignature();

/// <summary>
/// 设置OAuthToken
/// </summary>
void SetOAuthToken(OAuthParameter OAuthToken);

/// <summary>
/// 得到OAuthToken
/// </summary>
/// <returns></returns>
OAuthParameter GetOAuthToken();

/// <summary>
/// 设置OAuthTokenSecret
/// </summary>
void SetOAuthTokenSecret(OAuthParameter OAuthTokenSecret);

/// <summary>
/// 得到OAuthTokenSecret
/// </summary>
/// <returns></returns>
OAuthParameter GetOAuthTokenSecret();

/// <summary>
/// 设置OAuthVerifier
/// </summary>
/// <param name="OAuthVerifier"></param>
void SetOAuthVerifier(OAuthParameter OAuthVerifier);

/// <summary>
/// 得到OAuthVerifier
/// </summary>
/// <returns></returns>
OAuthParameter GetOAuthVerifier();

/// <summary>
/// 得到接口提供商
/// </summary>
/// <returns></returns>
OAuthEnum.OAuthInterface GetOAuthInterface();
}
}

IOAuthRequestURL这个接口是对请求地址的接口

namespace OAuth
{
public interface IOAuthRequestURL
{
/// <summary>
/// 获取未授权的Request Token
/// </summary>
/// <returns></returns>
Uri GetRequestTokenURL();

/// <summary>
/// 请求用户授权Token
/// </summary>
/// <returns></returns>
Uri GetRequestOAuthTokenURL();

/// <summary>
/// 获取授权过的Access Token
/// </summary>
/// <returns></returns>
Uri GetRequestAccessTokenURL();
}
}

然后各个微博都实现这里几个接口(看到图片就知道.每个微博都实现了这三个接口)

然后OAuthBase就是实现OAuth认证.

拿新浪来说的OAuth认证反正都是经过三个步骤

第一次.请求RequestToken

得到OAuthToken和OAuthTokenSecret

第二步.用OAuthToken去认证得到OAuthVerifier

第三步就是得到真正的OAuthToken和OAuthTokenSecret

详细实现(新浪)

第一步

oauth_callback(回调地址,要UrlEncoding)

oauth_consumer_key(在新浪申请到的consumer_key)

oauth_nonce(随机字符串,听说腾迅要小于32位.我用GUID)

oauth_signature_method(签名方式,现在都是HMAC-SHA1)

oauth_timestamp(时间戳,1970-1-1 0:0:0到现在时间的整型值)

oauth_version(OAuth版本,新浪,腾迅为1.0a,网易为1.0)(目前)

生成参数字符串.用上面的参数格式为:参数名1=参数值1&参数名2=参数值2,和URL一样.你懂的

然后string.format("{0}&{1}&{2}",{1:请求方式GET,POST},{2:请求地址UrlEncode(http://api.t.sina.com.cn/oauth/request_token)},{3:UrlEncode(参数字符串)})

这个就是签名的BaseString,然后用你申请得到的AppSecret+"&"为KEY,来进行签名生成签名字符串.然后也要对其UrlEncode

然后生成为签名字符串为oauth_signature的值

然后生成请求URL(GET)

http://api.t.sina.com.cn/oauth/request_token?参数名1=参数值1&参数名2=参数值2

这里和生成参数字符串一样.只是要加上oauth_signature

这里就是请求的URL.然后会得到
oauth_token=ce9cc416a9ad8f37feba547541f81ec9&oauth_token_secret=a6966e6898480428574f04f768da1249

这样第一步RequestToken就完成了

第二步

http://api.t.sina.com.cn/oauth/authorize?oauth_token=ce9cc416a9ad8f37feba547541f81ec9
打开这个地下进行用户认证.这里的oauth_token为第一步得到的oauth_token值

服务器返回oauth_token=ce9cc416a9ad8f37feba547541f81ec9&oauth_verifier=1234567

第三步.

用第一步的参数加上第二步得到的
oauth_token和oauth_verifier

得到新的签名字条串,然后用AppSecret+"&"+oauth_token_secret(第一步得到的)为KEY对

然后再进行签名(注意这里的oauth_nonce,oauth_timestamp要重新生成)

得到新的oauth_signature

然后像第一步一样生成URL进行请求.

得到真正的oauth_token和oauth_token_secret

然后就可以用这个调用相关接口了

protected void imgBtnSina_Click(object sender, ImageClickEventArgs e)
{
SinaOAuthMode OAuthMode = new SinaOAuthMode();
OAuthBase Base = new OAuthBase(new SinaOAuthRequestURL(), new SinaOAuthConfig(), OAuthMode);
OAuthMode = (SinaOAuthMode)Base.RequestToken();
string res = string.Format("{0}:{1}&{2}:{3}", OAuthMode.GetOAuthToken().ParameterName, OAuthMode.GetOAuthToken().ParameterValue, OAuthMode.GetOAuthTokenSecret().ParameterName, OAuthMode.GetOAuthTokenSecret().ParameterValue);
labMsg.Text = res;
string RequestOAuthTokenURL = Base.GetAccessTokenURL().ToString();
Session["OAuthMode"] = OAuthMode;
Page.ClientScript.RegisterStartupScript(GetType(), "W_CallBack", "<script language=\"javascript\" type=\"text/javascript\">imgBtnClick('" + RequestOAuthTokenURL + "')</script>");
}

点击按钮

private void SinaCallBack()
{
SinaOAuthMode Mode = (SinaOAuthMode)Session["OAuthMode"];
Mode.SetOAuthToken(new OAuthParameter("oauth_token", Request.QueryString["oauth_token"]));
Mode.SetOAuthVerifier(new OAuthParameter("oauth_verifier", Request.QueryString["oauth_verifier"]));
OAuthBase Base = new OAuthBase(new SinaOAuthRequestURL(), new SinaOAuthConfig(), Mode);
Mode = (SinaOAuthMode)Base.RequestAccessToken();
Session["OAuthMode"] = Mode;
}

回调页面

<?xml version="1.0"?>
<configuration>
<configSections>
<sectionGroup name="SinaSectionGroup">
<section name="SinaSection" type="System.Configuration.NameValueSectionHandler,System"/>
</sectionGroup>
<sectionGroup name="QQSectionGroup">
<section name="QQSection" type="System.Configuration.NameValueSectionHandler,System"/>
</sectionGroup>
<sectionGroup name="WangYiSectionGroup">
<section name="WangYiSection" type="System.Configuration.NameValueSectionHandler,System"/>
</sectionGroup>
<sectionGroup name="SohuSectionGroup">
<section name="SohuSection" type="System.Configuration.NameValueSectionHandler,System"/>
</sectionGroup>
</configSections>
<SinaSectionGroup>
<SinaSection>
<add key="AppKey" value="*************"/>
<add key="AppSecret" value="**************************"/>
<add key="CallBackURI" value="http://localhost/OAuthWeb/OAuthCallBack.aspx?Type=Sina"/>
<add key="RequestType" value="GET"/>
</SinaSection>
</SinaSectionGroup>
<QQSectionGroup>
<QQSection>
<add key="AppKey" value="*************"/>
<add key="AppSecret" value="**************************"/>
<add key="CallBackURI" value="http://localhost/OAuthWeb/OAuthCallBack.aspx?Type=QQ"/>
<add key="RequestType" value="GET"/>
</QQSection>
</QQSectionGroup>
<WangYiSectionGroup>
<WangYiSection>
<add key="AppKey" value="*************"/>
<add key="AppSecret" value="**************************"/>
<add key="CallBackURI" value="http://localhost/OAuthWeb/OAuthCallBack.aspx?Type=WangYi"/>
<add key="RequestType" value="GET"/>
</WangYiSection>
</WangYiSectionGroup>
<SohuSectionGroup>
<SohuSection>
<add key="AppKey" value="*************"/>
<add key="AppSecret" value="**************************"/>
<add key="CallBackURI" value="http://localhost/OAuthWeb/OAuthCallBack.aspx?Type=Sohu"/>
<add key="RequestType" value="GET"/>
</SohuSection>
</SohuSectionGroup>
<system.web>
<compilation debug="true" targetFramework="4.0"/>
</system.web>
</configuration>

web.config

本文链接

开发谷歌浏览器插件(原创)

2010-09-28T10:05:00Z

今天早上打开博客园.看到一文章"开发chrome扩展程序"
自己看看,也还很简单,就自己动手写一个翻译插件

来看看效果

以前用谷歌的翻译接口做了一个翻译功能的网页http://liuju150.cacacoo.com

所以我就打算把这个功能做成一个谷歌浏览器的插件
这个翻译功能就一个页而.代码也很简单

<!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>翻译</title>
<style type="text/css">
#MainTable
{
width:100%;
text-align:center;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?v=1&key=ABQIAAAACqGEg_EWjzyatp5DcvOejRR4W90b60fHZvOCS2noQmQiRb84KxQixoel7iEIiOVRigOQjXi2AyU3yQ"></script>
<script language="javascript" type="text/javascript">
google.load("language", "1");
function BeginTranslate(isTxtTranslateSourceKeyUp) {
var _txtTranslateSource = document.getElementById("txtTranslateSource");
var _txtTranslateReturn = document.getElementById("txtTranslateReturn");

//为空不翻译
if (isTxtTranslateSourceKeyUp == true && _txtTranslateSource.value == "") {
_txtTranslateReturn.value = "";
return;
} else if (isTxtTranslateSourceKeyUp == false && _txtTranslateReturn.value == "") {
_txtTranslateSource.value = "";
return;
}
var OldLanguage = document.getElementById("SelectLanguageOld").value;
var NewLanguage = document.getElementById("SelectLanguageNew").value;
if (isTxtTranslateSourceKeyUp == false) {
var _Temp = OldLanguage;
OldLanguage = NewLanguage;
NewLanguage = _Temp;
}

var _text = "";
if (isTxtTranslateSourceKeyUp == true) {
_text = _txtTranslateSource.value;
} else {
_text = _txtTranslateReturn.value;
}

//检测是哪种语言
if (OldLanguage == "auto") {
google.language.detect(_text, function (res) {
if (!res.error) {
OldLanguage = res.language;
if (isTxtTranslateSourceKeyUp == true) {
document.getElementById("SelectLanguageOld").value = res.language;
} else {
document.getElementById("SelectLanguageNew").value = res.language;
}
}
});
}

//要翻译成什么语言
//此语言要明确,如果是自动检测的话,就自动换在中文
if (NewLanguage == "auto") {
NewLanguage = "zh-CN";
if (isTxtTranslateSourceKeyUp == true) {
document.getElementById("SelectLanguageOld").value = NewLanguage;
} else {
document.getElementById("SelectLanguageNew").value = NewLanguage;
}
}

//相同判断
if (OldLanguage == NewLanguage) {
if (isTxtTranslateSourceKeyUp == true) {
_txtTranslateReturn.value = "请选择要翻译为什么语言";
} else {
_txtTranslateSource.value = "请选择要翻译为什么语言";
}
return;
}

//是否支持此种语言的翻译
if (google.language.isTranslatable(NewLanguage) == false) {
if (isTxtTranslateSourceKeyUp == true) {
_txtTranslateReturn.value = "不支持此种语言的翻译";
} else {
_txtTranslateSource.value = "不支持此种语言的翻译";
}
return;
}

//开始翻译
google.language.translate({ "text": _text, "type": google.language.ContentType["TEXT"] }, OldLanguage, NewLanguage, function (result) {
if (!result.error) {
var ReturnStr = result.translation;
if (isTxtTranslateSourceKeyUp == true) {
_txtTranslateReturn.value = ReturnStr;
} else {
_txtTranslateSource.value = ReturnStr;
}
}
});
}
google.setOnLoadCallback(function () { });
</script>
</head>
<body>
<div>
<table id="MainTable">
<tbody>
<tr>
<td align="right">
<select id="SelectLanguageOld" onchange="BeginTranslate(false)">
<option value="auto">检测语言</option>
<option value="sq">阿尔巴尼亚语</option>
<option value="ar">阿拉伯语</option>
<option value="az">阿塞拜疆语</option>
<option value="ga">爱尔兰语</option>
<option value="et">爱沙尼亚语</option>
<option value="be">白俄罗斯语</option>
<option value="bg">保加利亚语</option>
<option value="is">冰岛语</option>
<option value="pl">波兰语</option>
<option value="fa">波斯语</option>
<option value="af">布尔文(南非荷兰语)</option>
<option value="da">丹麦语</option>
<option value="de">德语</option>
<option value="ru">俄语</option>
<option value="fr">法语</option>
<option value="tl">菲律宾语</option>
<option value="fi">芬兰语</option>
<option value="ka">格鲁吉亚语</option>
<option value="ht">海地克里奥尔语</option>
<option value="ko">韩语</option>
<option value="nl">荷兰语</option>
<option value="gl">加利西亚语</option>
<option value="ca">加泰罗尼亚语</option>
<option value="cs">捷克语</option>
<option value="hr">克罗地亚语</option>
<option value="lv">拉脱维亚语</option>
<option value="lt">立陶宛语</option>
<option value="ro">罗马尼亚语</option>
<option value="mt">马耳他语</option>
<option value="ms">马来语</option>
<option value="mk">马其顿语</option>
<option value="no">挪威语</option>
<option value="pt">葡萄牙语</option>
<option value="ja">日语</option>
<option value="sv">瑞典语</option>
<option value="sr">塞尔维亚语</option>
<option value="sk">斯洛伐克语</option>
<option value="sl">斯洛文尼亚语</option>
<option value="sw">斯瓦希里语</option>
<option value="th">泰语</option>
<option value="tr">土耳其语</option>
<option value="cy">威尔士语</option>
<option value="uk">乌克兰语</option>
<option value="eu">西班牙的巴斯克语</option>
<option value="es">西班牙语</option>
<option value="iw">希伯来语</option>
<option value="el">希腊语</option>
<option value="hu">匈牙利语</option>
<option value="hy">亚美尼亚语</option>
<option value="it">意大利语</option>
<option value="yi">意第绪语</option>
<option value="hi">印地语</option>
<option value="ur">印度乌尔都语</option>
<option value="id">印尼语</option>
<option value="en">英语</option>
<option value="vi">越南语</option>
<option value="zh-CN" selected="selected">中文</option>
</select>
</td>
<td></td>
<td align="left">
<select id="SelectLanguageNew" onchange="BeginTranslate(true)">
<option value="auto">检测语言</option>
<option value="sq">阿尔巴尼亚语</option>
<option value="ar">阿拉伯语</option>
<option value="az">阿塞拜疆语</option>
<option value="ga">爱尔兰语</option>
<option value="et">爱沙尼亚语</option>
<option value="be">白俄罗斯语</option>
<option value="bg">保加利亚语</option>
<option value="is">冰岛语</option>
<option value="pl">波兰语</option>
<option value="fa">波斯语</option>
<option value="af">布尔文(南非荷兰语)</option>
<option value="da">丹麦语</option>
<option value="de">德语</option>
<option value="ru">俄语</option>
<option value="fr">法语</option>
<option value="tl">菲律宾语</option>
<option value="fi">芬兰语</option>
<option value="ka">格鲁吉亚语</option>
<option value="ht">海地克里奥尔语</option>
<option value="ko">韩语</option>
<option value="nl">荷兰语</option>
<option value="gl">加利西亚语</option>
<option value="ca">加泰罗尼亚语</option>
<option value="cs">捷克语</option>
<option value="hr">克罗地亚语</option>
<option value="lv">拉脱维亚语</option>
<option value="lt">立陶宛语</option>
<option value="ro">罗马尼亚语</option>
<option value="mt">马耳他语</option>
<option value="ms">马来语</option>
<option value="mk">马其顿语</option>
<option value="no">挪威语</option>
<option value="pt">葡萄牙语</option>
<option value="ja">日语</option>
<option value="sv">瑞典语</option>
<option value="sr">塞尔维亚语</option>
<option value="sk">斯洛伐克语</option>
<option value="sl">斯洛文尼亚语</option>
<option value="sw">斯瓦希里语</option>
<option value="th">泰语</option>
<option value="tr">土耳其语</option>
<option value="cy">威尔士语</option>
<option value="uk">乌克兰语</option>
<option value="eu">西班牙的巴斯克语</option>
<option value="es">西班牙语</option>
<option value="iw">希伯来语</option>
<option value="el">希腊语</option>
<option value="hu">匈牙利语</option>
<option value="hy">亚美尼亚语</option>
<option value="it">意大利语</option>
<option value="yi">意第绪语</option>
<option value="hi">印地语</option>
<option value="ur">印度乌尔都语</option>
<option value="id">印尼语</option>
<option value="en" selected="selected">英语</option>
<option value="vi">越南语</option>
<option value="zh-TW">中文(繁体)</option>
<option value="zh-CN">中文(简体)</option>
</select>
</td>
</tr>
<tr>
<td align="right"><textarea id="txtTranslateSource" rows="8" cols="30"></textarea></td>
<td>
<button title="从左到右翻译" onclick="BeginTranslate(true)">>></button>
<br />
<br />
<button title="从右到左翻译" onclick="BeginTranslate(false)"><<</button>
</td>
<td align="left"><textarea id="txtTranslateReturn" rows="8" cols="30"></textarea></td>
</tr>
</tbody>
</table>
</div>
<script language="javascript" type="text/javascript">
var timer;
document.getElementById("txtTranslateSource").onkeyup = function () {
if (timer != null) {
clearTimeout(timer);
}
timer = setTimeout("BeginTranslate(true)", 1000);
};
document.getElementById("txtTranslateReturn").onkeyup = function () {
if (timer != null) {
clearTimeout(timer);
}
timer = setTimeout("BeginTranslate(false)", 1000);
};
</script>
</body>
</html>

然后看看谷歌的插件文档
在C盘下创建了一个文件夹C:\GoogleDemo

然后把那个网页放到文件夹里面index.html

然后在这个文件夹里面自己创建一个manifest.json文件

文件内容

{
"name": "Translation(翻译)",
"version": "1.1",
"description": "This is a translation plug-in, you can translate between many languages(这是一个翻译插件,可以在很多种语言之间相互翻译)",
"icons":{"16":"16.png","48":"48.png","128":"128.png"},
"browser_action": {
"default_icon": "16.png",
"popup": "index.html"
},
"permissions": ["http://*/","bookmarks","tabs","history"]
}

自己做了几个PNG图标,主要是做插件在浏览器上的图标用,就是浏览器右上角看到我插件的那个图标
然后打开谷歌浏览器输入地址:chrome://extensions/

开始没有看到我这个插件的,这是我安装上去的效果,
开始的话,选择第一个按钮,就会要你选择你插件所在的文件夹,这里我们选择C:\GoogleDemo
他就会自己载入我们的插件,

然后再选择第二个按钮

第一次可以不选择第二个文件,因为第一次他会自己生成一个GoogleDemo.pem这样的文件

以后你更新了的话.就要选择了,他就知道是在这个插件上的更新,而不是一个新的插件
完成后.就可以在你的谷歌浏览器里看到这个翻译插件了
DEMO下载

本文链接

简单聊天室(Ajax)(jQuery1.4+ashx)

2010-01-22T11:25:00Z

唉.一个星期上班的最后一天.项目也快完成了.就是在那里改一下BUG只是公司里电脑不能上网,看着好久没有策QQ了所以今天就想做一个简单一点的聊天室,只要能进去群策就OK了首先上图(项目的架构)用的工厂模式做的再加上最新的jQuery1.4只不过公司里都是用的VS2005.所以环境就只能用VS2005+Sql2005下面是JavaScript代码,主要功能就是去请求数据和绑定数据了代码Code hig...

跨数据库连接类(System.Data.Common)

2009-10-08T04:36:00Z

a.net为为们们提供了各个数据库的链接.比如说MSSQL就是System.Data.SqlClientOracle就是System.Data.OracleClientMySql就是MySql.Data.MySqlClient其它的相应就是的了.还有什么DB2.还有等等一些.以前我们做跨数据库的时候用的是反射.只不过看到网上好多评论说反射效率不怎么好所以近来在研究System.Data.Commo...

asp.net中对amCharts(.net版)图形报表的使用

2009-09-15T09:14:00Z

先来看看几个实现的1.饼图 2.柱型图 3.线型图第一步当然是要添加dll引用然后再把相关文件放到目录里就像在项目里添加FCK编辑器一样这样的话.开始的环境就好了我的目录结构是这样的当然只是为了测试,就没有那样去什么什么了当然,在每个页的开始要注册一下这个dll<%@ Register Assembly="am.Charts" Namespace="am.Charts" TagPrefi...

对ashx请求用Gzip,Deflated压缩

2009-09-14T09:13:00Z

//GZIP压缩[代码]这样每次context.Response.Write出支的数据就压缩了对效多的文本信息压缩可以压缩到原来三分之一到四分之一的样子如果发送的信息只有几个字节就没有必要了下面来看两次压缩的对比上面这个是压缩前的下面这个是压缩后的来比较一下.压缩前第一个请求:3021字节,用时0.033第二个请求: 431字节,用时0.010第三个请求: 516字节,用时0.008压缩后第一...

JavaScript控制浏览器返回(新方案)

2009-09-12T23:22:00Z

假如我们有一个这样的操作流程1.我们有两个页面,一个显示页show.html,一个增加信息页add.html2.在show.html中点击增加信息的时候.就跳到add.html页3.在add.html中有一个返回按钮,当然有一个提交按钮4.每点击一次提交的时候,页面就刷新一次问题:当点击了N次提交后.我点击返回,我要怎么样返回到show.html,当然不能在服务器用Response.Redirec...

反射实现所有实体的增删改操作(jQuery+json)

2009-09-11T13:21:00Z

续前面的无刷新分页控件,编辑,修改控件的实现,(这里是地址:http://www.cnblogs.com/liuju150/archive/2009/09/11/1564994.html)那么,有三四十张表的话,前台表单是自动生成的.只不过生成的实体和数据库里的表名都是有规律可以找的.还有操作实体的类,所以我只要通过前台把表单传过来.我就可以知道要反射到哪个实体,然后对实体进行相应的赋值.再反射一...

无刷新分页控件(原创)(jQuery+json+ashx)(Ajax)

2009-09-11T12:30:00Z

近来在做一个项目,有很多基本的信息表.但这些信息都只有一些增删改查的相关操作大多数表没有业务流的相关操作.要是每个表的增删改查相关功能都一个个去做一个管理页不单麻烦,也不算是一个程序员有的思想(不知道偷懒人程序员不算一个好的程序员)三四十来张表.每张表做两个管理页.就是七八十人页面.那我不想死.所以.就打算做一个通用的增删改查控件标题只是说一个分页显示控件,那还只是一个小点.主要是看到现在园子里对...