纯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 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
点图片上一页下一页翻页效果
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
substr()函数中文版
2006/10/09 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
JS backgroundImage控制
2009/05/19 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python 迭代器和iter()函数详解及实例
2017/03/21 Python
python简单实例训练(21~30)
2017/11/15 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python之pandas用法大全
2018/03/13 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
房地产销售经理岗位职责
2014/01/01 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
个人自我评价范文
2014/02/05 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js