css+js_初
一、鼠标移动变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; right: 1px; left: 1px; top: 0; height:48px; background-color: #2459a2; line-height: 48px; } .pg-body{ margin-top: 50px; } .w{ width: 980px; margin: 0 auto; } .pg-header .menu{ display: inline-block; padding: 0 30px 0 30px; color: white; } .pg-header .menu:hover{ background-color: blue; } /* .pg-header .menu:hover 当鼠标移动到当前标签时，以下css属性才生效*/ </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">段子</a> <a class="menu">1024</a> </div> </div> <div class="pg-body"> <div class="w"> abc </div> </div> </body> </html>
二、返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部—多层</title> </head> <body> <div onclick="GoTop();"style=" 50px;height: 40px;background-color: white; position: fixed; bottom: 20px; right: 20px; ">返回顶部 </div> <div style="height: 5000px;background-color: #dddddd;"> 1234567890 </div> <script> function GoTop(){ document.body.scrollTop = 0; } </script> </body> </html>
三、赋新值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">我是刘东</div> <a>123</a> <a>abc</a> <a>123abc</a> <script> document.getElementById('i1'); document.getElementById('i1').innerText; document.getElementById('i1').innerText = '新内容'; document.getElementsByTagName('a')[1]; document.getElementsByTagName('a')[1].innerText = '666'; tags = document.getElementsByTagName('a'); for(var i=0;i<tags.length;i++){tags[i].innerText=777;} </script> </body> </html>
四、登录框内有用户密码图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 35px; 400px;position: relative;padding: 10px 0;"> <input type="text" style="height: 35px; 370px;padding-right: 30px;" /> <span style="display:inline-block;position: absolute;right: 10px;top: 20px;background-image: url(图片/i_name.jpg);height: 16px; 16px;"></span> </div> <div style="height: 35px; 400px;position: relative;"> <input type="text" style="height: 35px; 370px;padding-right: 30px;" /> <span style="display:inline-block;position: absolute;right: 10px;top: 10px;background-image: url(图片/i_pwd.jpg);height: 16px; 16px;"></span> </div> </body> </html>
五、幻灯片循环显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="color: red;background-color: #BEBEBE;height: 40px;"> <h1 id="i1">欢迎光临-前来指导</h1> </div> <script> function liu(){ //根据ID获取指定<div>标签的内容，定于局部变量接受 var tag = document.getElementById('i1') //获取标签内部的内容 var content = tag.innerText; //取字符串取第一个字符，赋值给f var f = content.charAt(0); //把第2个字符到最后一个字符赋值给g var g = content.substring(1,content.length); //把两个新赋的值加在一起 var new_content = g + f; //重新赋值 tag.innerText = new_content; } setInterval('liu()',500); </script> </body> </html>
六、定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> setInterval("alert(123)",5000) //创建定时器5秒弹出一次 </script> </body> </html>
七、头部固定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>头部固定</title> <style> .pg-header{ height: 48px; background-color:black; position: fixed; top:0; right: 0; left: 0; } .pg-body{ background-color:#dddddd; height: 5000px; margin-top: 50px; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
八、大图片选择按照设置的坐标显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 100px;"></div> <div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height:20px; 20px;border: 1px solid red;background-position-x: 0;background-position-y: -25px"></div> </body> </html>
九、多层折叠显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -250px; z-index: 10; } </style> </head> <body> <div> <input type="button" value="添加" onclick="liu()" /> </div> <!-- 遮罩层开始--> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束--> <!-- 弹出框开始--> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="dong()" /> <input type="button" value="确定" /> </p> </div> <!-- 弹出框结束--> <script> function liu(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function dong(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } </script> </body> </html>
十、大图小框设置x/y选拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px; 300px;overflow: auto;"> <img src="1.jpg"> </div> <!-- hidden 隐藏 auto 出现上下拉框--> </body> </html>
十一、多层导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style=" 300px"> <div class="item"> <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function ChangeMenu(nid){ var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){ var current_item = item_list[i]; current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>
以上所有功能实现代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>day15</title> 6 <style> 7 .item .header{ 8 height: 35px; 9 background-color: #BEBEBE; 10 color: white; 11 line-height: 35px; 12 } 13 .hide{ 14 display: none; 15 } 16 .c1{ 17 position: fixed; 18 left: 0; 19 top: 0; 20 right: 0; 21 bottom: 0; 22 background-color: black; 23 opacity: 0.6; 24 z-index: 9; 25 } 26 .c2{ 27 width: 500px; 28 height: 400px; 29 background-color: white; 30 position: fixed; 31 left: 50%; 32 top: 50%; 33 margin-left: -250px; 34 margin-top: -200px; 35 z-index: 10; 36 } 37 .pg-header{ 38 height: 48px; 39 background-color:#BEBEBE; 40 color: coral; 41 font-family: 方正舒体; 42 position: fixed; 43 top:0; 44 right: 0; 45 left: 0; 46 } 47 .pg-body{ 48 height: 5000px; 49 margin-top: 52px; 50 } 51 .diceng{ 52 width: 35px; 53 height: 40px; 54 background-color: #BEBEBE; 55 position: fixed; 56 bottom: 20px; 57 right: 20px; 58 } 59 .ziti{ 60 font-family: 方正舒体; 61 height:25px; 62 font-size: 16px; 63 } 64 .shou{ 65 cursor: pointer; 66 } 67 </style> 68 </head> 69 <body style="margin: 0;"> 70 <div class="pg-header" style="margin: 0 auto;margin-top: 2px;text-align: center;margin-left: 5px;margin-right: 5px"> 71 <p><h2 id="i1">欢迎光临-前来指导 </h2></p> 72 </div> 73 74 <div class="pg-body"> 75 <div style="height:800px; 300px;float: left;margin-left: 5px "> 76 <div class="item"> 77 <div id='i2' class="header" onclick="ChangeMenu('i2');" style="margin-top: 5px">LINUX</div> 78 <div class="content"> 79 <div>linux运维</div> 80 <div>Linux脚本</div> 81 <div>Linux监控</div> 82 </div> 83 </div> 84 <div class="item"> 85 <div id='i3' class="header" onclick="ChangeMenu('i3');" style="margin-top: 5px">Python</div> 86 <div class="content hide"> 87 <div>Python代码</div> 88 <div>Python项目</div> 89 <div>Python知识</div> 90 </div> 91 </div> 92 <div class="item"> 93 <div id='i4' class="header" onclick="ChangeMenu('i4');" style="margin-top: 5px">Java</div> 94 <div class="content hide"> 95 <div>java代码</div> 96 <div>Java项目</div> 97 <div>Java知识</div> 98 </div> 99 </div> 100 <div class="item"> 101 <div id='i5' class="header" onclick="ChangeMenu('i5');" style="margin-top: 5px">all_log</div> 102 <div class="content hide"> 103 <div>linux系统_log</div> 104 <div>Linux服务_log</div> 105 <div>linux监控_log</div> 106 </div> 107 </div> 108 </div> 109 <div class="ziti" style="float: left;margin-left: 200px"> 110 <p><b>运维主机如下：</b></p> 111 <input type="button" value="添加" onclick="ShowModel();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> 112 <input type="button" value="全选" onclick="ChooseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" /> 113 <input type="button" value="取消" onclick="CancleAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" /> 114 <input type="button" value="反选" onclick="ReverseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" /> 115 116 <table> 117 <thead> 118 <tr> 119 <th>选择</th> 120 <th>主机名</th> 121 <th>端口</th> 122 </tr> 123 </thead > 124 <tbody id="tb"> 125 126 <tr> 127 <td> 128 <input type="checkbox" /> 129 </td> 130 <td >192.168.1.1</td> 131 <td>22</td> 132 </tr> 133 <tr> 134 <td><input type="checkbox"f id="test" /></td> 135 <td>192.168.2.2</td> 136 <td>80</td> 137 </tr> 138 <tr> 139 <td><input type="checkbox" /></td> 140 <td>192.168.3.3</td> 141 <td>8080</td> 142 </tr> 143 <tr> 144 <td><input type="checkbox" /></td> 145 <td>192.168.4.4</td> 146 <td>8080</td> 147 </tr> 148 <tr> 149 <td><input type="checkbox" /></td> 150 <td>192.168.5.5</td> 151 <td>88</td> 152 </tr> 153 <tr> 154 <td><input type="checkbox" /></td> 155 <td>192.168.6.6</td> 156 <td>66</td> 157 </tr> 158 <tr> 159 <td><input type="checkbox" /></td> 160 <td>192.168.8.8</td> 161 <td>111</td> 162 </tr> 163 <tr> 164 <td><input type="checkbox" /></td> 165 <td>192.168.9.9</td> 166 <td>23</td> 167 </tr> 168 <tr> 169 <td><input type="checkbox" /></td> 170 <td>192.168.10.10</td> 171 <td>99</td> 172 </tr> 173 <tr> 174 <td><input type="checkbox" /></td> 175 <td>192.168.11.11</td> 176 <td>000</td> 177 </tr> 178 <tr> 179 <td><input type="checkbox" /></td> 180 <td>192.168.12.12</td> 181 <td>66</td> 182 </tr> 183 </tbody> 184 </table> 185 186 </div> 187 188 <!-- 遮罩层开始 --> 189 <div id="i6" class="c1 hide"></div> 190 <!-- 遮罩层结束 --> 191 192 <!-- 弹出框开始 --> 193 <div id="i7" class="c2 hide"> 194 <p><input type="text" /></p> 195 <p><input type="text" /></p> 196 <p> 197 <input type="button" value="取消" onclick="HideModel();"/> 198 <input type="button" value="确定"/> 199 </p> 200 </div> 201 <!-- 弹出框结束 --> 202 <div style="float: right;margin-right: 20px;"class="ziti" > 203 <p><b>服务器入口：</b></p> 204 <div style="height: 20px; 220px;position: relative;padding: 10px 0;"> 205 <input type="text" style="height: 25px; 200px;padding-right: 30px;" /> 206 <span style="display:inline-block;position: absolute;right: 10px;top: 15px;background-image: url(图片/i_name.jpg);height: 16px; 16px;"></span> 207 </div> 208 <div style="height: 20px; 220px;position: relative;"> 209 <input type="text" style="height: 25px; 200px;padding-right: 30px;" /> 210 <span style="display:inline-block;position: absolute;right: 10px;top: 10px;background-image: url(图片/i_pwd.jpg);height: 16px; 16px;"></span> 211 </div> 212 <div style="padding-top: 15px;float: right;"> 213 <input type="button" value="登陆" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'"/> 214 </div> 215 </div> 216 <!-- 217 <div style="height: 300px; 300px;overflow: auto;font-family: 方正舒体;margin-right: 5px;float: right"> 218 <img src="1.jpg"> 219 </div> 220 <!-- hidden 隐藏 auto 出现上下拉框--> 221 222 </div> 223 224 <div class="diceng" onclick="GoTop();">返回顶部</div> 225 226 <script> 227 function ChangeMenu(nid){ 228 var current_header = document.getElementById(nid); 229 230 var item_list = current_header.parentElement.parentElement.children; 231 232 for(var i=0;i<item_list.length;i++){ 233 var current_item = item_list[i]; 234 current_item.children[1].classList.add('hide'); 235 } 236 237 current_header.nextElementSibling.classList.remove('hide'); 238 } 239 </script> 240 <script> 241 function ShowModel(){ 242 document.getElementById('i6').classList.remove('hide'); 243 document.getElementById('i7').classList.remove('hide'); 244 } 245 function HideModel(){ 246 document.getElementById('i6').classList.add('hide'); 247 document.getElementById('i7').classList.add('hide'); 248 } 249 250 function ChooseAll(){ 251 var tbody = document.getElementById('tb'); 252 // 获取所有的tr 253 var tr_list = tbody.children; 254 for(var i=0;i<tr_list.length;i++){ 255 // 循环所有的tr，current_tr 256 var current_tr = tr_list[i]; 257 var checkbox = current_tr.children[0].children[0]; 258 checkbox.checked = true; 259 260 } 261 } 262 263 function CancleAll(){ 264 var tbody = document.getElementById('tb'); 265 // 获取所有的tr 266 var tr_list = tbody.children; 267 for(var i=0;i<tr_list.length;i++){ 268 // 循环所有的tr，current_tr 269 var current_tr = tr_list[i]; 270 var checkbox = current_tr.children[0].children[0]; 271 checkbox.checked = false; 272 273 } 274 } 275 276 function ReverseAll(){ 277 var tbody = document.getElementById('tb'); 278 // 获取所有的tr 279 var tr_list = tbody.children; 280 for(var i=0;i<tr_list.length;i++){ 281 // 循环所有的tr，current_tr 282 var current_tr = tr_list[i]; 283 var checkbox = current_tr.children[0].children[0]; 284 if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} 285 286 </script> 287 <script> 288 function liu(){ 289 //根据ID获取指定<div>标签的内容，定于局部变量接受 290 var tag = document.getElementById('i1') 291 //获取标签内部的内容 292 var content = tag.innerText; 293 //取字符串取第一个字符，赋值给f 294 var f = content.charAt(0); 295 //把第2个字符到最后一个字符赋值给g 296 var g = content.substring(1,content.length); 297 //把两个新赋的值加在一起 298 var new_content = g + f; 299 //重新赋值 300 tag.innerText = new_content; 301 } 302 setInterval('liu()',500); 303 </script> 304 <script> 305 function GoTop(){ 306 document.body.scrollTop = 0; 307 } 308 </script> 309 <script> 310 setInterval("alert(欢迎抽查工作)",5000) //创建定时器5秒弹出一次 311 </script> 312 313 </body> 314 </html>