第二天(标识符,进制)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.d span{
    counter-increment: linenumber;
}
.d span:before{
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 5px;
    padding-left: 10px;
    text-align: right;
    border-right: 1px solid #000;
    line-height: 20px;
}
.body{
    position: relative;
    width: 1000px;
    height: 900px;
    margin: 0 auto;
    padding-top: 10px;
    overflow: auto; 
    border-left: 5px solid #558abb;
    background: url(https://developer.cdn.mozilla.net/static/img/blueprint-dark.fd85a7a074ae.png);
}
i,pre{
    line-height: 20px;
}
pre{
}
.d{
    position: absolute;
    top: 10px;
    left: 0;
}
textarea{
    display: none;
    position: absolute;
    top: 10px;
    left: 40px;
    width: 100%;
    line-height: 20px;
    resize: none;
}
.as{
}
pre .green{
    color: #14CB04;
}
pre .blue{
    color: #1393E6;
}
pre .red{
    color: #CE0707;
}
pre .green{
    color: #14CB04;
}
</style>
</head>
<body>

<div class="body">
<textarea wrap="off">
/*var dataUrl='http://dhudong.cztv.com/'
inits();*/
$(window).resize(function(){
    inits();
});
function inits(){
    var w=$(window).width();
    var h=$(window).height();
    $(".alert").css({width:w,height:h})
};
$(function(){
    $(".alert,.alert .alertBox span").click(function(){
        $(".alert").hide();
    })
    $(".alert .alertBox").click(function(e){
        e.stopPropagation();
    })
})
var list={
    init:function(){
        list(1);
        $.ajax({
            url: dataUrl+'activity/getworklist?channel_id=1&activity_id=21&page=1&pagenum=100000&work_type=1',
            type:'get',
            dataType:'jsonp',
            success:function(rlt){
                var len=rlt.data.length;
                var pageNum=Math.ceil(len/12);
                var page='<div id="Pagination"></div>'+
                        '<div class="searchPage">'+
                          '<span class="page-sum">共<strong class="allPage" style="margin: 0 5px;">'+pageNum+'</strong>页</span>'+
                        '</div>'
                $(".pagebar").append(page);
                $("#Pagination").pagination(pageNum,{
                    num_edge_entries: 1, //边缘页数
                    num_display_entries: 4, //主体页数
                    callback: pageselectCallback,
                    items_per_page: 1, //每页显示1项
                    prev_text: "前一页",
                    next_text: "后一页"
                });
            }
        });
        function pageselectCallback(pIndex){
            list(pIndex+1)
        }
        function list(num){
            $.ajax({
                url: dataUrl+'activity/getworklist?channel_id=1&activity_id=21&page='+num+'&pagenum=12&work_type=1',
                type:'get',
                dataType:'jsonp',
                success:function(rlt){
                    $(".list-page ul").empty();
                    for(var i=0,j=1;i<rlt.data.length;i++,j++){
                        if(j%3!=0||j==0){
                            var html='<li class="mr">';
                        }else{
                            var html='<li>';
                        }
                        html+='<a href="http://mhudong.cztv.com/245769?vid='+rlt.data[i].work_id+'" target="_blank">'+
                                        '<div class="video-box">'+
                                            '<img src="'+rlt.data[i].work_picture+'" alt="">'+
                                        '</div>'+
                                        '<p class="list-title">'+rlt.data[i].work_title+'</p>'+
                                        '<p class="list-intro">'+rlt.data[i].work_intro+'</p>'+
                                    '</a>'+
                                '</li>'
                        $(".list-page ul").append(html)
                    }
                }
            })
        }
    }
}
var config='';
//flash调用函数
/*function getVideoConfig(){                    
    return config;
}*/</textarea>
    <pre class="as">

    </pre>
    <div class='d'>
    </div>
</div>

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript">
var html=$("textarea").val();
console.log()
$('pre').html(html.replace(/</g,'&lt'));
for(var i=0;i<html.match(/\ \/\/(\S*)/g).length;i++){
    html = $('pre').html();
    $('pre').html(html.replace(html.match(/\ \/\/(\S*)/g)[i],'<span class="green">'+html.match(/\ \/\/(\S*)/g)[i]+'</span>'));
}
for(var i=0;i<html.match(/\n\/\/(\S*)/g).length;i++){
    html = $('pre').html();
    $('pre').html(html.replace(html.match(/\n\/\/(\S*)/g)[i],'<span class="green">'+html.match(/\n\/\/(\S*)/g)[i]+'</span>'));
}
html = $('pre').html();

for(var i=0;i<html.match(/'(\S*)'/g).length;i++){
    console.log(html.match(/'(\S*)'/g)[i])
html = $('pre').html();
    $('pre').html(html.replace(html.match(/'(\S*)'/g)[i],'<span class="green">'+html.match(/'(\S*)'/g)[i]+'</span>'));
}
html = $('pre').html();
$('pre').html(html.replace(/function/g,'<span class="blue">function</span>'));
html = $('pre').html();
$('pre').html(html.replace(/var /g,'<span class="blue">var </span>'));
html = $('pre').html();
$('pre').html(html.replace(/\nvar /g,'<span class="blue">\nvar </span>'));
html = $('pre').html();
$('pre').html(html.replace(/width/g,'<span class="blue">width</span>'));
html = $('pre').html();
$('pre').html(html.replace(/height/g,'<span class="blue">height</span>'));
html = $('pre').html();
$('pre').html(html.replace(/[$]+/g,'<span class="red">$</span>'));
html = $('pre').html();
$('pre').html(html.replace(/window/g,'<span class="blue">window</span>'));

var h=$('pre').height();
$("textarea").height(h)
for(var i=0;i<h/20;i++){
    $(".d").append('<span></span>')
}

$("pre").css({marginLeft:$(".d").width()+5})
$("textarea").css({left:$(".d").width()+5,width:$("pre").width()})
</script>
</body>
</html>

 

posted @ 2015-04-26 21:05  q251479891  阅读(124)  评论(0)    收藏  举报