让万达显示厅号——用greasemonkey编排本地网页
预览
万达在线订票时经常关注的是3D和IMAX厅，但是订票页面厅号又没有显示出来，每回都要一个个用鼠标指到放映时间上去看，心烦。
于是动手做，DIY的乐趣无穷。
IE的做法：
预览
万达在线订票时经常关注的是3D和IMAX厅，但是订票页面厅号又没有显示出来，每回都要一个个用鼠标指到放映时间上去看，心烦。
于是动手做，DIY的乐趣无穷。
IE的做法：
IE下得到的页面太简单了，不够醒目，尤其是所有页面都会去加载这个样式表。
FF的做法：
// ==UserScript==
// @name 显示万达厅号
// @namespace http://www.cnblogs.com/ambar/
// @description online booking modifed by ambar @ 2009-12-02
// @include http://booking.wandafilm.com/*
// ==/UserScript==
//domReady
function $clear(a){clearTimeout(a);clearInterval(a);return null};function $attach_event(a,b){if(window.addEventListener){window.addEventListener(a,b,false)}else if(window.attachEvent){window.attachEvent("on"+a,b)}};function $domReady(f){if($domReady.done)return f();if($domReady.timer){$domReady.ready.push(f)}else{$attach_event("load",$isDOMReady);$domReady.ready=[f];$domReady.timer=setInterval($isDOMReady,100)}};function $isDOMReady(){if($domReady.done)return false;if(document&&document.getElementsByTagName&&document.getElementById&&document.body){$clear($domReady.timer);$domReady.timer=null;for(var i=0;i<$domReady.ready.length;i++){$domReady.ready[i]()}$domReady.ready=null;$domReady.done=true}};
//utils. selector
var id=function(id){return document.getElementById(id)};var tag=function(name,elem){return(elem||document).getElementsByTagName(name)};function checkElem(elem){return elem&&elem.constructor==String?document.createTextNode(elem):elem};function hasClass(name,type,elem){var r=[];var re=new RegExp("(^|\\s)"+name+"(\\s|$)");var e=elem?tag(type||"*",elem):tag(type||"*");for(var j=0;j<e.length;j++)if(re.test(e[j].className))r.push(e[j]);return r};function insertAfter(newEl,targetEl){var parentEl=targetEl.parentNode;parentEl.lastChild==targetEl?parentEl.appendChild(newEl):parentEl.insertBefore(newEl,targetEl.nextSibling)};
//css
var styleAppend='\
tr.mema_ner span+em { display:block; font-size:.7em; color:#37a; }\
tr.mema_ner span+em span { display:block; line-height:1.2; text-align:left; background:#ddd; }\
q:before,q:after { content:""; content: none; }\
q.imax { color:#3a95d4; font: normal bold 1.9em "Avenir LT 65 Medium", "Lucida Grande", "Lucida Sans Unicode", "Arial Black"; background:#616260; text-shadow:1px 1px #5a7e97, -2px -1px 2px #000; -moz-border-radius: 4px; border-radius: 4px; padding:3px; -moz-box-shadow: 3px 3px 20px #369, -2px -2px 3px #eee; box-shadow: 3px 3px 20px #fff; }\
q.imax:after { content: ".IMAX"; } q.imax:hover { text-shadow:-3px -2px 2px #000; }\
q.d3 { text-shadow: -1px -1px 2px #333, -3px -3px 2px #444, -5px -5px 2px #555, 1px 1px 1px #666, 3px 3px 12px #777, 1px 1em 1em #222; font-size:1.2em; color:#111; }\
q.d3:after { content:"...3d"; font-weight:bold; font-size:2em; }\
q.vip:after { content:".VIP"; color:#800; text-shadow: 3px -5px 4px #0e0, -3px -5px 4px #f00, 0 6px 4px #800; }\
q.h8:after { content:"...<16:9>"; color:#000; text-shadow: 2px 0 4px #600, -2px 0 4px #006; font-size:1.2em; }\
';
var dispNumbers = function(){
//添加样式
var css=document.createElement('style');
css.setAttribute('type','text/css');
css.innerHTML = styleAppend;
tag('head')[0].appendChild(css);
var getHtmlString = function(title){
var html = '';
for(var t in title){
//原span的标题 title="3号厅 [剩余座位258] [可订票座位62]"
var temp = title[t];
if( temp ){
if( t == 0 ){
var digit=parseInt( temp.charAt(0) );
switch( digit ){
case 9:
temp = '<q class="imax">9</q>'//+title[t].substr(1);
break;
case 2:
temp = '<q class="d3">2</q>';
break;
case 5:
temp = '<q class="vip">5</q>';
break;
case 8:
temp = '<q class="h8">8</q>';
break;
}
} else if( t == 1 ) {
temp = temp.replace('剩余座位','剩余 ');
} else {
temp = temp.replace('可订票座位','可订 ');
}
html += '<span>'+temp+'</span>';
}
};
return html;
};
var tr = hasClass('mema_ner','tr');
for (var i = 0; i < tr.length; i++) {
var span = tag('span',tr[i]);
for (var j = 0; j < span.length; j++) {
var em = null, emHtml = '', title = span[j].title.split(/\s+/);
if ( title.length === 3 ){
emHtml = getHtmlString(title);
em = document.createElement('em');
em.innerHTML = emHtml;
insertAfter(em,span[j]);
}
}
}
};
$domReady(dispNumbers);
用greasemonkey才得到满意的效果，感谢期间好友XL提到的的想法——“要是每个不同功能的厅应用不同的颜色....”——才有了更好的灵感。诸如CSS的字体阴影，练习起来很好玩：
/*
*这是多重阴影的做法，
*单一阴影的格式 text-shadow:x轴偏移 y轴偏移 范围 颜色;
*多重阴影格式如下:
*/
text-shadow: 0 0 4px #ccc, 0 -5px 4px #369, 2px -10px 6px #258, -2px 15px 11px #336, 2px 18px 18px #258;text-shadow: -1px -1px 2px #000;
产生的效果:
用法
安装greasemonkey扩展后，将下面的脚本拖动到firefox窗口即可.
