纯js实现的论坛常用的运行代码的效果

用的时候把runcode.js放到网站目录,在需要运行代码的效果的地方放如下的代码


代码如下:

<div style="margin-top: 1em; margin-bottom: 1em"><div style="display:none">{1}</div><textarea rows="12" cols="95" style='font-family:"Courier New",Courier,monospace;'></textarea><script src="runcode.js"></script><br /><input type="button" value="运行代码" style="border-left:1px solid #B1B4CD;border-right:1px solid #494D74;border-top:1px solid #B1B4CD;;border-bottom:1px solid #494D74;background:#696D81;color:#FFFFFF;" onclick="runCode(this)"> <input type="button" style="border-left:1px solid #B1B4CD;border-right:1px solid #494D74;border-top:1px solid #B1B4CD;;border-bottom:1px solid #494D74;background:#696D81;color:#FFFFFF;"value="复制代码" onclick="copycode(this)"> <input type="button" style="border-left:1px solid #B1B4CD;border-right:1px solid #494D74;border-top:1px solid #B1B4CD;;border-bottom:1px solid #494D74;background:#696D81;color:#FFFFFF;"value="另存代码" onclick="saveCode(this)"> <input type="button" style="border-left:1px solid #B1B4CD;border-right:1px solid #494D74;border-top:1px solid #B1B4CD;;border-bottom:1px solid #494D74;background:#696D81;color:#FFFFFF;"value="还原代码" onclick="preCode(this)">  提示:您可以先修改部分代码再运行</div>

就可以了。
runcode.js文件


代码如下:

//Scripts runcode for BBS ver 2008-06-30, by Bound0(bound0@veryhman.com)
//First published at http://bbs.blueidea.com
//An example: http://bbs.veryhman.com/showtopic-20094.aspx

function runCode(which) {
    var p=which.parentNode;
    var os=p.getElementsByTagName("textarea");
    if(os.length==0)return;
    var o=os[0];
        var winname = window.open('', "_blank", '');
        winname.document.open('text/html', 'replace');
        winname.opener = null;
        winname.document.write(o.value);
        winname.document.close();
}
function saveCode(which) {
    var p=which.parentNode;
    var os=p.getElementsByTagName("textarea");
    if(os.length==0)return;
    var o=os[0];
        var winname = window.open('', '_blank', 'top=10000');
        winname.document.open('text/html', 'replace');
        winname.document.write(o.value);
        winname.document.execCommand('saveas','','code.htm');
        winname.close();
}
function copycode(which) {
    var p=which.parentNode;
    var os=p.getElementsByTagName("textarea");
    if(os.length==0)return;
    var o=os[0];
    var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);
    if(is_ie && o.style.display != 'none') {
        var rng = document.body.createTextRange();
        rng.moveToElementText(o);
        rng.scrollIntoView();
        rng.select();
        rng.execCommand("Copy");
        rng.collapse(false);
    }
}
function text(e)
{
    var t = "";
    e = e.childNodes || e;
    for ( var j = 0; j < e.length; j++ )
    {

if(e[j].nodeType != 1){t+=e[j].nodeValue}
        else
        {
            var k=e[j].nodeName;
            if(k=='BR'||k=='P'){t+='\r\n'}
            t+=text(e[j].childNodes)
        }
    }
    return t;
}
function preCode(which) {
    var p=which.parentNode;
    var os=p.getElementsByTagName("textarea");
    if(os.length==0)return;
    var o=os[0];
    var osv=p.getElementsByTagName("div");
    if(osv.length==0)return;
    var ov=osv[0];
    var c=''
    if(typeof(ov.innerText)!="undefined"){c=ov.innerText}else{c=text(ov)}
    o.value=c
}
(function(){var s=document.getElementsByTagName("script");preCode(s[s.length-1])})()

(0)

相关推荐

  • 纯js实现的论坛常用的运行代码的效果

    用的时候把runcode.js放到网站目录,在需要运行代码的效果的地方放如下的代码 复制代码 代码如下: <div style="margin-top: 1em; margin-bottom: 1em"><div style="display:none">{1}</div><textarea rows="12" cols="95" style='font-family:"Co

  • 纯JS实现只能输入数字的简单代码

    只能输入数字 <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=&quo

  • 纯JS打造网页中checkbox和radio的美化效果

    图片素材: 效果图: <head> <style> BODY { FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5% } LABEL { MARGIN-RIGHT: 1.2em } .custom-checkbox { POSITION: relative } .custom-rad

  • 纯JS图片批量预加载技术代码

    图片批量加载 function $id(id){ return document.getElementById(id);} function $c(tagName){ return document.createElement(tagName);} window.onload = function(){ imageLoad( { url:function(v){ v = []; for(var i=1; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js实现轮播图效果 纯js实现图片自动切换

    本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片: 2. 鼠标离开,恢复自动播放: 3. 点击下方中间几个小圆圈,也会自动切换图片: 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&quo

  • 在Z-Blog中运行代码[html][/html](纯JS版)

    昨天的<利用th,colgroup,col定义表格样式>中,细心点的朋友会发现加了一个"运行代码"的链接:直接点击可以运行Textarea中的内容.其实本身蓝色理想.51JS上也有相关介绍,Z-Blog官方论坛上也有类似帖子,因为自己不太喜欢改asp的内容(将来升级省得替换),所以偷了个小懒,做了一个纯JS版本的. 是否兼容FireFox,还没来得及测试.自己觉得"另存为"和"复制"功能也比较多余,这里也省略掉了.如果需要Fix Bu

  • 纯JS实现表单验证实例

    表单我实现了,input属性是text(文本框).radio(单选按钮).checkbox(多选按钮)的知识点, fieldset标签(组合表单中的相关元素).select标签(选择列表)和textarea标签(多行文本框). <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return check

  • 网页中JS函数自动执行常用三种方法

    本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下 一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: <body onload="myfunction()"> <html> <body onload="func1();func2();func3();"> </body> </html> 2.在JS语句调用: <script type="text

  • 原生JS实现几个常用DOM操作API实例

    原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> <h1 id="h1">我是标题</h1> <p>我是一个段落</p> <script type="text/javascript"> //获取元素的兄弟节点 function siblings(o){//参数o

  • 纯js代码实现简单计算器

    本文实例分享了纯js代码实现简单计算器代码,相信大家会喜欢.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title> new document </title> <script type="text/javascript"> function count(){ var txt1 = parseInt( document.getElementById(

随机推荐