HTML (index.html)：
<!--[if !IE]><!-->
<style>
/*播放按鈕圖示*/
button.btn {
margin-bottom: -4px;
margin-right: 3px;
background-color: white;
width: 20px !important;
padding: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
span.play {
border-color: transparent transparent transparent black;
border-style: solid;
border-width: 4px 0 4px 8px;
float: left;
height: 0px;
width: 0px;
text-indent: -999px;
}
</style>
<!--<![endif]-->
<h2>ChatBoxy v2.3</h2>
<span id="nameboxy" style="font-weight: bold;" onClick="chatboxy.name.change()">Ghost</span>
<input type="text" id="c_msg" style="padding-left:16px; width:400px;" onkeypress="chatboxy.submit.enter(event)" />
<button id="sendboxy" onClick="chatboxy.submit.send()">Send</button>
Color： <span id="colorboxy"></span>
FPS： <input type="text" id="fpsboxy" style="width:40px" value="1000" onclick="select()" onchange="chatboxy.cookie();" />(ms)
<hr style="border: thin dotted lightgrey;" />
<div id="chatboxy"></div>
<script type="text/javascript">
var chatboxy = new function() {
var nameboxy = null; //暱稱暫存器
var colorboxy = null; //暱稱顏色暫存器
var fpsboxy = null; //刷新速度暫存器
var lastmsg = null; //尾筆資料暫存器
var lastimer = null; //刷新計時器
//最近一筆Json資料連結
var lastJUrl = "YourLink1";
//最近20筆Json資料連結
var nowJUrl = "YourLink2";
//訊息發送連結
//https://docs.google.com/spreadsheet/viewform?formkey=YourKey
var postUrl = "https://docs.google.com/spreadsheet/formResponse?formkey=YourKey&ifq";
//訊息發送等待圖片
var imgwait = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTVA-utxy-xqQ3jVRVnd1kBgpibrm3GMwNIlJiN3oMX8exC1RRyio6MAO-eS98i4qsh9keJVH1yzLM7X-uN0a4uJqtJgMYtSVABZqul62N5paZtLk6W6PliF_u2W7PATLU4wDiRXbqaAOQ/";
//訊息完成待命圖片
var imgdone = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjdGBbw46KLNdYV9OC4PCkiJ3k2T8uNeoC50NjNo0qZ_GH2yEMYdaGtjBMJkW6CxR3_6HwotrumjT47QoZFB-KU96qpZCXN08mTZKHl4t0HBi1bTQOcSdhbceApFRpG91JTV2k27pb_4hV/";
//影像Error圖片
var imgerror = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi01-qF-M5pyNPJHFlhuUkO6ZnqL_W92ClTH7kMQ5NNw-7NyzTOpZYZjyyxYtrtWrJrvDmuWqxykkzl4DqlzSU8usktT-GsdX7XKVbE1w8LT0iOu1-vNM6wtL2xl-5Ry_z4zFwx4YN4FMkU/s64/blocked_login.png";
//定義正規表示
var picture = /^((((ht|f)tps?:\/\/)|(www.))[-a-zA-Z0-9@:%_\+.~#?&//=]+)\.(jpg|jpeg|gif|png|bmp)/i
var youtube = /^http:\/\/w{0,3}\.youtube[^' '\n\r]+/
var hyperlink = /^(((ht|f)tps?:\/\/)|(www.))[a-zA-Z0-9_\-.:#/~}?]+/i
//定義函式類別
return {
getJsonp : function(url, func) { //Jsonp呼叫函式
var cp = url.indexOf("callback=?"); //尋找CallBack字串位置
var today = new Date(); //建立日期物件
var rnd = today.getFullYear() + '' +
today.getMonth() + '' +
today.getDate() + '' +
today.getDay() + '' +
today.getHours() + '' +
today.getMinutes() + '' +
today.getSeconds() + '' +
Math.round(Math.random()*99); //定義隨機數值
var rm = document.getElementById('scriptBoxy');
if(rm) rm.parentNode.removeChild(rm); //刪除舊腳本
var script = document.createElement('script'); //建立新腳本
script.type = 'text/javascript';
script.id = 'scriptBoxy';
//加入rnd以避免瀏覽器取到舊資訊
script.src = url.substring(0, cp)+"callback="+func+url.substring(cp+10, url.length)+"&rnd="+rnd;
document.getElementsByTagName('head')[0].appendChild(script); //產生腳本
},
lastscan : function(json) { //尾筆資料掃描器
try { //合併標題(暱稱)與內容(日期+時間+訊息)
var msg = json.feed.entry[0].title.$t+''+json.feed.entry[0].content.$t;
} catch(e) {
var msg = "";
}
if(json && lastmsg != msg) {
lastmsg = msg; //刷新尾筆資料
this.getJsonp(nowJUrl, 'chatboxy.refresh'); //呼叫Jsonp函式(刷新資料)
} else {
this.getJsonp(lastJUrl,'chatboxy.delay'); //呼叫Jsonp函式(掃描尾筆資料)
}
},
delay : function(json) { //延遲查詢函式
if(lastimer) { //清除記憶
window.clearInterval(lastimer); //清除計時器
lastimer = null; //清除計時器內容
}
lastimer = window.setTimeout(function() { //啟動計時器
chatboxy.lastscan(json);
}, fpsboxy);
},
refresh : function(json) { //留言刷新器
var title = ""; //暱稱
var content = ""; //內容(日期+時間+訊息)
var name = ""; //暱稱
var color = ""; //暱稱顏色
var date = ""; //日期
var time = ""; //時間
var chat = ""; //訊息
var output = ""; //輸出暫存器
for (var i = 0; i < json.feed.entry.length; ++i) {
title = json.feed.entry[i].title.$t; //取得標題(暱稱)
content = json.feed.entry[i].content.$t; //取得內容(日期+時間+訊息)
date = content.substring(3, content.indexOf(" ",3)); //取得日期
time = content.substring(content.indexOf(" ",3), content.indexOf(", c: @")); //取得時間
chat = content.substring(content.indexOf(", c: @")+6, content.length); //取得訊息
name = title.substring(title.indexOf("@")+1, title.length); //取得暱稱
color = title.substring(0, title.indexOf("@")); //取得暱稱顏色
output += time + "<span style=\"color:orange;\"> ‹ </span><span style=\"color:" + color + ";font-weight: bold;\">" +
name + "</span><span style=\"color:orange;\"> › </span> " + this.msgFilter(chat) + "<br />";
}
document.getElementById("chatboxy").innerHTML = output; //刷新資料
this.lastscan();
},
msgFilter : function(msg) { //媽媽訊息過濾器
var pos = 0; //空白位置首
var nextpos = 0; //空白位置尾
var output = ""; //輸出暫存器
for(var i=0;nextpos!=-1;i++) {
nextpos = msg.indexOf(" ",pos+1); //取得尾端空白位置
str = msg.substring(pos, nextpos!=-1?nextpos:nextpos.length); //取得各段字串
if(picture.test(str)) { //圖片類型
var reviseIE = "";
if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
reviseIE = "style=\"display:none;\"";
output += "<img src=\""+str+"\"" +
"onerror=\"chatboxy.image.error(this)\"" +
"onload=\"chatboxy.image.resize(this);\"" + reviseIE + " />";
} else if(youtube.test(str)) { //水管類型
var vp = str.indexOf("v=") + 2; //v的get值開始位置
//取得v的get值，當字串『v=』後有『&』字元則取到該字元位置，否則取到字串尾
var v = str.substring(vp, str.indexOf("&", vp)!=-1?str.indexOf("&", vp):str.length);
output += " <button class=\"btn\" onclick=\"window.open('http://www.youtube.com/embed/" +
v + "?autoplay=1&loop=1&playlist=" + v +
"', 'images', 'catalogmode, scrollbars, width=480, height=390')\" />" +
"<span class=\"play\">Play</span></button>" +
"<a target=\"_blank\" href=\"http://youtu.be/" + v + "\">Youtu.be/" + v + "</a>";
} else if(hyperlink.test(str)) { //超連結類型
output += " <a target=\"_blank\" href=\"" + str + "\">" + str + "</a>";
} else { //一般訊息
output += " " + str;
}
pos = nextpos + 1; //尾端成為新首端
}
return output;
},
image : new function() { //暱稱類別
return {
resize : function(image) {
if(typeof image.width != 'undefined') {
var w = image.width;
var h = image.height;
image.removeAttribute('onload'); //移除onload事件
if(w > 0 && h>0 && w <= 200 && h <=200) { //圖示模式
image.title = "("+w+" x "+h+")";
if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
image.style.display = "inline";
} else if(w > 200 && w < 800 && h > 200 && h < 600) { //一般模式
image.title = "(Size: "+w+" x "+h+")";
image.parentNode.insertBefore(document.createElement('br'), image);
var p = image.parentNode;
if(p.lastChild == image) {
p.appendChild(document.createElement('br'));
} else {
p.insertBefore(document.createElement('br'), image.nextSibling);
}
if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
image.style.display = "inline";
} else { //大圖模式
image.title = "(Size: "+w+" x "+h+") Open in New Window";
image.parentNode.insertBefore(document.createElement('br'), image);
var alink = document.createElement('a'); //建立超連結物件
alink.target = "_blank"; //加入新視窗屬性
alink.href = image.src; //加入連結屬性
if(h > w) { //圖片為直圖
w = w/h*600;
h = 600;
} else { //圖片為橫圖
h = h/w*800;
w = 800;
}
image.width = w;
image.height = h;
if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
image.style.display = "inline";
alink.appendChild(image.cloneNode(true)); //克隆自己
image.parentNode.replaceChild(alink, image); //取代舊物件
}
}
},
error : function(image) {
image.removeAttribute('onload'); //移除onload事件
image.removeAttribute('onerror'); //移除onerror事件
var alink = document.createElement('a'); //建立超連結物件
alink.target = "_blank"; //加入新視窗屬性
alink.href = image.src; //加入連結屬性
image.src = imgerror;
if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
image.style.display = "inline";
alink.appendChild(image.cloneNode(true)); //克隆自己
image.parentNode.replaceChild(alink, image); //取代舊物件
}
};
},
name : new function() { //暱稱類別
return {
change : function() { //變更暱稱
var name = document.getElementById('nameboxy');
name.onclick = function(){};
name.innerHTML = "<input type='text' style='text-align:center;width:80px;' " +
"onmouseover='focus()' onfocus='select()' " + //選擇文字事件
"onblur='chatboxy.name.mouse(this)' " + //滑鼠離開事件
"onkeyup='chatboxy.name.keyboard(event,this)'" + //鍵盤ENTER事件
"value='" + name.innerHTML + "'>";
},
mouse : function(me) { //滑鼠事件
var name = document.getElementById('nameboxy');
name.onclick = chatboxy.name.change;
name.innerHTML = me.value;
nameboxy = me.value;
chatboxy.cookie();
},
keyboard : function(e, me) { //鍵盤事件
e = e||window.event;
var key = e.charCode||e.keyCode;
if(key==13) {
this.mouse(me); //借用滑鼠事件
}
}
};
},
color : new function() { //顏色類別
return {
create : function() { //建立顏色Button
var bb = "";
var thecolor = document.getElementById('colorboxy');
var colors = new Array("Black", "Hotpink", "Tomato", "Darkorange", "Gold", //暱稱色碼
"Lime", "Greenyellow", "Green", "Skyblue", "Royalblue",
"Blue", "Darkslateblue", "Purple", "Mediumorchid");
for(var i=0;i<colors.length;i++) {
bb = colors[i] != colorboxy?"0px solid":"3px solid"; //標記已選中之顏色
thecolor.innerHTML += "<div style='border-bottom: " + bb + "; color: " + //建立顏色按鈕
colors[i] + "; display: inline; cursor: pointer;' onClick='chatboxy.color.change(this)' title='" + colors[i] +"'>■</div> ";
}
},
change : function(me) { //變更顏色
this.clear();
me.style.borderBottom = "3px solid"; //標記已選中之顏色
colorboxy = me.title;
document.getElementById('nameboxy').style.color = colorboxy; //刷新畫面數值
chatboxy.cookie();
},
clear : function() { //清除重置
var thecolor = document.getElementById('colorboxy');
var colors = thecolor.getElementsByTagName('div');
for(var i=0;i<colors.length;i++) {
colors[i].style.borderBottom = "0px solid";
}
}
};
},
submit : new function() {
return {
send : function() { //發送事件
var msg = document.getElementById('c_msg').value;
var params = {'entry.0.single':colorboxy +'@'+nameboxy, 'entry.1.single':'@'+msg}; //欲發送項目
this.wait(); //顯示等待送出處理
this.post(params); //發送POST
},
enter : function(e) { //鍵盤事件
e = e||window.event;
var key = e.charCode||e.keyCode;
if(key==13) {
this.send(); //借用發送事件
}
},
post : function(params) { //虛擬表單送出POST
var rm = document.getElementById('formBoxy');
if(rm) rm.parentNode.removeChild(rm); //刪除舊虛擬表單
var form = document.createElement('form'); //建立新虛擬表單
form.target = 'iframeboxy'; //指向隱藏框架
form.id = 'formBoxy';
form.method = 'post';
form.action = postUrl;
for(var key in params) { //加入表單子項目
var input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = params[key];
form.appendChild(input);
}
document.getElementsByTagName('body')[0].appendChild(form); //產生虛擬表單
form.submit(); //送出表單
},
wait : function() { //等待狀態函式
var msg = document.getElementById('c_msg');
msg.style.background = "url(" + imgwait + ")"; //等待圖片
msg.style.backgroundRepeat = "no-repeat"; //圖片不重複
msg.disabled = true; //禁用輸入框
var btn = document.getElementById('sendboxy');
btn.disabled = true; //禁用送出鈕
},
done : function() { //完成狀態函式
var msg = document.getElementById('c_msg');
msg.style.background = "url(" + imgdone + ")"; //訊息圖片
msg.style.backgroundRepeat = "no-repeat"; //圖片不重複
msg.value = ""; //清除訊息
msg.disabled = false; //解開輸入框
var btn = document.getElementById('sendboxy');
btn.disabled = false; //解開送出鈕
msg.select();
window.clearInterval(lastimer); //中斷計時器
lastimer = null; //清除計時器內容
chatboxy.getJsonp(lastJUrl,'chatboxy.lastscan'); //繼續掃描
}
};
},
fps : function() { //重新啟動掃瞄器
window.clearInterval(lastimer); //中斷計時器
lastimer = null; //清除計時器內容
this.lastscan(); //繼續掃描
},
cookie : function() { //Cookie設定
var c_name = this.getCookie("nameboxy"); //暱稱值
var c_color = this.getCookie("colorboxy"); //顏色值
var c_fps = this.getCookie("fpsboxy"); //刷新數值
/* 刷新Cookie紀錄 - Cookie有舊值，將舊值刷新成新值。 *
* 繼承Cookie紀錄 - Cookie有舊值，將空值以舊值繼承。 *
* 建立Cookie紀錄 - Cookie無 值，建立預設值於空值。 */
if(c_name && nameboxy) { //刷新Cookie紀錄
document.cookie = "nameboxy=" + escape(nameboxy); //刷新Cookie
} else if(c_name && !nameboxy) { //繼承Cookie紀錄
nameboxy = c_name;
document.getElementById('nameboxy').innerHTML = nameboxy; //刷新顯示
} else { //建立Cookie紀錄
nameboxy = "Ghost";
document.cookie = "nameboxy=" + escape(nameboxy);
}
if(c_color && colorboxy) { //刷新Cookie紀錄
document.cookie = "colorboxy=" + escape(colorboxy); //刷新Cookie
} else if(c_color && !colorboxy) { //繼承Cookie紀錄
colorboxy = c_color;
document.getElementById('nameboxy').style.color = colorboxy; //刷新顯示
} else { //建立Cookie紀錄
colorboxy = "Black"; //初始化預設值
document.cookie = "colorboxy=" + escape(colorboxy); //存入Cookie
}
if(c_fps && fpsboxy) { //刷新Cookie紀錄
fpsboxy = document.getElementById('fpsboxy').value;
document.cookie = "fpsboxy=" + escape(fpsboxy); //刷新Cookie
this.fps(); //重新啟動掃瞄器
} else if(c_fps && !fpsboxy) { //繼承Cookie紀錄
fpsboxy = c_fps;
document.getElementById('fpsboxy').value = Number(fpsboxy); //刷新顯示
} else { //建立Cookie紀錄
fpsboxy = "1000";
document.cookie = "fpsboxy=" + escape(fpsboxy);
}
},
getCookie : function(name) { //取Cookie函式
var n = name + "=";
var nlen = n.length;
var clen = document.cookie.length;
var i = 0;
while(i < clen) {
var j = i + nlen;
if(document.cookie.substring(i, j) == n) {
var endstr = document.cookie.indexOf(";", j);
if(endstr == -1)
endstr = clen;
return unescape(document.cookie.substring(j, endstr));
}
i = document.cookie.indexOf(" ", i) + 1;
if(i == 0) break;
}
return null;
},
init : function() { //系統初始化
this.cookie();
this.color.create();
document.getElementsByTagName('body')[0].innerHTML +=
"<iframe name=\"iframeboxy\" onload=\"chatboxy.submit.done()\" style=\"display:none;\"></iframe>"; //產生腳本
}
};
};
chatboxy.init(); //啟動
</script>
說明：原始碼由QQBoxy釋出， 轉載請遵守創用CC授權條款，謝謝。
沒有留言:
張貼留言