zoukankan html css js c++ java

js-DOM ～ 04. BOM：浏览器对象模型window. 、定时器、在线用户、祝愿墙、BOM的内置方法内置对象

multiple. select列表多选
触发事件后调用有参数的函数要先创建一个函数，然后在函数内调用执行函数
Array.from（伪数组）：伪数组变为真数组
indexOf（）：查询字符的索引

a) indexOf（‘abcde’）

i. indexOf（‘a’）的索引是0

ii. indexOf（‘abc’）的索引是0，按照第一个字符的索引

iii. indexOf（‘ac’）的索引是-1，查找不到ac连续的字符

iv. indexOf（‘f’）的索引是-1，查询不到返回-1

BOM：浏览器对象模型

window是javascript的顶级对象
window内置很多方法
window.open（url，target，paranm）

a) url：地址

　　b) target：打开新窗口的方式，_blank/

　　5. window.close()关闭窗口

　　6. ocation.href = “跳转到的新网址”

　　7. setTimeout（function （）{},5000(单位：毫秒)）

　　　　a) 炸弹定时器，只执行一次执行完报废

　　8. history 历史记录管理

　　　　a) back：回退

　　　　b) go（-1）；0 是刷新

定时器

刷新页面，
固定时间执行一段代码
定义方法

　　　　a) setInterval（匿名函数，间隔时间（单位毫秒））；

　　　　b) senInterval（函数，间隔时间）；

　　　　c) setInterval（“函数”，间隔时间）

　　3. clearInterval（定时器的一个ID值，由setInterval返回）

　　4. script中只能获取行内式样式，内联和内的无法获取

　　//返回值，清除定时器。
　　var num = 1;

　　//setInterval他的返回值就是定时器的名字
　　var timer = setInterval(function () {
　　console.log(num);
　　num++
　　if(num===10){
　　//如何停止定时器呢？？？
　　clearInterval(timer);
　　}
　　},500);


 window.onload = function () {
            //获取相关元素
            var imgArr = document.getElementsByTagName("img");
            //设置定时器
            setTimeout(fn,5000);
            function fn(){
                imgArr[0].style.display = "none";
                imgArr[1].style.display = "none";
            }
        }

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         select {
 8              170px;
 9             height: 200px;
10             font-size: 16px;
11             background-color: #a4ff43;
12         }
13     </style>
14 </head>
15 <body>
16     <select name="" id="sel1" size="10" multiple>
17         <option value="0">香蕉</option>
18         <option value="1">苹果</option>
19         <option value="2">鸭梨</option>
20         <option value="3">葡萄</option>
21     </select>
22     <input type="button" value=">>>"/>
23     <input type="button" value="<<<"/>
24     <input type="button" value=">"/>
25     <input type="button" value="<"/>
26     <select name="" id="sel2" size="10" multiple>
27 
28     </select>
29 
30     <script>
31         //需求1：点击>>>和<<<两个按钮，所有的子元素都跑到对方的标签中。
32         //步骤：
33         //1.获取相关元素，并绑定事件
34         //2.获取子元素，整体的添加到另外一边的标签中
35 
36         //1.获取相关元素，并绑定事件
37         var sel1 = document.getElementById("sel1");
38         var sel2 = document.getElementById("sel2");
39         var inpArr = document.getElementsByTagName("input");
40 
41         inpArr[0].onclick = function () {
42             //2.获取子元素，整体的添加到另外一边的标签中
43             var arr = sel1.children;
44             //循环遍历放入另一侧的select标签中
45             for(var i=arr.length-1;i>=0;i--){
46                 //放入sel2中，不能用push，要用appendChild;
47                 sel2.appendChild(arr[0]);
48             }
49         }
50         //同理
51         inpArr[1].onclick = function () {
52             //2.获取子元素，整体的添加到另外一边的标签中
53             var arr = sel2.children;
54             //循环遍历放入另一侧的select标签中
55             for(var i=arr.length-1;i>=0;i--){
56                 //放入sel2中，不能用push，要用appendChild;
57                 sel1.appendChild(arr[0]);
58             }
59         }
60 
61         //需求2：点击>和<两个按钮，所有被选定的子元素都跑到对方的标签中。
62         //思路：获取所有子节点，然后循环判断，只有selected属性值为true的选项才能被添加到右侧的select标签中
63         inpArr[2].onclick = function () {
64             //获取所有子节点
65             var arr = sel1.children;
66             //遍历判断数组中的元素selected属性为true的，添加到相反的select标签中
67             for(var i=arr.length-1;i>=0;i--){
68                 if(arr[i].selected === true){
69 //                    arr[i].selected = false;
70                     sel2.appendChild(arr[i]);
71                 }
72             }
73         }
74         //同理
75         inpArr[3].onclick = function () {
76             //获取所有子节点
77             var arr = sel2.children;
78             //遍历判断数组中的元素selected属性为true的，添加到相反的select标签中
79             for(var i=arr.length-1;i>=0;i--){
80                 if(arr[i].selected === true){
81 //                    arr[i].selected = false;
82                     sel1.appendChild(arr[i]);
83                 }
84             }
85         }
86 
87 
88     </script>
89 
90 
91 </body>
92 </html>

