博客文章里怎么实现运行代码

实现运行代码功能：

先尝试一下吧

<div class="numSlider">
    <div class="numLine">
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
    </div>
</div>
<div>
　　<a href="javascript:;" class="numGo">go</a>
　　<a href="javascript:;" class="numReset">reset</a>
</div>

<style>
    .numSlider{
        width: 312px;
        height: 180px;
        background: url(http://images.cnblogs.com/cnblogs_com/yinn/1081699/o_bgbaidu01.png);
        position: relative;
    }
    .numLine{
        width: 460px;
        height: 28px;
        position: absolute;
        top: 73px;
        margin-left: 56px;
    }
    .num{
        float: left;
        width: 20px;
        height: 28px;
        margin-right: 3px;
        background: url(http://images.cnblogs.com/cnblogs_com/yinn/1081699/o_bgbaidu01.png) -263px -372px;
    }
    .num_icon{
        display: inline-block;
        width: 20px;
        height: 26px;
        background: url(http://images.cnblogs.com/cnblogs_com/yinn/1081704/o_bgbaidu02.png);
        background-position: 0px 0px;
        -moz-transition: background-position 1s ease;
        -webkit-transition: background-position 1s ease;
        -o-transition: background-position 1s ease;
    }
    .numGo,.numReset{
        border: 1px solid #4BAAEE;
        border-radius: 3px;
        float: left;
        padding: 1px 2px;
        margin: 5px 5px 0px 0px;
        text-decoration: none;
    }
</style>

<script type="text/javascript">
    $(".numGo").click(function(){
        var num = 1000000000+5201314+"";
        num = num.slice(1);
        for(var i = 0;i<num.length;i++){
            var n = parseInt(num[i]);
            if(n == 0){
                $(".num_icon").eq(i).css("backgroundPosition","0px "+(-27*10)+"px")
            }else{
                $(".num_icon").eq(i).css("backgroundPosition","0px "+(-27*n)+"px")
            }
        }
    });

    $(".numReset").click(function(){
        $(".num_icon").css("backgroundPosition","0px 0px");
    })
 </script>

运行代码

因为这是在写在博客文章里的代码，所以最简单的就是利用博客本身自带的html结构进行处理：

首先：点击插入代码按钮，编程语言选HTML，把已经写好的代码片段（如上）paste进来。之所以说是已经写好的代码片段，是因为在插入代码框里写代码真的是很操蛋的一件事情。

然后：点击编辑html源代码，你会发现你所粘贴的代码都被自动包含在类名为cnblogs_code的div里了。此时，要在页面加上运行代码的按钮。在编辑html源代码框里把

<p>&nbsp;</p>

换成

<p><button class="btn_go">运行代码</button></p>

就会在页面生成运行代码按钮了。

然后：因为可能不止一次用到运行代码功能，所以在在博客设置里的页首html里加入html代码：

<div class="modal_run">
    <h4>运行结果：</h4>
    <a href="javascript:;" class="cancel">X</a>
    <div class="run_res"></div>
</div>

在侧边栏公告里加上执行脚本：

   $(".btn_go").click(function(){
       var text = $(this).parent().prev(".cnblogs_code").text();
       $(".modal_run").show();
       $(".run_res").html(text);
   })

   $(".modal_run a.cancel").click(function(){
       $(".modal_run").hide();
   })

 

在页面定制CSS代码加入样式：

/* 运行结果 */
.btn_go{border:1px solid #A5A5A5;border-radius:2px;padding:1px 2px;cursor:pointer;}
.modal_run{position:fixed;top:50%;left:50%;width:960px;height:500px;margin-top:-250px;margin-left:-480px;border:2px solid #FF0;background:#FFF;display:none;}
.modal_run h4{color:#F00;height:40px;line-height:40px;font-size:16px;border-bottom:1px solid #C5C5C5;padding:0 20px;}
.run_res{padding:20px;}
.modal_run a.cancel{position:absolute;top:10px; right:15px; display:inline-block;width:20px;height:20px;text-align:center;text-decoration:none;line-height:20px;}
.modal_run a.cancel:hover{background:#CCC;}

就ok啦，以后每次用到运行代码，只要粘上主功能代码，加上“运行代码”按钮就可以了。