在网站中实现这样的结果,其实很简单,博客园里就有这样的模式,分析代码,发现实现的功能并不难的,
把js内容放进一个 textarea 标签内,
<textarea rows="10" style="width:75%" id="runcode5"> <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <title> CSS垂直居中</title> <style type="text/css"> div { display:table-cell; vertical-align:middle; text-align:center; width:500px; height:500px; background:#B9D6FF; border: 1px solid #CCC; } </style> <!--[if IE]> <style type="text/css"> i { display:inline-block; height:100%; vertical-align:middle } img { vertical-align:middle } </style> <![endif]--> </head> <body> <h1>垂直居中(display:inline-block法)</h1> <div class="container"> <i></i> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" /> </div> </body> </html> </textarea>
<p><button title="runcode5" class="runcode" type="button">运行代码</button></p>
JS代码:
var guarder = function(mercy){ mercy = mercy || true; var unselect = function(){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); }; if(mercy){ document.onselectstart=unselect; document.oncopy=unselect; document.onbeforecopy=unselect; document.onmouseup=unselect; document.onselect=unselect; document.onpaste=unselect; }; } var getElementsByClassName = function (searchClass, node,tag) { if(document.getElementsByClassName){ return document.getElementsByClassName(searchClass); }else{ node = node || document; tag = tag || "*"; var classes = searchClass.split(" "), elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), patterns = [], returnElements = [], current, match; var i = classes.length; while(--i >= 0){ patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)")); } var j = elements.length; while(--j >= 0){ current = elements[j]; match = false; for(var k=0, kl=patterns.length; k<kl; k++){ match = patterns[k].test(current.className); if (!match) break; } if (match) returnElements.push(current); } return returnElements; } } var loadEvent = function(fn) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; }else { window.onload = function() { oldonload(); fn(); } } } var normalizeCode = function(code){ code = code.replace(/</g,'<'); code = code.replace(/>/g,'>'); code = code.replace(/&/g,'&'); return code; }; var runCode = function(code){ if (code!=""){ var newwin = window.open('', "_blank", ''); newwin.document.open('text/html', 'replace'); newwin.opener = null; newwin.document.write(code); newwin.document.close(); } }; var evalCode = function(code){ var head = document.getElementsByTagName("head")[0], js = document.createElement("script"); js.type = "text/javascript"; js.charset= "utf-8"; js.text = code; head.insertBefore(js, head.firstChild); head.removeChild(js); }; var runCodes = function(){ document.onclick = function(e){ e = e || window.event; var target = e.srcElement ? e.srcElement : e.target, tag = target.nodeName.toLowerCase(); if((tag == "button") && hasClass(target,"runcode")){ var id = target.getAttribute("title"), code = document.getElementById(id).innerHTML; code = normalizeCode(code); hasClass(target,"direct") ? evalCode(code):runCode(code); } } }; var hasClass = function(ele,cls) { return -1 < (" "+ele.className+" ").indexOf(" "+cls+" "); }; var addClass = function(ele,cls) { if (!this.hasClass(ele,cls)) ele.className += " "+cls; }; var removeClass = function(ele,cls) { if (hasClass(ele,cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); ele.className=ele.className.replace(reg,' '); } }; var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { el.addEventListener(type, fn, false); }; } else { return function (el, type, fn) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); }; }; })(); var tableManager = function(){ var tables = getElementsByClassName("filament_table",document,"table"); if(tables.length > 0){ for(var i=0,l= tables.length;i<l;i++){ var table = tables[i], rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr"), j = rows.length; while(--j > 0){ if(!+"\v1" && j%2 == 1){ addClass(rows[j],"even"); }; }; with(table){ cellSpacing= "0"; width = table.getAttribute("width") || "700"; rules = "cols" }; addEvent(table,'mouseover',function(){ var e = arguments[0] || window.event, td = e.srcElement ? e.srcElement : e.target, tr = td.parentNode, trn = tr.nodeName.toLowerCase(), tbodyn = tr.parentNode.nodeName.toLowerCase(); if(trn == 'tr' && tbodyn == 'tbody'){ addClass(tr,"hover"); }; }); addEvent(table,'mouseout',function(){ var e = arguments[0] || window.event, td = e.srcElement ? e.srcElement : e.target, tr = td.parentNode, trn = tr.nodeName.toLowerCase(), tbodyn = tr.parentNode.nodeName.toLowerCase(); if(trn == 'tr' && tbodyn == 'tbody' && hasClass(tr,"hover")){ removeClass(tr,"hover"); }; }); }; }; };
以上代码很清晰,我就不做说明了,自己做个备份记录,后用