选中的value跑到另外一个表格中（简单版）

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         select {
 8              170px;
 9             height: 200px;
10             font-size: 16px;
11             background-color: #a4ff43;
12         }
13     </style>
14 </head>
15 <body>
16     <select name="" id="sel1" size="10" multiple>
17         <option value="0">香蕉</option>
18         <option value="1">苹果</option>
19         <option value="2">鸭梨</option>
20         <option value="3">葡萄</option>
21     </select>
22     <input type="button" value=">>>"/>
23     <input type="button" value="<<<"/>
24     <input type="button" value=">"/>
25     <input type="button" value="<"/>
26     <select name="" id="sel2" size="10" multiple>
27 
28     </select>
29 
30     <script>
31         //需求1：点击>>>和<<<两个按钮，所有的子元素都跑到对方的标签中。
32 
33         var sel1 = document.getElementById("sel1");
34         var sel2 = document.getElementById("sel2");
35         var inpArr = document.getElementsByTagName("input");
36 
37         //如果不带参数，我们可以直接绑定一个函数名。但是因为带有参数，所以我们需要匿名函数去调用这个函数。
38         inpArr[0].onclick = function () {
39             fn1(sel1,sel2);
40         }
41         inpArr[1].onclick = function () {
42             fn1(sel2,sel1);
43         }
44         inpArr[2].onclick = function () {
45             fn2(sel1,sel2);
46         }
47         inpArr[3].onclick = function () {
48             fn2(sel2,sel1);
49         }
50         //封装的时候要注意，第一个按钮先获取的是sel1，第二个按钮先获取的是sel2;
51         function fn1(ele1,ele2) {
52             var arr = ele1.children;
53             for(var i=arr.length-1;i>=0;i--){
54                 ele2.appendChild(arr[0]);
55             }
56         }
57         //把sel1和sel2设置成两个形参，通过调用的时候先后传递达成不一样的需求
58         function fn2(ele1,ele2) {
59             var arr = ele1.children;
60             for(var i=arr.length-1;i>=0;i--){
61                 if(arr[i].selected === true){
62                     arr[i].selected = false;
63                     ele2.appendChild(arr[i]);
64                 }
65             }
66         }
67 
68 
69     </script>
70 
71 
72 </body>
73 </html>

