微博发布功能完善版

要求：正常输入，发布按钮变亮，点击可以正常发布，如果输入空格，按钮不亮，点击无任何反应，若空格后面有有效字符，按钮功能恢复正常，前面的空格不被显示。
效果展示：
jQuery仿微博发布功能
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪微博</title>
    <link href="../../../img/weibo4.ico" rel="icon">
    <script src="../../../jquery-3.4.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            background: url("../../../img/weibobg.png");
        }

        #container {
            position: relative;
            width: 1200px;
            height: 900px;
            margin: auto;
            top: 60px;
        }

        .head {
            width: 100%;
            height: 50px;
            position: fixed;
            z-index: 1;
        }

        .head img {
            width: 100%;
        }

        .left {
            position: absolute;
            left: 15%;
            top: 0;
            width: 160px;
            height: 710px;
        }

        .left img {
            width: 100%;
            height: 100%;
        }

        .right {
            position: absolute;

            right: 0;
            width: 240px;
            height: 710px;
        }

        .right img {
            height: 100%;
            width: 100%;
        }

        .center {
            width: 600px;
            height: 170px;
            position: absolute;
            left: 350px;
            top: 7px;
        }

        .center img {
            width: 100%;
            height: 100%;
        }

        .banner {
            position: absolute;
            width: 603px;
            height: 42px;
            top: 186px;
            left: 350px;
        }

        .banner img {
            width: 100%;
            height: 100%;
        }

        .footer {
            width: 600px;
            height: 500px;
            position: absolute;
            top: 235px;
            left: 350px;
        }

        .footer img {
            width: 100%;
        }

        #send {
            width: 574px;
            height: 75px;
            position: absolute;
            top: 50px;
            left: 362px;
            outline: none;
            border: none;
            resize: none; /*不可拉伸*/
        }

        #btn {
            position: absolute;
            top: 135px;
            left: 859px;
            height: 29px;
            width: 82px;
            border-radius: 2px;
            background-color: #ff8140;
            border: none;
            color: #ffffff;
            outline: none;
            filter: contrast(70%); /*对比度*/
        }

        /*padding top right bottom left*/
        .info {
            width: 600px;
            /*height: 130px;*/
            background-color: #ffffff;
            border-radius: 2px;
            position: relative;
            margin: 0 0 10px 0; /*top right bottom left*/
        }

        .info_head {
            width: inherit;
            height: 60px;
            position: relative;
        }

        .news {
            position: absolute;
            top: 670px;
            left: 1170px;
            height: 40px;
            width: 400px;
        }

        .news img {
            width: 50%;
            height: 100%;
        }

        .text {
            display: inline-block;
            width: 470px;
            position: relative;
            left: 80px;
            font-size: 13px;
            top: -5px;
            color: #333333;
            word-wrap: break-word; /*自动换行，自适应容器*/
            margin-bottom: 3px;
        }

        .info_footer {
            width: inherit;
            height: 40px;
            position: relative;
        }

        .info_footer hr { /*hr本身有border=1px，要更改颜色要先把原先的border去掉，再给一个高度，再加一个背景颜色方可实现hr的颜色更改*/
            border: none;
            height: 1px;
            background: #e7e7e7;
        }

        .info_head_head {
            display: inline-block;
            width: 50px;
            height: 50px;
            background: url("../../../img/weibo头像.jpg") no-repeat;
            background-size: 100% 100%;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            left: 20px;
        }

        .info_head_name {
            display: inline-block;
            width: 150px;
            height: 20px;
            /*border: 1px solid #333;*/
            position: absolute;
            top: 16px;
            left: 80px;
            font-weight: bold;
            font-size: 13px;
        }

        .info_head_time {
            display: inline-block;
            width: 150px;
            height: 20px;
            position: absolute;
            top: 36px;
            left: 80px;
            font-size: 11px;
            color: #b3b3b3;
        }

        .info_head_icon {
            display: inline-block;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 14px;
            right: 15px;
            background: url("../../../img/arrow_bottom.png") no-repeat;
            background-size: 80% 70%;
        }
    </style>
</head>
<body>
<div class="head">
    <img src="../../../img/weibo.png">
