JS实习生

导航

论坛发表制作 

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <meta charset="utf-8">
    <!-- <link rel="stylesheet" href="css/reset.css"> -->
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        #box{
            position:relative;
            width:500px;
            height:130px;
            padding-top:10px;
            background-color:#ccc;
            margin:50px auto;
            border-radius:5px;
        }
        #box #tx{
            display:block;
            width:480px;
            height:80px;
            margin:0px 10px;
            border-radius:5px;
            resize:none;
        }
        #box p{
            position:relative;
            float:left;
            width:30px;
            height:30px;
            margin:10px 10px;
        }
        #box p img{
            display:none;
            position:absolute;
            width:100%;
            height:100%;
            border-radius:5px;
            cursor:pointer;
        }
        #box #btn{
            float:right;
            width:100px;
            height:30px;
            margin:10px 10px;
            background-color:#FF8000;
            border-radius:5px;
            line-height:30px;
            text-align:center;
            color:#fff;
            font-size:12px;
            cursor:pointer;
        }
        #wor{
            width:500px;
            margin:0 auto;
        }
        #wor ul li{
            padding:10px 0;
            border-bottom:1px solid #d0d0d0;
        }
    /*    #wor li::after{
            content:'';
            display:block;
            clear:both;
        }*/
        #wor li img{
            /*float:left;*/
            width:45px;
            height:45px;
            border-radius:5px;
        }
        #wor li p{
            float:right;
            width:450px;
        }
    </style>
</head>
<body>
    <div id='box'>
        <textarea id='tx'></textarea>
        <p>
            <img style="display:block" src="images/1.jpg">
            <img src="images/2.jpg">
        </p>
        <div id='btn'>发表</div>
    </div>
    <div id='wor'>
        <ul>
        <!--     <li>
                <img src="images/2.jpg">
                <p>aaaaaa</p>
            </li>
            <li>
                <img src="images/2.jpg">
                <p>aaaaaa</p>
            </li>
            <li>
                <img src="images/2.jpg">
                <p>aaaaaa</p>
            </li> -->
        </ul>
    </div>
</body>
<script>
        var oBtn = document.getElementById('btn');
        var oTx = document.getElementById('tx');
        var oIamg = document.querySelectorAll('#box p img');
        var oUl = document.querySelector('#wor ul');
        var src = oIamg[0].src;//第一张图片路径

        oBtn.onclick = function(){
            var text = oTx.value;
            oUl.innerHTML += '<li><img src="'+src+'"><p>'+text+'</p></li>'
            oTx.value = ''; 
        }
        oIamg[0].onclick = function(){
            this.style.display = 'none';
            oIamg[1].style.display = 'block';
            src = oIamg[1].src;
        }
        oIamg[1].onclick = function(){
            this.style.display = 'none';
            oIamg[0].style.display = 'block';
            src = oIamg[0].src;
        }
</script>
</html>

 

posted on 2018-04-13 01:29  多特  阅读(133)  评论(0)    收藏  举报