选中的value跑到另外一个表格中（封装版）

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         select {
  8              150px;
  9             height: 200px;
 10             background-color: #7bff68;
 11         }
 12     </style>
 13 </head>
 14 <body>
 15 <select size="10" name="aaa" id="sel1" multiple="multiple">
 16     <option value="0">1香蕉</option>
 17     <option value="1">2苹果</option>
 18     <option value="2">3大鸭梨</option>
 19     <option value="3">4草莓</option>
 20 </select>
 21 
 22 <input type="button" value=">>>"/>
 23 <input type="button" value="<<<"/>
 24 <input type="button" value=">"/>
 25 <input type="button" value="<"/>
 26 
 27 <select size="10" name="bbb" id="sel2" multiple="multiple">
 28 
 29 </select>
 30 
 31 <script>
 32     //需求：点击按钮把对应的选中项移动到另一侧。
 33     //技术点：如果移动单一的选项，那么看看哪个选项是有selected的。
 34             //如果移动所有的选项，那么直接把sel1中的所有选项放入sel2中。
 35 
 36     //步骤：
 37     //1.获取事件源和相关元素
 38     //2.绑定事件
 39     //3.书写事件驱动程序
 40 
 41     //步骤：
 42     //1.获取事件源和相关元素
 43     var sel1 = document.getElementById("sel1");
 44     var sel2 = document.getElementById("sel2");
 45     var inpArr = document.getElementsByTagName("input");
 46 
 47     //2.绑定事件(push和appendChild用法相似：但是一个是控制数组，一个是控制元素节点)
 48     inpArr[0].onclick = function () {
 49         var optArr = sel1.children;
 50         for(var i=0;i<optArr.length;){
 51             sel2.appendChild(optArr[i]);
 52         }
 53     }
 54 
 55     //为第二个按钮绑定事件
 56     inpArr[1].onclick = function () {
 57         var optArr = sel2.children;
 58         for(var i=0;i<optArr.length;){
 59             sel1.appendChild(optArr[i]);
 60         }
 61     }
 62     inpArr[2].onclick = function () {
 63         var optArr = sel1.children;
 64         for(var i=optArr.length-1;i>=0;i--){
 65             if(optArr[i].selected==true){
 66                 optArr[i].selected=false;
 67                 sel2.appendChild(optArr[i]);
 68             }
 69         }
 70         //获取sel2中的子元素变成真数组，然后排序
 71         var aaa = Array.from(sel2.children).sort(function (a,b) {
 72             return a.value-b.value;
 73         });
 74         //删除素有子元素
 75         for(var i=0;i<sel2.children.length;i++){
 76             sel2.removeChild(sel2.children[i]);
 77         }
 78         //把排好序的数组添加到sel2中
 79         for(var i=0;i<aaa.length;i++){
 80             sel2.appendChild(aaa[i]);
 81         }
 82     }
 83     inpArr[3].onclick = function () {
 84         var optArr = sel2.children;
 85         for(var i=optArr.length-1;i>=0;i--){
 86             if(optArr[i].selected==true){
 87                 optArr[i].selected=false;
 88                 sel1.appendChild(optArr[i]);
 89             }
 90         }
 91         var aaa = Array.from(sel1.children).sort(function (a,b) {
 92             return a.value-b.value;
 93         });
 94         for(var i=0;i<sel1.children.length;i++){
 95             sel1.removeChild(sel1.children[i]);
 96         }
 97         for(var i=0;i<aaa.length;i++){
 98             sel1.appendChild(aaa[i]);
 99         }
100     }
101 </script>
102 
103 </body>
104 </html>

选中的value跑到另外一个表格中（终极版）

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         * {
  8             word-wrap: break-word;
  9         }
 10         .wp {
 11              730px;
 12             margin: 0px auto;
 13         }
 14         .mtn {
 15             margin-top: 5px!important;
 16         }
 17         #ct .frame {
 18             margin: 0;
 19             border: none;
 20         }
 21 
 22         .xfs_2 .frame-title, .xfs_2 .frametitle, .xfs_2 .tab-title {
 23             background-color: #A90000;
 24             background-position: 0 -99px;
 25         }
 26         .xfs .frame-title, .xfs .frametitle, .xfs .tab-title, .xfs .frame-title a, .xfs .frametitle a, .xfs .tab-title a {
 27             color: #FFF!important;
 28         }
 29 
 30         .xfs .frame-title, .xfs .frametitle, .xfs .tab-title {
 31             border: none;
 32             background: transparent url(images/mu.png) repeat-x 0 95;
 33         }
 34 
 35         .title {
 36             padding: 0 10px;
 37             height: 32px;
 38             font-size: 14px;
 39             font-weight: 700;
 40             line-height: 32px;
 41             overflow: hidden;
 42         }
 43         .block {
 44             margin: 10px 10px 0;
 45         }
 46         ul, menu, dir {
 47             display: block;
 48             list-style: none;
 49             -webkit-margin-before: 1em;
 50             -webkit-margin-after: 1em;
 51             -webkit-margin-start: 0px;
 52             -webkit-margin-end: 0px;
 53             -webkit-padding-start: 25px;
 54         }
 55         .mls li {
 56             padding: 0 0 5px;
 57              66px;
 58             height: 85px;
 59         }
 60         .ml li {
 61             float: left;
 62             text-align: center;
 63             overflow: hidden;
 64         }
 65         a {
 66             color: #333;
 67             text-decoration: none;
 68             font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun';
 69         }
 70         .mls p {
 71             margin-top: 5px;
 72         }
 73         .ml p, .ml span {
 74             display: block;
 75              100%;
 76             height: 20px;
 77             white-space: nowrap;
 78             text-overflow: ellipsis;
 79             overflow: hidden;
 80         }
 81         .mls img {
 82              48px;
 83             height: 48px;
 84         }
 85         .ml img {
 86             display: block;
 87             margin: 0 auto;
 88         }
 89         a img {
 90             border: none;
 91         }
 92     </style>
 93 </head>
 94 <body>
 95 
 96     <div class="wp mtn">
 97         <div id="diy3" class="area"><div id="frameipq7f2" class="xfs xfs_2 frame move-span cl frame-1"><div
 98                 class="title frame-title"><span class="titletext">当前在线用户</span></div><div id="frameipq7f2_left"
 99                                                                                           class="column frame-1-c"><div
100                 id="frameipq7f2_left_temp" class="move-span temp"></div><div id="portal_block_695"
101                                                                              class="block move-span"><div
102                 id="portal_block_695_content" class="dxb_bc">
103             <div class="module cl ml mls" id="users">
104                 <ul>
105                     <!--<li>-->
106                         <!--<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>-->
107                         <!--<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>-->
108                     <!--</li>-->
109 
110                 </ul>
111             </div>
112         </div></div></div></div></div>
113     </div>
114 
115 <script>
116         //模拟从服务器获取数据
117         var users = [
118             {"name": "tdxy01","icon":"images/noavatar_small.gif"},
119             {"name": "沉眠楚人","icon":"images/noavatar_small.gif"},
120             {"name": "爱上karina","icon":"images/75_avatar_small.jpg"},
121             {"name": "tdxy01","icon":"images/89_avatar_small.jpg"},
122             {"name": "today","icon":"images/noavatar_small.gif"},
123             {"name": "hlg","icon":"images/noavatar_small.gif"},
124             {"name": "itcast","icon":"images/noavatar_small.gif"},
125             {"name": "heima","icon":"images/noavatar_small.gif"},
126             {"name": "nima","icon":"images/noavatar_small.gif"},
127             {"name": "gege","icon":"images/noavatar_small.gif"},
128             {"name": "nimei","icon":"images/noavatar_small.gif"},
129             {"name": "goodman","icon":"images/noavatar_small.gif"},
130             {"name": "haoren","icon":"images/noavatar_small.gif"},
131             {"name": "yuanxiaojie","icon":"images/noavatar_small.gif"},
132             {"name": "zhengyue","icon":"images/noavatar_small.gif"},
133             {"name": "qishi","icon":"images/noavatar_small.gif"},
134             {"name": "qqtang","icon":"images/noavatar_small.gif"},
135             {"name": "wawawa","icon":"images/noavatar_small.gif"},
136             {"name": "haha","icon":"images/noavatar_small.gif"},
137             {"name": "robot","icon":"images/noavatar_small.gif"},
138             {"name": "XFlute","icon":"images/noavatar_small.gif"},
139             {"name": "lovmilan","icon":"images/noavatar_small.gif"},
140             {"name": "johnny670","icon":"images/noavatar_small.gif"},
141             {"name": "xiaobinbin02","icon":"images/noavatar_small.gif"},
142             {"name": "axxxxx","icon":"images/noavatar_small.gif"}
143         ];
144 
145 
146         //需求：页面显示所有的在线用户。
147         //思路：模拟服务器获取数据（数组中装着json）.获取ul，把ul的innerHTML属性获取到，然后不间断的往innerHTML属性中赋值。
148                 //赋值要求：li标签的内容。
149         //步骤：(获取元素)
150         var div = document.getElementById("users");
151         var ul = div.firstElementChild || div.firstChild;
152 //        var ul = div.children[0];
153 
154         //1.模拟服务器获取数据（定义数组），通过循环添加元素（定义for）
155         //数组中有多少元素，我们就创建多少个li标签
156         for(var i=0;i<users.length;i++){
157             //2.模拟实验的操作方式。
158             ul.innerHTML += '<li>'+
159                                 '<a href="#" target="blank"><img src="'+users[i].icon+'" width="48" height="48" alt="'+users[i].name+'"></a>'+
160                                 '<p><a href="#" title="'+users[i].name+'" target="_blank">'+users[i].name+'</a></p>'+
161                             '</li>';
162         }
163 
164 
165 //       var str = "b";
166 //        var str2 = "a"+str+"c";
167         //实验；
168         //获取ul
169 //    var div = document.getElementById("users");
170 //    var ul = div.firstElementChild || div.firstChild;
171 //    var ul = div.children[0];
172 
173     //往ul中添加li元素以及li元素中的内容
174 //        ul.innerHTML += '<li>'+
175 //                        '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
176 //                        '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
177 //                    '</li>';
178 //        ul.innerHTML += '<li>'+
179 //                '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
180 //                '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
181 //                '</li>';
182 //        ul.innerHTML += '<li>'+
183 //                '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
184 //                '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
185 //                '</li>';
186 // str = 'a'+
187 //          'b'+
188 //          'c'+
189 //       'd';
190 
191     </script>
192 </body>
193 </html>

在线用户

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0 auto;
            padding: 0px;
            font-size: 12px;
            background: url(images/bg.gif) repeat center 36px;
            text-align: center;
            background-color: #c30230;
        }
        #content {
            margin: 0 auto;
             960px;
            background: url(images/content_bg.jpg) no-repeat left top;
            height: 627px;
            position: relative;
        }

        #content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 {
            position: absolute;
             227px;
            left: 200px;
            top: 100px;
        }

        #content .tip1 .tip_h {
            background: url(images/tip1_h.gif) no-repeat left top;
        }

        #content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, #content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h, #content .tip7 .tip_h, #content .tip8 .tip_h {
             227px;
            padding-top: 45px;
            height: 23px;
            text-align: left;
            cursor: move;
        }
        #content .tip1 .tip_c {
            background: url(images/tip1_c.gif) repeat-y;
        }

        #content .tip1 .tip_c, #content .tip2 .tip_c, #content .tip3 .tip_c, #content .tip4 .tip_c, #content .tip5 .tip_c, #content .tip6 .tip_c, #content .tip7 .tip_c, #content .tip8 .tip_c {
             200px;
            padding-left: 12px;
            padding-right: 15px;
            min-height: 40px;
            text-align: left;
            line-height: 20px;
            max-height: 160px;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
        }

        #content .tip1 .tip_f {
            background: url(images/tip1_f.gif) no-repeat left top;
        }

        #content .tip1 .tip_f, #content .tip2 .tip_f, #content .tip3 .tip_f, #content .tip4 .tip_f, #content .tip5 .tip_f, #content .tip6 .tip_f, #content .tip7 .tip_f, #content .tip8 .tip_f {
             227px;
            height: 53px;
            padding-top: 20px;
        }
        #content .close, #content .close2 {
            float: left;
            font-size: 12px;
            cursor: pointer;
            color: #000000;
        }
        .clr {
            clear: both;
            overflow: auto;
            display: block;
            height: 0px;
        }
        #content .icon {
            float: left;
             35px;
            padding-left: 15px;
            height: 35px;
            text-align: center;
        }
        #content .name {
            float: right;
            padding-right: 15px;
            text-align: right;
            font-size: 14px;
            line-height: 35px;
            color: #C0F;
        }
        #content .num {
            float: left;
            padding-left: 7px;
             195px;
        }
    </style>