</div>
<div id="container">
    <div class="left">
        <img src="../../../img/weiboleft.png">
    </div>
    <div class="center">
        <img alt="" src="../../../img/weiboinner.png">
    </div>
    <div class="banner">
        <img src="../../../img/weibofoor.png"/>
    </div>

    <div class="footer">
        <img alt="" src="../../../img/weibobb.png" style="height: 470px">
        <!--        <div class="info">-->
        <!--            <div class="info_head">-->
        <!--                <span class="info_head_head"></span>-->
        <!--                <span class="info_head_name">Hello_hongbin</span>-->
        <!--                <span class="info_head_time">1秒前 来自 微博 weibo.com</span>-->
        <!--                <span class="info_head_icon"></span>-->
        <!--            </div>-->
        <!--            <span class="text">text</span>-->
        <!--            <div class="info_footer"><hr>-->
        <!--                <img src="../../../img/info_footer.png" alt="make sure文件地址是否正确">-->
        <!--            </div>-->
        <!--        </div>-->
    </div>
    <div class="right">
        <img src="../../../img/nweiboright.png">
    </div>
    <div class="news">
        <img alt="" src="../../../img/news.png">
    </div>
    <textarea id="send"></textarea>
    <button disabled="disabled" id="btn">发布</button>
    <!--    disabled:使按钮失效 当disabled=false时恢复正常-->
</div>
<script>
    $(function () {
        //发布按钮点击获取val并发布
        $('#btn').on('click', function () {
            let val = $('#send').val();
            //模板字符串` `
            let send = $(`<div class="info">
            <div class="info_head">
                <span class="info_head_head"></span>
                <span class="info_head_name">Hello_hongbin</span>
                <span class="info_head_time">1秒前 来自 微博 weibo.com</span>
                <span class="info_head_icon"></span>
            </div>
            <span class="text">${val}</span>
            <div class="info_footer"><hr>
                <img src="../../../img/info_footer.png" alt="make sure文件地址是否正确">
            </div>
        </div>`);
            send.prependTo(".footer");
            $('#send').val('');//发布完后，输入框清空
            $(this).prop('disabled', true).css('filter', 'contrast(70%)');
        });
        //空内容时发布按钮失效
        //实时监听事件1）propertychange只要当前对象的属性发生改变就会触发该事件
        //           2）input是标准的浏览器事件，一般应用于input元素，当input的value发生变化
        $('body').bind('input propertychange', function (start) {
            //输入的内容为空格的时候发布按钮失效(内容的长度和输入的空格长度一致)
            let $val = $('#send').val().length;
            let val = $('#send').val();
            let arr = [];
            for (let i = 0; i < $val; i++) {
                arr.push($('#send').val()[i]);//将对象里的每一个元素,添加到数组中
            }
            //console.log(arr);
            // console.log($("#send").val());
            //console.log($val);
            let reg = JSON.stringify(arr);//将对象转为json格式
            //console.log(reg);
            let str = reg.match(/\s/g);
            if (str === null) {
                str = [];
            }
            //console.log(str);//空格
            //console.log(str.length);//空格的长度
            //console.log($val);//输入内容的长度
            let $str = str.length;

            //匹配的是开头的空格当有字符出现时停止计数
            let b = [];
            for (let i = 0; i < $val; i++) {
                b.push(val[i]);
            }
            let neb = b.join('');
            //console.log(neb);
            let ok = neb.match(/^\s+/g);
            let json = JSON.stringify(ok);
            let $pk = json.match(/\s/g);
            //如果开头没有空格，正则返回null，浏览器会报错，执行下一行代码即可解决
            if($pk === null){
                $pk = []
            }
            let $pksum = $pk.length;
            //console.log($pksum);//开头的空格数
            //开头的空格数和全部的空格数相等时，#btndisabled
            //为解决开头空格，输入字符后#btn解开生效后再删除有效字符。这是因#btn已打开，就可以发送空白微博的问题。完美解决！

            if ($pksum === $str){
                $('#btn').css('filter','contrast(70%)')
                .prop('disabled',true);
            }
            let check = true;
            if ($val === $str) {
                check = false;
                $('#btn').css('filter', 'contrast(70%)');
            }
            if ($val > 0 && check) {
                $('#btn').prop('disabled', false).css('filter', 'contrast(100%)');
                //disabled 是属性，不是样式，不能用css获取
                //$('#send').val("");
            }
            if ($val === 0) {
                $('#btn').css('filter', 'contrast(70%)');
                $('#btn').prop('disabled', true)
            }
        })
    });
</script>
</body>
</html>
Hello Hongbin
发布了22 篇原创文章 · 获赞 6 · 访问量 2511
私信关注
微博发布功能完善版

猜你喜欢
