【JavaScript】纯js获取元素-小案例:简易对话

2018-06-24 00:48:27来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

案例1:效果

代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>添加对话</title>
 6     <style type="text/css">
 7         body,ul,p{margin: 0;padding: 0;}
 8         ul{list-style: none;}
 9         img{border: 0; vertical-align: middle;}
10         .box{
11             float: left;
12             width: 400px;
13             margin: 50px;
14             border: 2px solid black;
15         }
16         .box .title{
17             position: relative;
18             width: 100%;
19             height: 30px;
20             background-color: black;
21             line-height: 30px;
22             color: white;
23         }
24         .box .title #btn{
25             position: absolute;
26             right: 10px;
27             background: none;
28             border: 0;
29             font-size: 25px;
30             color: white;
31             cursor: pointer;
32         }
33         .box .title span{
34             margin: 0 10px;
35         }
36         .box .title #conin{
37             vertical-align: middle;
38         }
39         .box .title #add{
40             background-color: orange;
41             border: 0;
42             color: white;
43             cursor: pointer;
44             vertical-align: middle;
45         }
46         .box .title #textbox{
47             display: none;
48             /*display: inline-block;*/
49         }
50         .box ul p{
51             margin: 0 10px;
52             padding: 2px 0;
53             border-bottom: 1px solid #eee;
54             font-size: 14px;
55         }
56     </style>
57 </head>
58 <body>
59    <div class="box">
60        <div class="title">
61            <span>最新动态</span>
62            <div id="textbox">
63                 <input type="text" id="conin" class="conin" />
64                 <input type="button" id="add" value="添加" />
65            </div>
66            <button title="新建" id="btn" >+</button>
67        </div>
68        <ul id="body">
69        </ul>
70    </div>
71    <script type="text/javascript">
72    //box
73         var Otxtbox = document.getElementById("textbox");
74         var Oin = document.getElementById("conin");
75         var Oadd = document.getElementById("add");
76 
77         var Obtn = document.getElementById("btn");
78 
79         var Obody = document.getElementById("body");
80         //显示输入框
81         Obtn.onclick = function(){
82             Otxtbox.style.display = "inline-block";
83         };
84         //新建li,清空输入框
85         Oadd.onclick = function(){
86             var txt = Oin.value;
87             if(txt){
88                 Obody.innerHTML += "<li><p>" + txt + "</p></li>";
89                 Oin.value = "";
90             }else{
91                 alert("请输入!");
92             }
93         };
94    </script>
95 </body>
96 </html>
View Code

原理:

这里有两个点击事件,首先看第一个:点击+号显示输入框;

1、获取+这个元素,id为btn,同时获取输入框,id为textbox;给btn添加onclick事件,事件直接控制输入框的样式display即可。

2、获取添加按钮,id为add,给按钮添加onclick事件,点击新增列表项,依次添加到列表ul的innerHTML中即可。列表项中的文字用输入框内的value值代替。

 案例2:效果

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>添加对话</title>
    <style type="text/css">
        body,ul,p{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{border: 0; vertical-align: middle;}
        .box2{
            float: left;
            width: 300px;
            margin: 50px;
        }
        .box2 .top{
            width: 100%;
            height: 100px;
            padding: 10px;
            background-color: #ddd;
            border-radius: 4px;
        }
        .box2 .top .txt{
            height: 60px;
            width: 98%;
            margin-bottom: 10px;
            resize: none;
        }
        .box2 .top span{
            display: inline-block;
            width: 25px;
            height: 25px;
            background: url("images/emoji3.png") no-repeat center center/cover;
            cursor: pointer;
        }
        .box2 .top span.other{
            background:url("images/emoji1.png") no-repeat center center/cover;
        }
        .box2 .top .send{
            float: right;
            padding: 2px 15px;
            background-color: orange;
            border: 0;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .box2 ul li{
            margin-top: 10px;
            padding-bottom: 2px;
            border-bottom: 1px solid #eee;
        }
        .box2 ul li img{
            width: 25px;
            height: 25px;
        }
        .box2 ul li span{
            vertical-align: middle;
            font-size: 14px;
        }
    </style>
</head>
<body>
   <div class="box2">
       <div class="top">
           <textarea class="txt" id="txt"></textarea>
           <span id="photo"></span>
           <input type="button" value="发送" class="send" id="send"/>
       </div>
       <ul id="messages">
       </ul>
   </div>
   <script type="text/javascript">
    //box2
        var Otxt = document.getElementById("txt");
        var Osend = document.getElementById("send");
        var Omes = document.getElementById("messages");

        var Ophoto = document.getElementById("photo");
        //图片路径数组
        var aImg = ["images/emoji1.png","images/emoji3.png"];
        //记录当前图片
        var nNum = 1;

        //图片切换
        Ophoto.onclick = function(){
            if(nNum){
                nNum--;
                this.setAttribute("class", "other");
            }else{
                nNum++;
                this.removeAttribute('class');
            }
        }
        //新增消息列表项li
        Osend.onclick = function(){
            if(Otxt.value){
                Omes.innerHTML += "<li><img src='" + aImg[nNum] + "' alt='images'/><span>"
                 + Otxt.value + "</span></li>";
                Otxt.value = "";
            }else{
                alert("请输入信息!");
            }
        }
   </script>
</body>
</html>
View Code

原理:

页面中两个出发事件都为点击事件:

1、点击发送按钮,给ul添加列表项li,其中图片为当前输入框中的图片,文本为输入框中的value;

2、输入框中图片点击切换,采用给不同样式设置不同背景图片,用js更改class名称来实现。

3、采用计数器来记录当前图片号num,将图片路径存储到一个数组中,每次切换图片的时候更改num值。新建列表项时用num来取当前图片。

注意:

   获取元素时:

    * ID获取时,前缀必须是  document.
            * 其他方法获取时,前缀可以是某一个节点对象,表明不是从所有节点里面找,而是只从该节点子元素里面找,节省资源。


            通过ID获取
                document.getElementById()

            通过class获取,不兼容IE8及以下
                .getElementsByClassName()
                获取的是个 类数组 (类似于数组,可以用下标,可以用.length)

            通过 标签名 获取
                .getElementsByTagName()
                获取的是个 类数组

            通过 name 获取
                .getElementsByName()
                获取的是个 类数组


            通过 选择器 找,不兼容IE7及以下
                .querySelector()       直接获取单个节点对象
                .querySelectorAll()    获取类数组

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:图解Fiddler如何抓手机APP数据包过滤抓取

下一篇:js导出Excel表格超出26位英文字符解决方案ES6