Astray
/
release_Interact.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>发布动态</title>
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate.css"/>
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate_md.css"/>
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate_sm.css"/>
    <link rel="stylesheet" href="css/release_Interact_sm.css">
    <link rel="stylesheet"href="css/release_Interact_md.css">
   </head>
<body>
<!--发布文章-->
<div class="nav">
    <a class="logo_Astray">Astray</a>
    <ul class="nav_ul">
        <a href="index.html"><li class="nav_li nav_action">首页</li></a>
        <a href="article_Index.html"><li class="nav_li">文章</li></a>
        <a href="question_Index.html"><li class="nav_li">问答</li></a>
        <a href="test_Index.html"><li class="nav_li">测试</li></a>
        <a href="FM_Index.html"><li class="nav_li">FM</li></a>
        <li class="nav_menu">
            <ul class="nav_drop">
                <li class="item">更多<span class="triangle"></span></li>
                <a href="interact_List.html"><li class="item">动态</li></a>
                <a href=""><li class="item">选项2</li></a>
            </ul>
        </li>
    </ul>
    <ul class="nav_ul_info">
        <li class="nav_ul_info_li">
            <a  class="nav_ul_info_img" href="user_Center.html">
                <img src="img/headPhoto.png" width="2rem">
            </a>
            <div id="user_infoBox">
                <ul>
                    <li>
                        文章<br/>
                        <span>11</span>
                    </li>
                    <li>
                        提问<br/>
                        <span>11</span>
                    </li>
                    <li>回答<br/>
                        <span>11</span>
                    </li>
                    <li>收藏<br/>
                        <span>11</span>
                    </li>
                </ul>
                <dl>
                    <dt>称号：</dt>
                    <dd><img src="img/jia.png" alt=""></dd>
                    <dd><img src="img/jia.png" alt=""></dd>
                </dl>
                <div>
                    <a>签到</a>
                    <a href="user_Info_baseInfo.html">前往个人信息>>></a>
                </div>
            </div>

        </li>
        <li class="nav_ul_info_li"><a onclick="javascript:window.open('user_chat.html','chat','top=100%,left=100%,status=no,location=no,menubar=no, scrollbars=no,')">消息</a></li>
        <li class="nav_ul_info_li"><a href="user_Info_systemMessage.html">通知</a></li>
    </ul>
</div>
<div class="BOX">
    <div class="BOX1">
        <div class="release_title">
            <span>发布动态</span>
        </div>

        <div class="release_picture">
            <div><span>动态图片：</span></div>
            <input type="file" id="changeimg" onchange="fileReader(this)" style="display: none"/>
            <div id="d">
                <img id="img" src="img/jia.png" />
            </div>
        </div>
        <div class="release_content">
            <div><span>动态内容：</span></div>
            <div><textarea class="release_contents"></textarea></div>
        </div>
        <div id="tabs">
            <div class="tab">
                <input type="text" placeholder="编辑标签" maxlength="4" class="tabContent">
                <span class="tabClose">x</span>
            </div>
            <input type="button" value="+" id="addTab">
        </div>
        <div class="release_button">
            <button class="release_button_post"><a href="interact_List.html">发布</a></button>
            <button class="release_button_cancel"><a href="user_Center.html">取消</a></button>
        </div>
    </div>
    <div class="BOX2">
        <div class="release_heading">
        <div class="release_heading_title">
            <span>发布你的动态</span>
        </div>
        <div class="release_heading_content">
            <span>每天在这里，写下今天让你温暖，让你感恩的事情，给自己坚强的力量感受每一天。</span>
        </div>
            <div></div>
        </div>
        <div class="release_heading_other">
            <a href="interact_List.html"><div><img src="img/headPhoto.png"></div>
           <div> <span>看看别人的动态</span></div>

        </div></a>
    </div>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="js/jquery-3.2.1.js"></script>
<script>
    $("#img").click(function () {
        $("#changeimg").trigger('click');
    });
    function fileReader(obj){
        var file = obj.files;
        var img = document.getElementById("img");
        var reader = new FileReader();// 操作图片
        if(/image/.test(file[0].type)){
            reader.readAsDataURL(file[0]);
        }else {
            $("#img").attr("src","img/jia.png");
            alert('请选择图片!');
            obj.value = "";
            return;
        }
        // 图片加载错误
        reader.onerror = function(){
            document.write("图片加载错误");
        }
        // 图片加载完成
        reader.onload = function(){
            img.src = reader.result;
        }
    }
    var tab=$(".tab").prop("outerHTML");
    //添加标签
    $("#addTab").click(function(){
        var flag=true; //没有标签为空
        $(".tabContent").each(function(){
            if($(this).val()==""){ //有标签为空
                $(this).focus();
                flag=false;
                return;
            }
        });
        if(flag) {
            if ($(".tabContent").length >= 3) { //超出标签数量
                alert("文章最多3个标签！");
                return;
            }
            $(this).before(tab);
        }
    });
    //移除标签
    $("body").on("click",".tabClose",function(){
        $(this).parent().remove();
    });

</script>
</html>