留言板实现 Jquery 评论字数计数-折腾ing

   今天折腾了一种 Jquery 实现的对评论字数进行实时统计计数的功能。在留言板页面加上了这个效果,有兴趣的朋友可以先去留言板看看效果。
接下来说方法:

1、加载 Jquery

这个是必须的,在header.php或footer.php中加入(已经加入了就跳过)
<script src="<?php echo BLOG_URL; ?>lib/js/jquery/jquery-1.2.6.js" type="text/javascript"></script>

2、Jquery 的执行脚本

<script type="text/javascript" >
$(function(){
    var $comment = $(’#comment’);
    var $str  =  $(’#str’);
    var time;
    $comment.focus(function(){
        time = window.setInterval( substring,100 );
    });   
    function substring() {
        var val = $comment.val();
        var length = val.length;
        if( $str.html() != (length) ){
            if(length==0){
                $("#wordcount")[0].firstChild.nodeValue = "您已输入0";
                $str.html(length);
            }else{
                $("#wordcount")[0].firstChild.nodeValue = "您已输入";
                $str.html(length);
            }
        }
    }
});
</script>

这个一定要放在 Jquery 的后面。

3、HTML 部分

在相应的皮肤中找module.php中加入

<p id="wordcount">
    您已输入<span id="str">0</span>
</p>

这部分代码就是要 wordcount 和 str 这两个 id 和第二步中的相匹配,包括第二步中的 #comment 也要和评论框的 id 相匹配,否则获取不到。 

好了,就写到这里吧,也不多写了,重点都说到了,接下去就看各位的悟性了,哈哈~

您可以选择一种方式赞助本站

目前评论:13   其中:访客  9   博主  4

  1. 2010年10月01日 13:50  沙发
  2. 2010年10月01日 18:50  板凳
  3. 2010年10月01日 19:40  地板
  4. 2010年10月01日 11:31  4楼
  5. 2010年10月01日 11:23  5楼
  6. 2010年10月01日 17:16  6楼
  7. avatar Flyer
    2010年10月01日 14:57  7楼
  8. 2010年10月01日 18:18  8楼
  9. 2010年10月01日 18:44  9楼
  10. 2010年10月01日 15:37  10楼
  11. 2010年10月01日 16:31  11楼
  12. avatar Flyer
    2010年10月01日 13:13  12楼
  13. avatar Flyer
    2010年10月01日 13:20  13楼
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: