js: 字符集

用js生成字符集

一般网页制作中需要一些向上向下的小箭头，用图片非常不合算（一个页面发起多个http请求、css、文件大小等方面考虑）

所以用一些字符集的字符图形，效果很好

下面是用js生成字符集，以便于查找：

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

    $(".char-btn").click(function(){

        var start=parseInt($(this).attr('data-start'));

        var end=parseInt($(this).attr('data-end'));

        var _html="";

        for(var i=start;i<end;i++){

            _html += '&#'+i+';';

            if (i%100==0){

                _html += '<br><h3>【'+i+'  --  '+(i+100)+':】</h3>\n';

            }

        }

        $('#result').html(_html);

    });

    $(".char2-btn").click(function(){

        var start=parseInt($(this).attr('data-start'));

        var end=parseInt($(this).attr('data-end'));

        var _html="";

        for(var i=start;i<end;i++){

            _html += '&#'+i+';';

            _html += ' --['+i+']<br>\n';

        }

        $('#result').html(_html);

    });

});

</script>

<style type="text/css">

#p1{font-size:20px;font-family:Arial;}

#result{font-family:Arial;background:#f8f8f8;border:1px solid #000;font-size:20px;min-height:800px;}

</style>

<h2>字符集   font-family:Arial;（js生成）</h2>

<input type="button" name="" value="生成 0-10000" class="char-btn" data-start="0" data-end="10000">

<input type="button" name="" value="生成 10000-20000" class="char-btn" data-start="10000" data-end="20000">

<input type="button" name="" value="生成 20000-30000" class="char-btn" data-start="20000" data-end="30000">

<input type="button" name="" value="生成 30000-40000" class="char-btn" data-start="30000" data-end="40000">

<input type="button" name="" value="生成 40000-50000" class="char-btn" data-start="40000" data-end="50000">

<input type="button" name="" value="生成 50000-60000" class="char-btn" data-start="50000" data-end="60000">

<input type="button" name="" value="生成 60000-70000" class="char-btn" data-start="60000" data-end="70000">

<hr>

<input type="button" name="" value="生成" class="char2-btn" data-start="9600" data-end="9800">

<p id="p1">示例： ▼ ▲ ► ◄ </p>

<div id="result"></div>

相关文章