练习2

最新推荐文章于 2024-08-27 09:03:46 发布

loc_c

最新推荐文章于 2024-08-27 09:03:46 发布

阅读量371

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Mr_Cccc/article/details/53677368

本文介绍了一个使用HTML和JavaScript创建的简单应用案例，通过图片切换和文本输入展示了基本的网页元素操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            padding: 50px;
        }
        #div1{
            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>
    <div id="div1"></div>
    <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 odiv = document.getElementById("div1");
        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(){
                odiv.removeChild(this.parentNode);
            }
            op.appendChild(oim);
            op.appendChild(textNode);
            op.appendChild(oa);
            odiv.appendChild(op);
            oinp.value = "";
        }

        obut1.onclick = function(){

            var allnode = odiv.children;
            for(var i = 0; i < allnode.length; i++ ){
                odiv.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>