</head>
<body>

    <!--纸条墙-->
    <div id="content">
        <!--纸条-->
        <!--<div class="tip1" id="tip" >-->
            <!--<div class="tip_h" title="双击关闭纸条">-->
                <!--<div class="num">第[49568]条 2016-07-7 22:51:52</div>-->
                <!--<div class="close" title="关闭纸条" >×</div>-->
                <!--<div class="clr"></div>-->
            <!--</div>-->
            <!--<div class="tip_c">-->
                <!--普天同庆，天下大同！-->
            <!--</div>-->
            <!--<div class="tip_f">-->
                <!--<div class="icon">-->
                    <!--<img src="images/bpic_1.gif" alt="" title="">-->
                <!--</div>-->
                <!--<div class="name">不愿意透露姓名的吕先生</div>-->
                <!--<div class="clr"></div>-->
            <!--</div>-->
        <!--</div>-->
    </div>


    <script>

        //模拟数据库，获取信息
        var messages = [
            {"id":1,"name":"mahu","content":"今天你拿苹果支付了么","time":"2016-02-17 00:00:00"},
            {"id":2,"name":"haha","content":"今天天气不错，风和日丽的","time":"2016-02-18 12:40:00"},
            {"id":3,"name":"jjjj","content":"常要说的事儿是乐生于苦","time":"2016-03-18 12:40:00"},
            {"id":4,"name":"9.8的妹纸","content":"把朋友家厕所拉堵了 不敢出去 掏了半小时了都","time":"2016-03-18 12:40:00"},
            {"id":5,"name":"雷锋ii.","content":"元宵节快乐","time":"2016-02-22 12:40:00"},
            {"id":6,"name":"哎呦哥哥.","content":"据说今晚央视的元宵晚会导演和春晚导演是同一个人，真是躲得过初一，躲不过十五。","time":"2016-02-22 01:30:00"},
            {"id":7,"name":"没猴哥，不春晚","content":"班主任:“小明，你都十二岁了，还是三年级，不觉得羞愧吗”？。小明:“一点也不觉得，老师你都四十多岁了，不也是年年在三年级混日子吗？羞愧的应该是你”。老师:……","time":"2016-02-22 01:30:00"},
            {"id":8,"name":"哎呦杰杰.","content":"真搞不懂你们地球人，月亮有什么好看的，全是坑，还是对面那哥们好看，","time":"2016-02-22 01:30:00"},
            {"id":9,"name":"哎呦哎呦","content":"今天哪里的烟花最好看！！？答：朋友圈。。。","time":"2016-02-22 02:30:00"}
        ];

    //需求1：模拟数据库获取信息，然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。
    //需求2：点击内容，提高层级；点击关闭按钮，删除tip标签；双击顶部，删除标签.....

    //需求1：模拟数据库获取信息，然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。
    //步骤：
        //获取相关元素
        var content = document.getElementById("content");

        //循环生成div标签，然后为innerHTML属性添加内容
        for(var i=0;i<messages.length;i++){
            //生成新标签
            var newDiv = document.createElement("div");
            //绑定类名和ID
            newDiv.className = "tip1";
            newDiv.id = "tip"+messages[i].id;
            //改变位置
            var topValue = parseInt(Math.random()*400);
            var leftValue = parseInt(Math.random()*700);
            newDiv.style.top = topValue+"px";
            newDiv.style.left = leftValue+"px";
            //赋值内容
            newDiv.innerHTML = '<div class="tip_h" title="双击关闭纸条">'+
                                        '<div class="num">第[49568]条 '+messages[i].time+'</div>'+
                                        '<div class="close" title="关闭纸条" >×</div>'+
                                        '<div class="clr"></div>'+
                                '</div>'+
                                '<div class="tip_c">'+
                                    messages[i].content+
                                 '</div>'+
                                '<div class="tip_f">'+
                                    '<div class="icon">'+
                                    '<img src="images/bpic_1.gif" alt="" title="">'+
                                '</div>'+
                                '<div class="name">'+messages[i].name+'</div>'+
                                    '<div class="clr"></div>'+
                                '</div>';
            //把新创建的元素放入content里面
            content.appendChild(newDiv);


            //绑定事件，提高层级
            newDiv.onclick = fn;

            //点击关闭按钮的时候关闭父盒子。
            var closeDiv = newDiv.getElementsByClassName("close")[0];
            closeDiv.onclick = function () {
                //不能用newDiv，因为在页面加载的时候newDiv，已经变成最后一个了，当你点击的时候，用远关闭的是最后的那个div。
//                content.removeChild(newDiv);
                content.removeChild(this.parentNode.parentNode);
            }

            //双击关闭按钮类名叫做tip_h
            var dbDiv = newDiv.getElementsByClassName("tip_h")[0];
            dbDiv.ondblclick = function () {
                //不能用newDiv，因为在页面加载的时候newDiv，已经变成最后一个了，当你点击的时候，用远关闭的是最后的那个div。
//                content.removeChild(newDiv);
                content.removeChild(this.parentNode);
            }

        }

        var index = 1;
        function fn(){
            this.style.zIndex = index;
            index++;
        }

    </script>



