HTML-JS-CODING
day28
获取属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .ip{ color: rgba(0,0,0,0.4); } .hide{ display: none; } </style> </head> <body> <input type="text" id="1" class="ip" onfocus="Fo(this)" onblur="Bl(this)" value="come on"/> <input type="button" onclick="Change()" value="change"> <input type="button" onclick="Run()" id="r"> <div id="q"> <div class="c1">2333333</div> <div class="c1" d="1">2333333</div> <div class="c1">2333333</div> <div class="c1" d="1">2333333</div> <div class="c1">2333333</div> <div class="c1">2333333</div> </div> <script> function Fo(arg) { arg.className=""; if (arg.value=='come on'){ arg.value=""; } else { arg.className=""; } } function Bl(arg) { if (arg.value=='come on' || arg.value.trim()==''){ arg.value="come on"; arg.className="ip"; } } function Change() { var q=document.getElementById('q'); var divs=q.children; console.log(divs); for(var i=0;i<divs.length;i++){ var current_div=divs[i]; var attr=current_div.getAttribute('d'); console.log(attr); if(attr=='1'){ current_div.innerText=document.getElementById('1').value; } } } </script> </body> </html>
全选反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="button" value="全选" onclick="Checkall();"> <input type="button" value="取消" onclick="Reversall();"> <input type="button" value="反选" onclick="Cancelall();"> </div> <table> <thead> <tr> <th>喜欢</th> <th>名字</th> <th>你的</th> </tr> </thead> <tbody id="tb"> <tr> <td><input class="c1" type="checkbox"> </td> <td>jiji</td> <td>16</td> <td>slim</td> </tr> <tr> <td><input class="c1" type="checkbox"> </td> <td>jiji</td> <td>16</td> <td>slim</td> </tr> <tr> <td><input class="c1" type="checkbox"> </td> <td>jiji</td> <td>16</td> <td>slim</td> </tr> </tbody> </table> <script> function Checkall() { var tb=document.getElementById('tb'); var checks=tb.getElementsByClassName('c1'); for(var i=0;i<checks.length;i++){ var currentc=checks[i]; currentc.checked=true } } function Reversall() { var tb=document.getElementById('tb'); var checks=tb.getElementsByClassName('c1'); for(var i=0;i<checks.length;i++){ var currentc=checks[i]; currentc.checked=false } } function Cancelall() { var tb=document.getElementById('tb'); var checks=tb.getElementsByClassName('c1'); for(var i=0;i<checks.length;i++){ var currentc=checks[i]; if (currentc.checked){ currentc.checked=false; } else{ currentc.checked=true; } } } </script> </body> </html>
添加元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="text"> <input type="button" value="add" onclick="Add(this)" onkeydown="Add(this)"> </div> <div> <ul id="clis"> <li>atmosphere</li> <li>cloud</li> </ul> </div> <script> function Add(self) { var val= self.previousElementSibling.value; self.previousElementSibling.value=''; var str='<li>'+val+'</li>'; var clis=document.getElementById('clis'); clis.insertAdjacentHTML("beforeEnd",str); clis.appendChild(val)//第二种添加 } </script> </body> </html>
输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .g{ color: lightgray; } .b{ color: #000; } .w{ background-color: #cccccc; color: #000; text-align: center; font-size: 60px; } </style> </head> <body> <input type="text" placeholder="请输入鸡鸡"/> <!--不是每个浏览器都支持这个--> <p>当鼠标进入时，移除内容 /n 当鼠标退出时，添加内容</p> <input id="i" type="text" class="g" value="请输入鸡鸡" onfocus="Focus(this);" onblur="Blur(this)" /> <input type="button" value="change" onclick="Change()" > <hr> <div class='w' id="1" > 来呀~造作呀 </div> <script> function Focus(arg){ arg.className="b"; var current_val= arg.value; console.log(current_val); if(current_val=='请输入鸡鸡'){ arg.value=""; } } function Blur(arg) { var current_val= arg.value; if(current_val=='请输入鸡鸡'||current_val.trim().length==0){ arg.value='请输入鸡鸡'; arg.className='g' } } function Change() { d=document.getElementById('1'); console.log(d_text) ip=document.getElementById('i'); ip_text=ip.value; console.log(ip_text) if (ip_text !='请输入鸡鸡'){ d.innerText=ip_text console.log(d_text) } } setInterval( function (){ d=document.getElementById('1'); d_text=d.innerText; sub_char=d_text.slice(1,d_text.length); first_char=d_text[0]; new_str=sub_char+first_char; d.innerText=new_str },300); // setInterval( // function () { // var c=document.getElementsById('w') // var ip=document.getElementById('i') // c_text=c.innerText // ip_text=ip.value // } // ) </script> </body> </html>
返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .gotop{ position:fixed; right: 28px; bottom: 19px; width: 40px; height: 40px; background: #000; color: #ffffff; } .hide{ display: none; } </style> </head> <body onscroll="Show()"> <div id="i1" style="height: 20000px;"> <h1>7899789979889</h1> </div> <div id="i2" class="gotop hide" > <a onclick="Gtop()">回去</a> </div> <script> function Show() { var scrolltop=document.body.scrollTop; var i=document.getElementById('i2'); if(scrolltop>100){ i.classList.remove('hide'); }else{ i.classList.add('hide'); } } function Gtop() { document.body.scrollTop=0 } </script> </body> </html>
高度相关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; background-color: #dddddd; } .pg-header{ background-color: black; color: #ffffff; height: 50px; } .pg-body .menu{ position: absolute; left: 200px; width: 180px; background-color: white; float: left; } .pg-body .content{ position: absolute; right: 200px; left: 389px; background-color: white; float: left; } .pg-body .content .item{ height: 900px; } .pg-body .fix{ position: fixed; top: 3px; } .active{ background-color: #447e9b; color: #ffffff; } </style> </head> <body onscroll="Go();"> <div class="pg-header"></div> <div class="pg-body"> <div id="menu" class="menu"> <div >第一章</div> <div>第二章</div> <div id='2'>第三章</div> </div> <div id="content" class="content"> <div class="item">wowowoowowowowowoww</div> <div class="item">cvbcvbcvbnbcvbcvbcvbcvbcbc</div> <div class="item" style="height: 100px;">lilililiilloliloiliolioiolilili</div> <div></div> </div> </div> <script> function Go() { var Go=document.body.scrollTop; var menu=document.getElementById('menu'); if(Go>50){ // console.log(menu); // a.classList.add('fix'); menu.classList.add('fix') }else { menu.classList.remove('fix') } var item= document.getElementById('content').children for (var i=0;i<item.length;i++){ var currentItem=item[i]; var currentItemBodyTop=currentItem.offsetTop+currentItem.offsetParent.offsetTop; var currentItemWindowTop=currentItemBodyTop-Go; var currentH=currentItem.offsetHeight; var bottomH=currentItemBodyTop+currentH; if (currentItemWindowTop<0 && Go<bottomH){ var my=menu.getElementsByTagName('div')[i]; my.className='active'; var lis=menu.getElementsByTagName('div'); var d2=document.getElementById('2') d2h=d2.scrollTop console.log(bottomH,1,Go,d2h ) for (var j=0;j<lis.length;j++){ if(lis[j]==my){ } else { lis[j].classList.remove('active'); } if (Go>currentH){ lis[j].className='' d2.className='active' } } break; } } } </script> </body> </html>
跑马灯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .g{ background-color: #cccccc; color: #000; text-align: center; font-size: 60px; } </style> </head> <body> <div class='g' id="1"> 来呀~造作呀 </div> <script> setInterval( function (){ d=document.getElementById('1'); d_text=d.innerText; sub_char=d_text.slice(1,d_text.length); first_char=d_text[0]; new_str=sub_char+first_char; d.innerText=new_str },300); // li=[11,22,33,44] // for(var l=1;l<10;l++){ // console.log(l) // } //面向对象 prototype 原型 function Fc(name,words) { this.Name =name; this.Words =words; } Fc.prototype={ G: function () { return this.Name+this.Words } }; a=new Fc('jiji','gogogogoge'); ret=a.G(); console.log(ret) </script> </body> </html>
定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="fom" action="http://www.sogou.com/sogou?" method="get"> <input name="query" type="text"> <input name="button" type="button" onclick="Submit();" value="submit"> </form> <hr> <input id ='ip' name="query" type="text"> <input type="button" value="confirm" onclick="Firm();"> <hr> <input type="button" value="interval" onclick="Interval();"> <input type="button" value="stopinterval" onclick="sInterval();"> <div> <input type="button" value="删除" onclick="Delete();"> <input type="button" value="保留" onclick="Keep();"> <div id="status"></div> </div> <script> function Delete() { document.getElementById('status').innerText='hohoho~'; t1=setTimeout(ClearStatus,500); } function ClearStatus() { document.getElementById('status').innerText=''; } function Submit() { document.getElementById('fom').submit() } function Firm() { var r = confirm(document.getElementById('ip').value) console.log(r) } function Interval() { // setInterval('console.log(1231231231313)',1200) s1=setInterval(function () { console.log(86868686); },500); } function sInterval() { clearInterval(s1); } </script> </body> </html>
