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


Posted in Javascript onJuly 15, 2008

用的时候把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])})()

Javascript 相关文章推荐
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
玩转方法:call和apply
May 08 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
JS中min函数实例讲解
Feb 18 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
点图片上一页下一页翻页效果
Jul 09 #Javascript
JS的数组的扩展实例代码
Jul 09 #Javascript
JS location几个方法小姐
Jul 09 #Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 #Javascript
javascript jQuery $.post $.ajax用法
Jul 09 #Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 #Javascript
SWFObject Flash js调用类
Jul 08 #Javascript
You might like
用PHP和MySQL保存和输出图片
2006/10/09 PHP
桌面中心(一)创建数据库
2006/10/09 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python中异常报错处理方法汇总
2016/11/20 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
初中学生期末评语
2014/04/24 职场文书
还款承诺书范文
2014/05/20 职场文书
班级读书活动总结
2014/06/30 职场文书
先进学校事迹材料
2014/12/30 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
利用Python实现Picgo图床工具
2021/11/23 Python
redis lua限流算法实现示例
2022/07/15 Redis