</body>
</html>

祝愿墙

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         * {
  8             padding: 0;
  9             margin: 0;
 10         }
 11         .box {
 12              500px;
 13             margin: 200px auto;
 14         }
 15         ul {
 16              392px;
 17             padding: 5px;
 18             list-style: none;
 19             border: 1px solid red;
 20         }
 21         li:hover {
 22             background-color: red;
 23         }
 24         input {
 25              400px;
 26         }
 27         button {
 28              70px;
 29         }
 30     </style>
 31 </head>
 32 <body>
 33     <div class="box">
 34         <input type="text"/>
 35         <button>索搜</button>
 36         <!--<ul>-->
 37             <!--<li>aaaa</li>-->
 38             <!--<li>bbb</li>-->
 39             <!--<li>ccc</li>-->
 40         <!--</ul>-->
 41     </div>
 42 
 43     <script>
 44         //需求：输入内容(输入事件，键盘弹起事件)，模拟服务器获取内容，创建ul，并在其中显示。
 45         //步骤：
 46         //1.获取事件源
 47         //2.绑定事件
 48         //3.书写事件驱动程序
 49 
 50 
 51 
 52         //1.获取事件源
 53         //模拟服务器获取内容
 54         var arr = ["a","ab","abc","abcd","aa","aaa"];
 55         var box = document.getElementsByTagName("div")[0];
 56         var inp = box.children[0];
 57 //        var inp = document.getElementsByTagName("input")[0];
 58 
 59         //2.绑定事件(输入内容(输入事件，键盘弹起事件))
 60         inp.onkeyup = function () {
 61             //创建一个字符串，里面添加满了li和对应的内容。
 62             var newArr = [];
 63             //我要从数组中查询以input中输入内容为开头的信息，然后添加到li中，转换成字符串。
 64             //遍历老数组，然后判断每一项，哪项是以input内容为开头的穿件一个li，塞进去。
 65             for(var i=0;i<arr.length;i++){
 66                 //判断当前项，是否已input内容为开头
 67                 //获取输入内容input标签的value属性值。
 68                 var val = this.value;
 69                 if(arr[i].indexOf(val)===0){
 70                     newArr.push("<li>"+arr[i]+"</li>");
 71                 }
 72             }
 73             var str = newArr.join("");
 74 
 75             //Bug1.每次创建新的ul之前，先删除旧的ul
 76             //只有ul存在我们才能删除ul
 77 //            var aaa = box.getElementsByTagName("ul")[0];
 78             if(box.children[2]){
 79                  //只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
 80                 box.removeChild(box.children[2]);
 81             }
 82 
 83             //Bug2.如果input中内容为空，那么久不能在生成ul了。
 84             //如果input为空，那么切断函数
 85 
 86             //Bug3.如果arr数组中没有以input为开头的元素。那么切断函数
 87             //newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在
 88             if(this.value.length === 0 || newArr.length === 0){
 89                 //切断函数(不在产生新的ul)
 90                 return;
 91             }
 92 
 93             //3.书写事件驱动程序
 94             var ul = document.createElement("ul");
 95             //把创建好的内容添加到ul中。
 96             ul.innerHTML = str;
 97             box.appendChild(ul);
 98         }
 99 
