开心网(http://www.kaixin001.com)的一些JS代码分享

开题介绍:

北京开心人信息技术有限公司（kaixin001.com）是中国领先的社区平台服务提供商，互联网技术创新企业，致力于为互联网用户的联系交流以及各种实用需求提供最佳的解决方案，团队的使命是打造中国最大的社交网络服务平台。

正题

1.对于首页动态提示的分析

通过时间间隔每5000ms进入事件选择判断.通过比较奇偶性,来显示标题的内容,是保留原标题的基础上加入提示显示.

function blinkNewMsg()
{
var now = new Date();
var nowtime = now.getTime();
if(nowtime - g_inputtime > 5000)
{
document.title = g_blinkswitch % 2 ? "【　　　】 - " + g_blinktitle : "【新消息】 - " + g_blinktitle;
}

g_blinkswitch++;
}

2.可以判断是否用户上线,该功能可与QQ用户上线提示达到一样效果

function blinkOnline()
{
document.title = g_blinkswitch % 2 ? "○" + g_onlineuser + " 上线了 - " + g_blinktitle : "●" + g_onlineuser + " 上线了 - " + g_blinktitle;

g_blinkswitch++;

if (g_blinkswitch > 10)
{
stopBlinkNewMsg();
}
}

提示声音flash:http://img.kaixin001.com.cn/i2/sysmsg_sound.1.0.swf

3.粘贴事件不同浏览器的支持方式

function copyToClipboard(txt)
{
if (window.clipboardData)
{
window.clipboardData.clearData();
window.clipboardData.setData("Text", txt);
}
else if (navigator.userAgent.indexOf("Opera") != -1)
{
window.location = txt;
}
else if (window.netscape)
{
try
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}
catch (e)
{
alert("您的firefox安全限制限制您进行剪贴板操作，请打开'about:config'将signed.applets.codebase_principal_support'设置为true'之后重试");
return false;
}
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip)
return false;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans)
return false;
trans.addDataFlavor('text/unicode');
var str = new Object();
var len = new Object();
var str = Components.classes['@mozilla.org/supports-string;1'].createInstance(Components.interfaces.nsISupportsString);
var copytext = txt;
str.data = copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip)
return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
return true;
}

4.相片中圈出相应的人物

function tagaddsubmit()
{
if ($("tipinput").value.length == 0)
{
alert("请输入人物的姓名");
$("tipinput").focus();
return;
}
var x1 = parseInt($("x1").value);
var x2 = parseInt($("x2").value);
var y1 = parseInt($("y1").value);
var y2 = parseInt($("y2").value);

var x = parseInt( (10000*(x2+x1)/2) / $("photo1").width);
var y = parseInt( (10000*(y2+y1)/2) / $("photo1").height);
var width = parseInt( 10000*(x2 - x1) / $("photo1").width);
var height = parseInt( 10000*(y2 - y1) / $("photo1").height);
var mark_uid = f_seluid;
var title = encodeURIComponent($("tipinput").value);

var url = "/photo/markadd.php";
var pars = "x="+x+"&y="+y+"&width="+width+"&height="+height+"&photouid="+photo_puid+"&pid="+photo_pid+"&mark_uid="+mark_uid+"&title="+title;
var myAjax = new Ajax.Request(url, {method: "post", parameters: pars, onComplete: function (req) { tagaddajaxshow(req); } });
}

5.相关表情定义

var facetitle = ["大笑","微笑","亲亲","抱抱","色色","好失望哟","好困哦","害羞","酷呆了","晕倒","眨眼","鬼脸","小声点",
"吃惊","翻白眼","干杯","困惑","啥？","睡觉","再见了","眼泪哗哗地","你好讨厌","我吐","怒骂","闭嘴","打你",
"真的生气了","超级棒","不咋地","魅力四射","心都碎了","爱","吻","玫瑰凋谢了","玫瑰盛开了","生日蛋糕","礼物","苹果","西瓜",
"咖啡","足球","握手","星星","精灵","小丑","大怒","生病了","小可爱","小心非典","嘴馋了","警察","抓狂了",
"不爽","汗","思考中","见钱眼开","呲牙","晕头转向","好好爱你哦","猪头","便便","月亮","音乐","饭","真衰",
"偷笑","下雨","猫猫","狗狗","骷髅","书呆子","太阳","邮件","帅帅男孩","妩媚女孩","药丸","鄙视","烧香",
"呲牙咧嘴", "拜拜", "奋斗", "嗯", "胜利", "作揖", "OK", "地雷", "菜刀", "鼓掌", "哼哼", "可怜", "委屈", "糗大了", "阴险"];

