怎么给博客园中的代码添加一个运行按钮

怎么给博客园中的代码添加一个运行按钮

JS代码的实现

$(function() {
    /* 获得整个页面可被运行的代码片断*/
    var code = $('.can_run');

    /*为每个can_run的代码区域添加按钮并绑定事件*/
    code.each(function() {
        var button = $('<button class="runcode">运行上面的代码</button>'), //按钮
            p = $('<p style="text-align:right;"></p>'), //按钮加入到段落中
            $this = $(this); //保存当前代码区域的引用

        /*组织结构，并在can_run之后添加这个结构*/
        p.append(button);
        $this.after(p);

        /*为当前代码片段对应的按钮绑定点击事件*/
        button.on('click', function() {
            var win = window.open('', '_blank', ''); //开启新窗口
            win.document.write( $this.text() ); //向新窗口输出内容
        });
    });
});

上传到博客园

1、直接将上面这段代码用.js方式保存到本地，然后上传到你的博客园后台。【管理>>文件>>选择文件并上传】

2、在博客设置里加入对这个JS文件的引用【管理>>设置>>页首HTML代码】

<script src="你上传的js文件路径"></script>

引用代码

按照步骤在编辑器每段代码区(div)后面添加class为 can_run的值即可

完成之后就是下面的效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>为博客园中的代码添加一个运行代码按钮</title>
</head>

<body>
<h1>Hello, world!</h1>
</body>
</html>

 

posted @ 2020-05-15 17:40  hollows  阅读(256)  评论(0)    收藏  举报
当前浏览器不支持canvas，请更换浏览器后再试