100 
101 
102 
103 
104     </script>
105 
106 
107 </body>
108 </html>

模拟搜索功能

表格操作
// rows:返回值是数组 (只读，table和textarea能用)
var tab = document.getElementsByTagName("table")[0];

// insertRow() (只有table能调用)
// var tr = document.createElement("tr");
var aaa = tab.insertRow(2);//指定索引值之前插入
// deleteRow() (只有table能调用)
tab.deleteRow(2);

// console.log(aaa == tr);
console.log(aaa);
console.log(tab.rows);

// cells (只读，tr和textarea能用)
var ce = tab.children[0];
console.log(ce.children[0].cells);
// insertCell() (只有tr能调用)
ce.children[0].insertCell(0);

// deleteCell() (只有tr能调用)
ce.children[0].deleteCell(0);

BOM的内置方法内置对象

name：新窗口的名称，可以为空
featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
fullscreen= { yes/no/1/0 } 是否全屏，默认no
channelmode= { yes/no/1/0 } 是否显示频道栏，默认no
toolbar= { yes/no/1/0 } 是否显示工具条，默认no
location= { yes/no/1/0 } 是否显示地址栏，默认no
directories = { yes/no/1/0 } 是否显示转向按钮，默认no
status= { yes/no/1/0 } 是否显示窗口状态条，默认no
menubar= { yes/no/1/0 } 是否显示菜单，默认no
scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no
width=number 窗口宽度（像素单位）
height=number 窗口高度（像素单位）
top=number 窗口离屏幕顶部距离（像素单位）
left=number 窗口离屏幕左边距离（像素单位）

作者:明明
出处: http://www.cnblogs.com/mingm/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意，必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。

查看全文

相关阅读:
创建文件并写入内容
 java自动压缩文件并加密
 Java自动发送带图片邮件（带附件）
eclipse正则表达式搜索
 解决：org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):
spring整合mybatis（原始dao和mapper代理两种方式）
（解决）mysql1366中文显示错误的终极解决方案
 pdf合并、拆分工具
 ScheduledExecutorService定时方法
 json数据包含特殊字符解析失败

原文地址：https://www.cnblogs.com/mingm/p/6642137.html