javascript的几个重要小demo
-
跑马灯:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎领导莅临指导!</title> <script type="text/javascript"> function Go(){ var content = document.title; var firstChar = content.charAt(0); var sub =content.substring(1, content.length); document.title = sub + firstChar; } setInterval('Go()', 1000); </script> </head> <body> </body> </html>
- 搜索框:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .gray{ 8 color:gray; 9 } 10 .black{ 11 color: black; 12 } 13 </style> 14 <script type="text/javascript"> 15 function Enter(){ 16 var id = document.getElementById("tip"); 17 id.className = 'black'; 18 if(id,value == "请输入关键字"||id.value.trim() =='')){ 19 id.value = '' 20 21 } 22 } 23 function Leave(){ 24 var id = document.getElementById("tip"); 25 var val = id.value; 26 if (val.length == 0||id.value.trin() ==""){ 27 id.value = "请输入关键字" 28 id.className= 'gray'; 29 }else{ 30 id.className = 'black'; 31 } 32 } 33 34 </script> 35 </head> 36 <body> 37 <input type = 'text' class="gray" id="tip" value="请输入关键字"onfocus='Enter();' onblur='Leave();'/> 38 39 40 </body> 41 </html>
-
滚动菜单:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 9 body{ 10 margin: 0px auto; 11 } 12 img { 13 border: 0; 14 } 15 ul{ 16 padding: 0; 17 margin: 0; 18 list-style: none; 19 } 20 h1{ 21 padding: 0; 22 margin: 0; 23 } 24 .clearfix:after { 25 content: "."; 26 display: block; 27 height: 0; 28 clear: both; 29 visibility: hidden; 30 } 31 32 .wrap{ 33 width: 980px; 34 margin: 0 auto; 35 } 36 37 .pg-header{ 38 background-color: #303a40; 39 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); 40 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); 41 box-shadow: 0 2px 5px rgba(0,0,0,.2); 42 } 43 .pg-header .logo{ 44 float: left; 45 padding:5px 10px 5px 0px; 46 } 47 .pg-header .logo img{ 48 vertical-align: middle; 49 width: 110px; 50 height: 40px; 51 52 } 53 .pg-header .nav{ 54 line-height: 50px; 55 } 56 .pg-header .nav ul li{ 57 float: left; 58 } 59 .pg-header .nav ul li a{ 60 display: block; 61 color: #ccc; 62 padding: 0 20px; 63 text-decoration: none; 64 font-size: 14px; 65 } 66 .pg-header .nav ul li a:hover{ 67 color: #fff; 68 background-color: #425a66; 69 } 70 .pg-body{ 71 72 } 73 .pg-body .catalog{ 74 position: absolute; 75 top:60px; 76 width: 200px; 77 background-color: #fafafa; 78 bottom: 0px; 79 } 80 .pg-body .catalog.fixed{ 81 position: fixed; 82 top:10px; 83 } 84 85 .pg-body .catalog .catalog-item.active{ 86 color: #fff; 87 background-color: #425a66; 88 } 89 90 .pg-body .content{ 91 position: absolute; 92 top:60px; 93 width: 700px; 94 margin-left: 210px; 95 background-color: #fafafa; 96 overflow: auto; 97 } 98 .pg-body .content .section{ 99 height: 500px; 100 border: 1px solid red; 101 } 102 </style> 103 104 <body onscroll="ScrollEvent();"> 105 <div class="pg-header"> 106 <div class="wrap clearfix"> 107 <div class="logo"> 108 <a href="#"> 109 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> 110 </a> 111 </div> 112 <div class="nav"> 113 <ul> 114 <li> 115 <a href="#">NO</a> 116 </li> 117 <li> 118 <a href="#">NO1</a> 119 </li> 120 <li> 121 <a href="#">NO2</a> 122 </li> 123 </ul> 124 </div> 125 126 </div> 127 </div> 128 <div class="pg-body"> 129 <div class="wrap"> 130 <div class="catalog" id="catalog"> 131 <div class="catalog-item" auto-to="function1"><a>第1章</a></div> 132 <div class="catalog-item" auto-to="function2"><a>第2章</a></div> 133 <div class="catalog-item" auto-to="function3"><a>第3章</a></div> 134 </div> 135 <div class="content" id="content"> 136 <div menu="function1" class="section"> 137 <h1>开始</h1> 138 </div> 139 <div menu="function2" class="section"> 140 <h1>高潮</h1> 141 </div> 142 <div menu="function3" class="section" style="height: 200px;"> 143 <h1>结束</h1> 144 </div> 145 </div> 146 </div> 147 148 </div> 149 <script> 150 function ScrollEvent(){ 151 var bodyScrollTop = document.body.scrollTop; 152 if(bodyScrollTop>50){ 153 document.getElementsByClassName('catalog')[0].classList.add('fixed'); 154 }else{ 155 document.getElementsByClassName('catalog')[0].classList.remove('fixed'); 156 } 157 158 var content = document.getElementById('content'); 159 var sections = content.children; 160 for(var i=0;i<sections.length;i++){ 161 var current_section = sections[i]; 162 163 // 当前标签距离顶部绝对高度 164 var scOffTop = current_section.offsetTop + 60; 165 166 // 当前标签距离顶部,相对高度 167 var offTop = scOffTop - bodyScrollTop; 168 169 // 当前标签高度 170 var height = current_section.scrollHeight; 171 172 if(offTop<0 && -offTop < height){ 173 // 当前标签添加active 174 // 其他移除 active 175 176 // 如果已经到底部,现实第三个菜单 177 // 文档高度 = 滚动高度 + 视口高度 178 179 var a = document.getElementsByClassName('content')[0].offsetHeight + 60; 180 var b = bodyScrollTop + document.documentElement.clientHeight; 181 console.log(a+60,b); 182 if(a == b){ 183 var menus = document.getElementById('catalog').children; 184 var current_menu = document.getElementById('catalog').lastElementChild; 185 current_menu.classList.add('active'); 186 for(var j=0;j<menus.length;j++){ 187 if(menus[j] == current_menu){ 188 189 }else{ 190 menus[j].classList.remove('active'); 191 } 192 } 193 }else{ 194 var menus = document.getElementById('catalog').children; 195 var current_menu = menus[i]; 196 current_menu.classList.add('active'); 197 for(var j=0;j<menus.length;j++){ 198 if(menus[j] == current_menu){ 199 200 }else{ 201 menus[j].classList.remove('active'); 202 } 203 } 204 } 205 206 207 208 209 break; 210 } 211 212 } 213 214 215 } 216 </script> 217 </body> 218 </html>
-
搜索框的五毛特效:
1 <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" /> 2 3 <script> 4 function Focus(ths){ 5 ths.style.color = "black"; 6 if(ths.value == '请输入关键字' || ths.value.trim() == ""){ 7 8 ths.value = ""; 9 } 10 } 11 12 function Blur(ths){ 13 if(ths.value.trim() == ""){ 14 ths.value = '请输入关键字'; 15 ths.style.color = 'gray'; 16 }else{ 17 ths.style.color = "black"; 18 } 19 } 20 </script>
-
全选、反选和取消:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancelAll();"/> <input type="button" value="反选" onclick="ReverseCheck();"/> <table border="1" > <thead> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1</td> <td>2</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1</td> <td>2</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1</td> <td>2</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1</td> <td>2</td> </tr> </tbody> </table> <script> function CheckAll(ths){ var tb = document.getElementById('tb'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; inp.checked = true;//关键地方 } } } function CancelAll(ths){ var tb = document.getElementById('tb'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; inp.checked = false;//关键地方 } } } function ReverseCheck(ths){ var tb = document.getElementById('tb'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; if(inp.checked){ inp.checked = false; }else{ inp.checked = true;//关键地方 } } } } </script> </body> </html>