JS实现动态改变对话窗口和图片样式的聊天；

最新推荐文章于 2023-08-09 17:38:31 发布

Munger6

最新推荐文章于 2023-08-09 17:38:31 发布

阅读量2.7k

点赞数 1

分类专栏： JAVAScript 文章标签： javascript 动态聊天交互

JAVAScript 专栏收录该内容

19 篇文章

订阅专栏

本文通过一个具体的实例展示了如何使用HTML和JavaScript实现页面元素的动态交互。包括如何响应用户输入，动态更新页面内容以及简单的图像切换效果。此示例涵盖基本的DOM操作，如获取元素、创建新元素、设置属性等。

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





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #f4ffd7;
            overflow: scroll;
        }
        .na{
            width: 35px;
        }
    </style>
</head>
<body>
    <div id="div"></div>

    <img src="imgage/1.png" alt="" width="30px" id="img" index="0"/>
    <input type="text" id="inp"/>
    <input type="button" value="提交" id="btn"/>


    <script>
        var obtn = document.getElementById("btn");
        var oinp = document.getElementById("inp");
        var odiv = document.getElementById("div");
        var oimg = document.getElementById("img");
        var imgarr = ["imgage/1.png","imgage/2.png","imgage/3.png"];

        /*点击按钮，获取到文本框的值，将值加入到div里面*/
        obtn.onclick = function(){
            //获取到文本框的值
            var value = oinp.value;

            //创建一个p标签，将内容放在p标签内部，放在div里
            var op = document.createElement("p");
            var oa = document.createElement("a");
            var oimg1 = document.createElement("img");
            var index = oimg.getAttribute("index");
            var textNode = document.createTextNode(value);

            oimg1.setAttribute("src",imgarr[parseInt(index)]);
            oimg1.setAttribute("class","na");
            oa.innerHTML = "删除";
            oa.href="javascript:";
            oa.onclick = function(){
                //this表示当前的a标签对象，点击删除要删的是op
                //removeChild  找到对象删除里面的字节点
                odiv.removeChild(this.parentNode);
            }
            op.appendChild(oimg1);
            op.appendChild(textNode);
            op.appendChild(oa);

            odiv.appendChild(op);
            oinp.value = "";
        }

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

    </script>
</body>
</html>