纯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网页制作特殊效果用随机数
May 22 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
搭建vue开发环境
Jul 19 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
详解Vite的新体验
Feb 22 Javascript
vue使用echarts实现折线图
Mar 21 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 PDOStatement::getColumnMeta讲解
2019/02/01 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
js实现简单扫雷
2020/11/27 Javascript
python list语法学习(带例子)
2013/11/01 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
详解Python3 基本数据类型
2019/04/19 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python requests设置代理的方法步骤
2020/02/23 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
eBay加拿大站:eBay.ca
2019/06/20 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
骨干教师培训方案
2014/05/06 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
董事长助理岗位职责
2015/02/11 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
Python图像处理库PIL详细使用说明
2022/04/06 Python