简单qq微博广播

以及事件控件中对插入表情@朋友进行输出,在js中先写出一个方法根据输出的控件进行 if判断字符超出140;最后新建一个div将输出的表情及@对象进行点击显示,最后提取js输出方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>腾讯微博</title>
    <style type="text/css">
        body {
            margin: 0px;
            background: url('img/wrapBg.jpg') no-repeat #EBF1F1;
        }

        #logo {
            margin: 30px 0 0 300px;
        }

        #myBody {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }

        #myBdLeft {
            width: 590px;
            height: 100%;
            background: #fff;
            float: left;
        }

        #talkBox {
            text-align: left;
            margin: 0 0 0 25px;
        }

        #msgTxt {
            width: 540px;
            height: 80px;
            overflow: hidden;
            font-family: Tahoma, Arial;
            font-size: 14px;
            border: 1px solid gray;
        }

        #talkBox h2 {
            text-align: left;
            padding: 0px;
            margin: 0px;
            font: normal normal normal 18px/29px 'MicroSoft YaHei', SimHei;
        }

        #funBox {
            width: 540px;
        }

            #funBox a {
                color: #000;
                text-decoration: none;
                font-size: 14px;
            }

        .creatNew, .atSome, .insertFace, .uploadPic, .uploadVideo {
            background-position: -170px -33px;
            display: inline-block;
            height: 16px;
            padding-left: 18px;
        }

        .countTxt {
            color: #999;
            float: right;
            line-height: 33px;
            margin: 0 15px 0 0;
        }

            .countTxt em {
                font-family: Georgia, Tahoma, Arial;
                font-size: 26px;
                position: relative;
                top: -5px;
                vertical-align: middle;
            }

        .sendBtn {
            float: right;
            margin: 0 20px 0 0;
            padding: 0px;
            background: url(img/bg1.png) -117px -165px no-repeat;
            line-height: 33px;
            margin-left: 14px;
            height: 30px;
            width: 112px;
            border: 0px;
            cursor: pointer;
        }

        #btnCloFri {
            cursor: pointer;
        }

        #myBdRight {
            background: #CCEBF4;
            width: 210px;
            height: 100%;
            float: right;
        }

        .Emoticonpictures {
            position: fixed;
            left: 28%;
            display: none;
            width: 200px;
            height: 400px;
            background-color: white;
        }
        .myfriend {
            display: none;
            position: fixed;
            left:27%;
            width: 120px;
            height: 180px;
            background-color:white;
        }
        ul {
            list-style:none;
        }
        li {
            cursor: pointer;
        }
    </style>

    <script src="../Scripts/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //点击表情出图片
            //插入表情
            var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '发呆', '4.gif': '得意', '5.gif': '流泪', '6.gif': '害羞', '7.gif': '闭嘴', '8.gif': '睡', '9.gif': '大哭', '10.gif': '尴尬', '11.gif': '发怒', '12.gif': '调皮', '13.gif': '呲牙', '14.gif': '惊讶', '15.gif': '难过', '16.gif': '酷', '17.gif': '冷汗', '18.gif': '抓狂', '19.gif': '吐', '20.gif': '偷笑', '21.gif': '可爱', '22.gif': '白眼', '23.gif': '傲慢', '24.gif': '饥饿', '25.gif': '困', '26.gif': '惊恐', '27.gif': '流汗', '28.gif': '憨笑', '29.gif': '大兵', '30.gif': '奋斗', '31.gif': '咒骂', '32.gif': '疑问', '33.gif': '嘘', '34.gif': '晕', '35.gif': '折磨', '36.gif': '衰', '37.gif': '骷髅', '38.gif': '敲打', '39.gif': '再见', '40.gif': '擦汗', '41.gif': '抠鼻', '42.gif': '鼓掌', '43.gif': '糗大了', '44.gif': '坏笑', '45.gif': '左哼哼', '46.gif': '右哼哼', '47.gif': '哈欠', '48.gif': '鄙视', '49.gif': '委屈', '50.gif': '快哭了', '51.gif': '阴险', '52.gif': '亲亲', '53.gif': '吓', '54.gif': '可怜', '55.gif': '菜刀', '56.gif': '西瓜', '57.gif': '啤酒', '58.gif': '篮球 ', '59.gif': '乒乓', '60.gif': '咖啡', '61.gif': '饭', '62.gif': '猪头', '63.gif': '玫瑰', '64.gif': '凋谢', '65.gif': '示爱', '66.gif': '爱心', '67.gif': '心碎', '68.gif': '蛋糕', '69.gif': '闪电', '70.gif': '炸弹', '71.gif': '刀', '72.gif': '足球', '73.gif': '瓢虫', '74.gif': '便便', '75.gif': '月亮', '76.gif': '太阳', '77.gif': '礼物', '78.gif': '拥抱', '79.gif': '强', '80.gif': '弱', '81.gif': '握手', '82.gif': '胜利', '83.gif': '抱拳', '84.gif': '勾引', '85.gif': '拳头', '86.gif': '差劲', '87.gif': '爱你', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '爱情', '91.gif': '飞吻', '92.gif': '跳跳', '93.gif': '发抖', '94.gif': '怄火', '95.gif': '转圈', '96.gif': '磕头', '97.gif': '回头', '98.gif': '跳绳', '99.gif': '挥手', '100.gif': '激动', '101.gif': '街舞', '102.gif': '献吻', '103.gif': '左太极', '104.gif': '右太极', '105.gif': '淡定', '106.gif': '晕', '107.gif': '不满', '108.gif': '睡觉', '109.gif': '小调皮', '110.gif': '咒骂', '111.gif': '发怒', '112.gif': '偷笑', '113.gif': '微笑', '114.gif': '震惊', '115.gif': '囧' };
            //在div中加入表情
            $.each(userFaces, function (index, dom) {
                $(".Emoticonpictures").append("<img src='faces/" + index + "' alt='" + dom + "'/>");
            });
            //点击表情控件
            $(".insertFace").click(function () {
                //将div表情userFaces显示出来
                $(".Emoticonpictures").toggle();
                //把朋友下控件关掉
                $(".myfriend").css("display", "none");
            });
            //点击图片将数据输出到text中
            $("img").click(function () {
                //定义一个变量
                var str = $("#msgTxt").val();
                //输出
                $("#msgTxt").val(str + "[" + $(this).attr("alt") + "]");     
                //使用方法进行改变剩余字符
                inpottxt();               
                //onkeyup = "if (event.keyCode==1) {document.all.img.click();}";
            });
            //点击朋友出@对象
            //点击朋友控件
            $(".atSome").click(function () {
                //将myfriend控件显示
                $(".myfriend").toggle();
                //关闭表情控件
                $(".Emoticonpictures").css("display", "none");
            });
            //鼠标经过改变颜色

            //点击li添加到text文本
            $("li").click(function () {
                //定义一个变量
                var stl = $("#msgTxt").val();
                //输出
                $("#msgTxt").val(stl + $(this).text());
                //使用方法改变字符
                inpottxt();               
            });
            //执行键盘事件
            $("#msgTxt").on("input", function () {
                inpottxt();
            });
            //输入与超出
            function inpottxt() {
                //定义一个变量来计算字符数
                var overstep = $("#msgTxt").val().length;
                //if判断字数是否大于140
                if (overstep > 140) {
                    //输出字符超出字体
                    $(".countTxt").html("你已超出<em>" + parseInt(overstep - 140) + "</em>个字");
                    //修改颜色
                    $("em").css("color", "red");
                }
                //如果不超过输出
                else {
                    //输出还剩余字符
                    $(".countTxt").html("还能再输入<em>" + parseInt(140 - overstep) + "</em>个字");
                    //修改颜色
                    $("em").css("color", "#999");
                }

            };
        });   
    </script>
</head>
<body>
    <img id="logo" src="img/b3_100901.png" alt="" />
    <center>
        <div id="myBody">
            <div id="myBdLeft">
                <div id="talkBox">
                    <h2>
                        <a>夏天来了,你懂得......</a></h2>
                    <textarea id="msgTxt" ></textarea>
                    <div id="funBox">
                        <a href="javascript:void(0);" class="creatNew">话题</a> <a href="javascript:void(0);"
                            class="atSome">朋友</a>          
                        <div class="myfriend">
                            <ul>
                                <li>@老梁</li>
                                <li>@包子</li>
                                <li>@红霞</li>
                                <li>@锐老</li>
                                <li>@李呼啸</li>
                                <li>@祝新有</li>
                            </ul>
                        </div>
                        <a href="javascript:void(0);" class="insertFace">表情</a>
                        <div class="Emoticonpictures"></div>
                        <a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);"
                            class="uploadVideo">视频</a>
                    </div>
                    <div id="sendBox">
                        <input type="button" class="sendBtn" value="" />
                        <span class="countTxt">还能输入<em id="countTxtnumber">140</em>字</span>
                        
                    </div>
                </div>
            </div>
            <div id="myBdRight">
            </div>
        </div>
    </center>
</body>
</html>

 

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页