练习2-前端--易笔记

效果图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            padding: 50px;
        }
        #p1{
            height: 300px;
            width: 400px;
            border: 1px solid red;
        }
        #inp{
            width: 220px;
            margin-top: 20px;
            margin-right: 20px;
        }
        #img1{
            width: 30px;
            height: 30px;
        }
        .pic{
            width: 30px;
            height: 30px;
        }
    </style>
</head>
<body>
    <p id="p1"></p>
    <img src="img/1.png" width="30px" height="30px" id="img1" index="0"/>
    <input type="text" id="inp"/>
    <input type="button" id="but" value="发送"/>
    <input type="button" id="but1" value="清除"/>

    <script>
        var oinp = document.getElementById("inp");
        var obut = document.getElementById("but");
        var op = document.getElementById("p1");
        var obut1 = document.getElementById("but1");
        var oimg = document.getElementById("img1");
        var imgarray = ["img/1.png","img/2.png","img/3.png"];

        obut.onclick = function(){
            var inptext = oinp.value;
            var oim = document.createElement("img");
            var op = document.createElement("p");
            var oa = document.createElement("a");
            var index = oimg.getAttribute("index");
            var textNode = document.createTextNode(inptext);
            oim.setAttribute("src",imgarray[parseInt(index)]);
            oim.setAttribute("class","pic");
            oa.innerHTML = " 删除";
            oa.onclick = function(){
                op.removeChild(this.parentNode);
            }
            op.appendChild(oim);
            op.appendChild(textNode);
            op.appendChild(oa);
            op.appendChild(op);
            oinp.value = "";
        }

        obut1.onclick = function(){

            var allnode = op.children;
            for(var i = 0; i < allnode.length; i++ ){
                op.removeChild(allnode[i]);
            }

        }

        oimg.onclick = function(){
            var i = this.getAttribute("index");
            if(i<imgarray.length-1){
                i++;
            }else{
                i = 0;
            }
            this.setAttribute("index",i);
            this.setAttribute("src",imgarray[i]);
        }


    </script>

</body>
</html>
时间：2016/12/17 9:31:00
