发布说说案例

20190107134009.png

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
ul{ list-style:none}
.wrap{ width:500px;font-size:14px; margin:50px auto}
.countTxt{ display:block; text-align:right; padding-bottom:10px;}
.countTxt em{ font-size: 16px; font-weight: bold; font-style: normal; padding: 0 5px}
.countTxt .red{ color: red;}
textarea{ padding:10px; display:block; width:480px; resize:none; height:100px; border:1px solid #ccc; font-size:14px}
.commonBtn{ height:40px; width:100px; border:1px solid #ccc; margin:10px 0 0 380px}
hr{ margin:20px 0}
.talkList li{ border:1px solid #ccc; padding:25px 20px 20px; border-radius:10px; position:relative; margin-bottom:20px}
.talkList li p{min-height:50px; margin-bottom:10px; word-break:break-all}
.talkList li .toolsBar{ text-align:right}
.talkList li .toolsBar span{ margin-left:20px; cursor:pointer}
.talkList li time{ position:absolute; top:10px; right:15px; color:#ccc;}
</style>

<script src="js/jquery-1.11.3.js"></script>
<script>
    
/*    function isChinese(str){  //判断是不是中文,只能判断一个字符
        var reCh=/[u00-uff]/;
        return !reCh.test(str);
    };
    
    console.log(isChinese('火'))
    console.log( isChinese("1")  )
    
    var str = "飞机1撒3地4方4";
    for(var i=0;i<str.length;i++){
        console.log( isChinese(str[i])  )
    }
*/    

$(function(){
    
    //----------------------判断限制字符大小 开始-------------------------
    function isChinese(str){  //判断是不是中文
        var reCh=/[u00-uff]/;
        return !reCh.test(str);
    };
    
    $('textarea').keyup(function(){        //绑定到 keyup 事件
        var txtval=$(this).val();        //获取到textarea的val内容
        
        $('.commonBtn').prop('disabled',txtval=="" ? true:false ) ;//设定按钮属性
        
        var str_length=0; //初始定义长度为0
        
        for(var i=0;i<txtval.length;i++){
            if(isChinese(txtval.charAt(i))){
                str_length=str_length+2;        //中文为2个字符
            }else str_length=str_length+1;        //英文一个字符
        };
        str_length=Math.ceil(str_length/2);   //中英文相加除2 向上舍入取整数(一个中文+一个英文)

        var count=140-str_length;
        if(count<0){
            $('.countTxt').html('超出<em class="red">'+Math.abs(count)+'</em>字'); //Math.abs取绝对值
            $('.commonBtn').prop('disabled',true);    //禁止点击按钮
        }else{
            $('.countTxt').html('您还可以输入<em>'+count+'</em>字');
        }
    });
    
//----------------------判断限制字符大小 结束-------------------------
    
    
    //-------------发布说说点击事件----------------------
    $('.commonBtn').click(function(){
        var txtVal=$('textarea').val();
        
        var oDate=new Date();
        //取出年月日
        var time=oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate();
        var html='<li><p>'+txtVal+'</p>'+
            '<div class="toolsBar" onselectstart="return false" style="-moz-user-select:none">'+
                '<span class="ding">顶 <b>0</b></span>'+
                '<span class="cai">踩 <b>0</b></span>'+
            '</div>'+
            '<time>'+time+'</time></li>';
        $('.talkList').prepend(html);    //html添加到$('.talkList')中

        //清空输入框
        $('textarea').val("");
        $('.countTxt').html('您还可以输入<em>140</em>字');
        $('.commonBtn').prop('disabled',true);
        
    });
    

    //事件委派 顶 踩-----------------------------------------------
    $('.talkList').on('click','.ding,.cai',function(){
        var oEm=$(this).children('b');
        //var num=parseInt(oEm.text());
        //oEm.text(num+1);
        oEm.text(oEm.text()-0+1); //隐性转换类型
    });

});

    
</script>
</head>
<body>
<div class="wrap">
    <form>
        <span class="countTxt">您还可以输入<em>140</em>字</span>
        <textarea></textarea>
        <button class="commonBtn" id="commonBtn" disabled type="button">发表说说</button>
    </form>
    <hr>
    <ul class="talkList" id="talkList">
<!--        <li>
            <p>adsfa asdf asdf asdf</p>
            <div class="toolsBar">
                <span>顶 <b>0</b></span>
                <span>踩 <b>0</b></span>
            </div>
            <time></time>
        </li>
    -->
    </ul>
</div>

</body>
<script type="text/javascript">
    
</script>
</html>

标签: jQuery案例

添加新评论