webEditor.prototype.createToolBar = function()
{
var str ='<table ellpadding="0"cellspacing="0"><tr>';
//字体
str +=(e_font?'<td width="42"><div id="'+this.id+'_fontname_icon" onclick="javascript:'+this.id+'.fontPanel();" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'font/',/'/',/'/js/webeditor/i/e1_2.gif/',0)"><img src="/js/webeditor/i/e1_2.gif" name="font" border="0" title="字体" alt="字体"></div></td>':'');
//字体大小
str +=(e_fontsize?'<td width="42"><div id="'+this.id+'_fontsize_icon" onclick="javascript:'+this.id+'.fontsizePanel();" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'fontsize/',/'/',/'/js/webeditor/i/e2_1.gif/',0)"><img src="/js/webeditor/i/e2_1.gif" name="fontsize" border="0" title="字体大小" alt="字体大小"></div></td>':'');
//字体颜色
str +=(e_color?'<td width="29"><div id="'+this.id+'_forecolor_icon" onclick="javascript:'+this.id+'.colorPanel();" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'color/',/'/',/'/js/webeditor/i/e3_2.gif/',0)"><img src="/js/webeditor/i/e3_2.gif" name="color" border="0" title="字体颜色" alt="字体颜色"></div></td>':'');
//背景颜色
str +=(e_backcolor?'<td width="29"><div id="'+this.id+'_backcolor_icon" onclick="javascript:'+this.id+'.backcolorPanel();" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'backcolor/',/'/',/'/js/webeditor/i/e4_2.gif/',0)"><img src="/js/webeditor/i/e4_2.gif" name="backcolor" border="0" title="背景颜色" alt="背景颜色"></div></td>':'');
//加粗
str +=(e_bold?'<td width="18"><div onclick="javascript:'+this.id+'.setStyle(/'bold/');" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'bold/',/'/',/'/js/webeditor/i/e5_1.gif/',0)"><img src="/js/webeditor/i/e5_1.gif" name="bold" border="0" title="加粗" alt="加粗"></div></td>':'');
//斜体
str +=(e_italic?'<td width="18"><div onclick="javascript:'+this.id+'.setStyle(/'italic/');" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'italic/',/'/',/'/js/webeditor/i/e6_1.gif/',0)"><img src="/js/webeditor/i/e6_1.gif" name="italic" border="0" title="斜体" alt="斜体"></div></td>':'');
//下划线
str +=(e_underline?'<td width="18"><div onclick="javascript:'+this.id+'.setStyle(/'underline/');" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'underline/',/'/',/'/js/webeditor/i/e7_1.gif/',0)"><img src="/js/webeditor/i/e7_1.gif" name="underline" border="0" title="下划线" alt="下划线"></div></td>':'');
//左对齐
str +=(e_JustifyLeft?'<td width="18"><div onclick="javascript:'+this.id+'.setStyle(/'JustifyLeft/');" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'JustifyLeft/',/'/',/'/js/webeditor/i/ee1_1.gif/',0)"><img src="/js/webeditor/i/ee1_1.gif" name="JustifyLeft" border="0" title="左对齐" alt="左对齐"></div></td>':'');
//居中
str +=(e_JustifyCenter?'<td width="18"><div onclick="javascript:'+this.id+'.setStyle(/'JustifyCenter/');" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'JustifyCenter/',/'/',/'/js/webeditor/i/ee2_1.gif/',0)"><img src="/js/webeditor/i/ee2_1.gif" name="JustifyCenter" border="0" title="居中" alt="居中"></div></td>':'');
//右对齐
str +=(e_JustifyRight?'<td width="18"><div onclick="javascript:'+this.id+'.setStyle(/'JustifyRight/');" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'JustifyRight/',/'/',/'/js/webeditor/i/ee3_1.gif/',0)"><img src="/js/webeditor/i/ee3_1.gif" name="JustifyRight" border="0" title="右对齐" alt="右对齐"></div></td>':'');
//无序列表
str +=(e_InsertUnorderedList?'<td width="18"><div onclick="javascript:'+this.id+'.setStyle(/'InsertUnorderedList/');" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'InsertUnorderedList/',/'/',/'/js/webeditor/i/ee4_1.gif/',0)"><img src="/js/webeditor/i/ee4_1.gif" name="InsertUnorderedList" border="0" title="无序列表" alt="无序列表"></div></td>':'');
//有序列表
str +=(e_InsertOrderedList?'<td width="18"><div onclick="javascript:'+this.id+'.setStyle(/'InsertOrderedList/');" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'InsertOrderedList/',/'/',/'/js/webeditor/i/ee5_1.gif/',0)"><img src="/js/webeditor/i/ee5_1.gif" name="InsertOrderedList" border="0" title="有序列表" alt="有序列表"></div></td>':'');
//效果字
//str +=(e_effect?'<td width="18"><div onclick="javascript:'+this.id+'.textEdit(/'effect/');" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'underline/',/'/',/'/js/webeditor/i/e8_1.gif/',0)"><img src="/js/webeditor/i/e8_1.gif" name="effect" border="0"></div></td>':'');
//分隔
//str +='<td width="6" align="center"> </td>';
//添加图片
str +=(e_img?'<td width="18"><div id="'+this.id+'_image_icon" onclick="javascript:'+this.id+'.imagePanel();" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'image/',/'/',/'/js/webeditor/i/e9_1.gif/',0)"><img src="/js/webeditor/i/e9_1.gif" name="image" border="0" title="添加图片" alt="添加图片"></div></td>':'');
//添加视频
str +=(e_media?'<td width="18"><div id="'+this.id+'_media_icon" onclick="javascript:'+this.id+'.mediaPanel(/''+this.id+'_btn_media/');" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'media/',/'/',/'/js/webeditor/i/ea_1.gif/',0)"><img src="/js/webeditor/i/ea_1.gif" name="media" border="0" title="添加视频" alt="添加视频"></div></td>':'');
//添加链接
str +=(e_link?'<td width="18"><div id="'+this.id+'_link_icon" onclick="javascript:'+this.id+'.linkPanel();" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'link/',/'/',/'/js/webeditor/i/eb_1.gif/',0)"><img src="/js/webeditor/i/eb_1.gif" name="link" border="0" title="添加链接" alt="添加链接"></div></td>':'');
//表情
str +=(e_face?'<td width="29"><div id="'+this.id+'_face_icon" onclick="javascript:'+this.id+'.facePanel();" onMouseOut="e_swapImgRestore()" onMouseOver="e_swapImage(/'face/',/'/',/'/js/webeditor/i/ec_1.gif/',0)"><img src="/js/webeditor/i/ec_1.gif" name="face" border="0" title="表情" alt="表情"></div></td>':'');
str +='</tr></table>';
this.toolbar.innerHTML = str;
}
6.Cookie处理

function getCookie(name)
{
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while(i < clen)
{
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
{
return getCookieVal(j);
}
i = document.cookie.indexOf(" ", i) + 1;
if(i == 0) break;
}
return "";
}

function setCookie(name, value, expires, path, domain, secure)
{
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}

function deleteCookie(name,path,domain)
{
if(getCookie(name))
{
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

其他相关技术:

1.Scriptaculous((http://script.aculo.us, http://mir.aculo.us))

2.SWFObject v1.4.2: Flash Player detection and embed - http://blog.deconcept.com/swfobject/

3.SWFUpload: http://www.swfupload.org, http://swfupload.googlecode.com
4. Image Cropper (v. 1.2.0 - 2006-10-30 )http://www.defusion.org.uk

http://www.opensource.org/licenses/bsd-license.php