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

所属分类: 网络编程 / JavaScript 阅读数: 657
收藏 0 赞 0 分享
用的时候把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])})()

更多精彩内容其他人还在看

深入解析Vue 组件命名那些事

本篇文章主要介绍了深入解析Vue 组件命名那些事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue学习笔记进阶篇之vue-cli安装及介绍

这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jquery版轮播图效果和extend扩展

这篇文章主要为大家详细介绍了jquery版轮播图效果,以及extend扩展的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery Validate格式验证功能实例代码(包括重名验证)

本文通过实例代码给大家介绍了jQuery Validate格式验证功能,代码中包括重名验证的方法,需要的的朋友参考下吧
收藏 0 赞 0 分享

Angular.js中angular-ui-router的简单实践

本篇文章主要介绍了Angular.js中angular-ui-router的简单实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现二维坐标点排序效果

这篇文章主要为大家详细介绍了JavaScript实现二维坐标点排序效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入理解vue2.0路由如何配置问题

本篇文章主要介绍了vue2.0路由配置问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

基于bootstrap实现多个下拉框同时搜索功能

这篇文章主要为大家详细介绍了基于bootstrap实现多个下拉框同时搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript 值类型和引用类型的初次研究(推荐)

这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下
收藏 0 赞 0 分享

利用jQuery异步上传文件的插件用法详解

这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多