簡單粗暴的JavaScript筆記-1

標題圖
歡迎到我的簡書檢視我的文集
前言:
提示密碼提示框
<head> <style> #div1 {width: 100px;height:50px;background:#FFCC99;border:1px solid #FF9900; dispaly: none;} </style> <title>dashucoding</title> </head> <body> // get Element By Id <input type="checkbox" onmouseover="" "doucument.getElementById('div1').style.dispaly='block';" onmouseout="document.getElementById('div1').style.display='none'; "/>自動登入 <div id="div1" " > 達叔小生 </div> </body>
<label>標籤是用來分組 <label onmouseover="" "doucument.getElementById('div1').style.dispaly='block';" onmouseout="document.getElementById('div1').style.display='none';>登入</label> <div id="div1"> 不要在網咖上網 </div>
alert使用
元素獲取
// 元素的獲取 id document.getElementById // 屬性操作 obj.style.display = "block" document.getElementById("div1").style.display="block"
<div id="div1" class="box"></div> <style> div{width:100px; height:100px; background:red;} .box {width: 200px; height: 200px; background: green;} </style>
<body> <div id="div1 onmouseover="document.getElementById('div1').className="box"; " onmouseout="document.getElementById('div1').className="box";"> </div> </body>
換膚
換css樣式表,調好相容,改變 href
的值
<link id="link1" href="css1.css" rel="stylesheet" type="text/css" > <input id="btn1" type="button" value="面板1" onclick="document.getElementById('link1').href='css1.css';" /> <input id="btn2" type="button" value="面板2" onclick="document.getElementById('link1').href='css2.css';" />
#idv1 {width:100px; height:100px; background:red;} <div id="div1" onmouseover="document.getElementById("div1").style.width="200px" ; onmouseover="document.getElementById("div1").style.height="200px" ; ">
<div id="div1" onmouseover="toRead()" onmouseout="toRes()"> </div>
getElementsByTagName
this
if
for
下拉列表
<div id="box"> <p id="btn">輸入法</p> <ul id="ul1" style="display:block;"> <li><a href="#">手寫</a></li> <li><a href="#">拼音</a></li> <li><a href="#">關閉</a></li> </ul> </div>
<script type="text/javascript"> window.onload=function () { var oP=document.getElementById('btn'); var oUl=document.getElementById('ul1'); oP.onclick=function () { if(oUl.style.display=='block') { oUl.style.display='none'; } else//none { oUl.style.display='block'; } }; }; </script>
全選
<p id="btn">全選</p> <input type="checkbox"/><br/> <input type="checkbox"/><br/> <input type="checkbox"/><br/> var aInput=document.getElementsByTagName("input"); aInput.length aInput[0].checked=true;
for(i=0; i<5; i++){ alert('dashucoding'); }
獲取
- 控制checkbox的狀態為checked
- 獲取一組元素為getElementsByTagName
for迴圈
- 重複執行操作
- for迴圈的執行順序
<style> div{width: 100px; height: 100px; border: 1px solid black; } </style> <script type="text/javascript"> window.onload=function(){ var aDiv = document.getElementsByTagName("div"); var i=0; for(i=0;i<aDiv.length;i++){ aDiv[i].style.background="red"; } } </script> <body> <div></div> <div></div> </body>
全選
var i=0; oBtn.onclick = function(){ for(i=0;i<aInput.length;i++){ aInput[i].checked=true; } }
響應按鈕
<script type="text/javascript> window.onload=function(){ var aBtn = document.getElementsByTagName('input'); var i = 0; for(i=0; i<aBtn.length; i++){ aBtn[i].onclick=function(){ alert('dashucoding'); } } } </script> <body> <input type="button" value="達叔"/> <input type="button" value="達叔小生"/> <input type="button" value="dashucoding"/> </body>
for(i=0;i<aBtn.length;i++){ aBtn[i].onclick=functiion(){ alert(this.value); }; }
選項卡(tab標籤)
- 改變class
- 改變style.dispaly
- className為空
- className為active
- div的display為none
- 當前的div的display為block
<div id = "tab"> <div class="nav"> <ul> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <a class="more" href="dashucoding"> </div> </div> <div class="content"> <div class="box" style="display: block;"> </div> <div class="box"> </div> <div class="box"> </div> </div>
# tab .box {width: 400px; padding: 20px; overflow: hidden; display: none;}
選項卡
<style> input{background: white;} .active{background: yellow;} div{width:200px; height:200px; background:#ccc; display:none;} </style> <input class="active" type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <div style="display:block;">a</div> <div>b</div> <div>c</div> <script type="text/javascript"> window.onload=function(){ var aBtn = document.getElementsByTagName("input"); var aDiv = document.getElementsByTagName("div"); var i=0; for(i=0;i<aBtn.length;i++){ aBtn[i].index=i; aBtn[i].onclick=function(){ for(i=0;i<aBtn.length;i++){ aBtn[i].className=' '; aDiv[i].style.dispaly="none"; } alert('當前' + this.index); aDiv[this.index].style.display="block"; this.className="active"; }; } } </script>
事件提取,getElementsByTagName,this
導航選單,自定義單選框用js, 評分, 收縮選單
<script type="text/javascript"> window.onload=function() { var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oDiv=document.getElementById('div1'); oBtn.onclick=function() { oDiv.innerHTML=oTxt.value; }; } </script> <style> #div1{width:200px; height:200px; background:#ccc;} </style> <body> <input type="text"/> <input type="button" value="設定文字"/> <div id="div1"> </div> </body>
<div class="text"> <h2>活動</h2> <p></p> </div> <script type="text/javascript"> window.onload=function() { var aLi=document.getElementsByTagName('li'); var oTxt=document.getElementsById("tab").getElementsByTagName("div")[0]; var i=0; for(i=0; i<aLi.length; i++) { aLi[i].index=i; aLi[i].onmouseover = function() { for(i=0;i<aLi.length;i++) { aLi[i].className=" "; } this.className="active"; oTxt.innerHTML=this.index; } } } </script>
js window.onload=function () { var oDiv=document.getElementById('tab'); var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li'); var i=0; for(i=0;i<aLiBtn.length;i++) { aLiBtn[i].onmouseover=select; } };
定時器
- setInterval間隔型
- setTimeout 延時型
- clearInterval
- clearTimeout
<script type="text/javascript"> function show() { alert("dashu"); } // setInterval(show, 1000); window.onload=function() { var oBtn1=document.getElementById("btn1"); var oBtn2=document.getElementById("btn2"); var timer = null; oBtn1.onclick=function() { timer=setInterval(show, 1000); } oBtn2.onclick=function() { clearInterval(timer); } } </script> <input id="btn1" type="button" value="開啟"/> <input id="btn2" type="button" value="暫停"/>
獲取時間
Date物件 getHours, getMinutes, getSeconds
<script type="text/javascript"> window.onload=function() { var oDate = new Date(); alert(oDate.getHours()); alert(oDate.getMinutes()); alert(oDate.getSeconds()); }; </script>
innerHTML
陣列
定時器
Date物件
換樣式
<link id="link1" href="css1.css" rel="stylesheet" type="text/css"/> <dl id="message"> <form> <dt> <strong>換樣式:</strong> <input id="btn1" type="button" value="面板1" onclick="document.getElementById('link1').href='css1.css';" /> <input id="btn2" type="button" value="面板2" onclick="document.getElementById('link1').href='css2.css';" /> </dt> <dd>輸入姓名:<input class="text" type="text" /></dd> <dd>輸入密碼:<input class="text" type="password" /></dd> <dd>請您留言:<textarea></textarea></dd> <dd class="center"><input class="btn" type="submit" value="提交" /></dd> </form> </dl>
選單下拉列表
<link href="123.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="123.js"> </script> <div id="drop" class="down_list"> <h2 class="up">播放列表</h2> <ul> <li><a href="#">玩愛之徒 </a></li> <li><a href="#">原諒我就是這樣的女生</a></li> <li><a href="#">猜不透</a></li> <li><a href="#">自導自演 </a></li> <li><a href="#">浪漫窩 </a></li> <li><a href="#">流年</a></li> </ul> </div>
window.onload=function () { var oDiv=document.getElementById('drop'); var oH2=oDiv.getElementsByTagName('h2')[0]; var oUl=oDiv.getElementsByTagName('ul')[0]; oH2.onclick=showHideUl; } function showHideUl() { var oDiv=document.getElementById('drop'); var oUl=oDiv.getElementsByTagName('ul')[0]; var oH2=oDiv.getElementsByTagName('h2')[0]; if(oUl.style.display === 'none') { oUl.style.display='block'; oH2.className='up'; } else { oUl.style.display='none'; oH2.className='down'; } }
<div id="box"> <p id="btn">輸入法</p> <ul id="ul1" style="display:block;"> <li><a href="#">手寫</a></li> <li><a href="#">拼音</a></li> <li><a href="#">關閉</a></li> </ul> </div> <script type="text/javascript"> window.onload=function () { var oP=document.getElementById('btn'); var oUl=document.getElementById('ul1'); oP.onclick=function () { if(oUl.style.display=='block') { oUl.style.display='none'; } else//none { oUl.style.display='block'; } }; }; </script>
改變Div的樣式
<body> <div id="div1" onmouseover="toGreen()" onmouseout="toRed()"> </div> </body> <script type="text/javascript"> function toGreen() { var oDiv1=document.getElementById('div1'); oDiv1.style.width='200px'; oDiv1.style.height='200px'; oDiv1.style.background='green'; } function toRed() { var oDiv1=document.getElementById('div1'); oDiv1.style.width='100px'; oDiv1.style.height='100px'; oDiv1.style.background='red'; } </script>
選項卡
<body> <div id="tab"> <div class="nav"> <ul> <li class="active"><a href="#">達叔小生1</a></li> <li><a href="#">達叔小生2</a></li> <li><a href="#">達叔小生3</a></li> </ul> <a class="more" href="https://www.jianshu.com/u/c785ece603d1">>>更多</a> </div> <div class="content"> <div class="box" style="display:block;"> <div class="pic"><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/1.jpg" alt="達叔小生" /></a></div> <ul class="pic_list"> </ul> </div> <div class="box"> <div class="pic"><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/2.jpg" alt="達叔小生1" /></a></div> <ul class="pic_list"> </ul> </div> <div class="box"> <div class="pic"><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/3.jpg" alt="達叔小生2" /></a></div> <ul class="pic_list"> </ul> </div> </div> <div class="adorn1"></div> <div class="adorn2"></div> </div> </body> // js <script type="text/javascript"> window.onload=function() { var oTab=document.getElementById('tab'); var aLi=getByClass(oTab, 'nav')[0].getElementsByTagName('li'); var aA=oTab.getElementsByTagName('ul')[0].getElementsByTagName('a'); var aDiv=getByClass(oTab, 'box'); var i=0; aDiv[0].style.display='block'; for(i=0; i<aLi.length; i++) { aLi[i].index=i; aLi[i].onclick=function() { for(i=0; i<aLi.length; i++) { aLi[i].className=''; aDiv[i].style.display='none'; } this.className='active'; aDiv[this.index].style.display='block'; }; aA[i].onfocus=function(){this.blur();}; } }; function getByClass(oParent, sClassName) { var aElm=oParent.getElementsByTagName('*'); var aArr=[]; for(var i=0; i<aElm.length; i++) { if(aElm[i].className==sClassName) { aArr.push(aElm[i]); } } return aArr; } </script>
淘寶商品列表
// html <table id="taobao_table"> <thead> <tr> <th><label><input type="checkbox" /> 全選</label></th> <th>商品名</th> <th width="70"><a class="btn" href="#">價格</a></th> <th width="70"><a class="btn" href="#">地區</a></th> <th>功能</th> </tr> </thead> <tbody> <tr> </tr> <tr> </tr> <tr> </tr> </tbody> <tfoot> <tr> <th colspan="5"></th> </tr> </tfoot> </table> // js window.onload=function () { var oTable=document.getElementById('taobao_table'); var oBtnSelectAll=oTable.getElementsByTagName('input')[0]; var aInputs=oTable.getElementsByTagName('input'); var aRows=oTable.tBodies[0].rows; var oBtnPrice=oTable.tHead.getElementsByTagName('a')[0]; var oBtnArea=oTable.tHead.getElementsByTagName('a')[1]; var i=0; //隔行變色 interlaceColor(); //加事件 for(i=0;i<aInputs.length;i++) { if(aInputs[i].type=='button' && aInputs[i].value=='刪除') { aInputs[i].onclick=doDelete; } if(aInputs[i].type=='checkbox' && aInputs[i]!=oBtnSelectAll) { aInputs[i].onclick=calcTotalPrice; } } oBtnSelectAll.onclick=function () { selectAll(); calcTotalPrice(); } oBtnPrice.href="javascript:void(0);"; oBtnPrice.order='none'; oBtnPrice.onclick=sortByPrice; oBtnArea.href="javascript:void(0);"; oBtnArea.order='none'; oBtnArea.onclick=sortByArea; }; function selectAll() { var oTable=document.getElementById('taobao_table'); var oBtnSelectAll=oTable.getElementsByTagName('input')[0]; var aInputs=oTable.tBodies[0].getElementsByTagName('input'); var i=0; for(i=0;i<aInputs.length;i++) { if(aInputs[i].type=='checkbox') { aInputs[i].checked=oBtnSelectAll.checked; } } }
展開選單
<ul id="nav"> <li><a onclick="leo(0)" href="#" class="navLink"><img src="nav.gif" class="img" />達叔小生</a></li> <ul id="m0" class="menu"> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />達叔小生</a></li> </ul> <li><a onclick="leo(1)" href="#" class="navLink"><img src="nav.gif" class="img" />達叔小生</a></li> <ul id="m1" class="menu"> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />達叔小生</a></li> </ul> <li><a onclick="leo(2)" href="#" class="navLink"><img src="nav.gif" class="img" />達叔小生</a></li> <ul id="m2" class="menu"> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />達叔小生</a></li> </ul> </ul> // js <script type="text/ecmascript"> function leo(n){ var navUi = document.getElementById("m"+n); if(navUi.style.display != "block"){ for(var i=0;i<=5;i++){ document.getElementById("m"+i).style.display = "none"; } navUi.style.display = "block"; }else{ navUi.style.display = "none"; } } </script>
點贊小星星
<body> <div id="dianzan"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> // js window.onload=function(){ var oPf=document.getElementById('dianzan'); var aLi=oPf.getElementsByTagName('li'); var i=0; for(i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onmouseover=function(){ for(i=0;i<aLi.length;i++){ if(i<=this.index) { aLi[i].style.background="url(star.gif) no-repeat 0 -29px"; } else { aLi[i].style.background="url(star.gif) no-repeat 0 0"; } } }; aLi[i].onmousedown=function () { alert('提交成功:'+(this.index+1)+'分'); }; } };
移動到QQ頭像展示資料
<style> #div1 {width: 200px; height: 30px; background: red;} #div2 {width: 150px; height: 20px; background: yellow; margin: 10px; dispaly: none;} </style> <script type="text/javascript"> window.onload=function() { var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var timer = null; oDiv1.onmouseover = function() { oDiv2.style.display="block'; clearTimeout(timer); }; oDiv1.onmouseout = function() { timer=setTimeout(function(){ oDiv2.style.display="none'; }, 300); }; oDiv2.onmouseover = function() { clearTimeout(timer); }; oDiv2.onmouseout = function() { timer=setTimeout(function(){ oDiv2.style.display='none'; }, 300); }; }; <script> <div id="div1"> </div> <div id="div2"> </div>
<script type="text/javascript"> function show() { oDiv2.style.display="block"; clearTimeout(timer); } function hide() { timer = setTimeout(function(){ oDiv2.style.display="none"; }, 300); } oDiv1.onmouseover = show; oDiv2.onmouseover = show; oDiv1.onmouseout = hide; oDiv2.onmouseout = hide; </script> // -> <script type="text/javascript"> var a; var b; a=b=1; </script>
無縫滾動
<style> #div1 {width:100px;height:100px;background:#ccc; positon: absolute; left:0; } </style> <script type="text/javascript"> window.onload=function() { var oDiv = document.getElementById('div1'); var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); // oBtn1.onclick=function() { alert(oDiv.offsetLeft); oDiv.style.left = oDiv.offsetLeft + 5 + "px"; }; // var timer = null; oBtn1.onclick = function() { timer = setInterval(function(){ oDiv.style.left=oDiv.offsetLeft + 5 +"px"; }, 30); }; oBtn2.onclick = function() { clearInterval(timer); }; }; </script> <input type="button1" value="向右移動" id="btn1"/> <input type="button2" value="停止移動" id="btn2"/> <div id="div1"> </div>
簡約日曆
<div id="tab" class="calendar"> <ul> <li class="active"><h2>1</h2><p>JAN</p></li> <li><h2>2</h2><p>FER</p></li> <li><h2>3</h2><p>MAR</p></li> <li><h2>4</h2><p>APR</p></li> <li><h2>5</h2><p>MAY</p></li> <li><h2>6</h2><p>JUN</p></li> <li><h2>7</h2><p>JUL</p></li> <li><h2>8</h2><p>AUG</p></li> <li><h2>9</h2><p>SEP</p></li> <li><h2>10</h2><p>OCT</p></li> <li><h2>11</h2><p>NOV</p></li> <li><h2>12</h2><p>DEC</p></li> </ul> <div class="text"> <h2>1月</h2> <p>快過年了~</p> </div> </div>
window.onload=function () { var oDiv=document.getElementById('tab'); var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li'); var i=0; for(i=0;i<aLiBtn.length;i++) { aLiBtn[i].onmouseover=select; } }; function select() { var oDiv=document.getElementById('tab'); var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li'); var oDivContent=oDiv.getElementsByTagName('div')[0]; var sInnterHtml=''; var i=0; for(i=0;i<aLiBtn.length;i++) { aLiBtn[i].className=''; } for(i=0;i<aLiBtn.length;i++) { if(aLiBtn[i] === this) { aLiBtn[i].className='active'; sInnterHtml="<h2>" + (i+1) + "月活動</h2>"; sInnterHtml+="<p>" + aInnerText[i] + "</p>"; oDivContent.innerHTML=sInnterHtml; } } }
圖片滾屏效果
<body> <div class="control"> <label id="chk_pause"><input type="checkbox" checked="checked">間隔停頓</label> <select id="pause_time"> <option value="100">短</option> <option value="1000" selected="selected">中</option> <option value="3000">長</option> </select> 滾動速度: <select id="sel_speed"> <option value="2">慢</option> <option value="5">中</option> <option value="10">快</option> </select> </div> <div class="roll" id="roll"> <a href="javascript:void(0);" class="btn_left"></a> <a href="javascript:void(0);" class="btn_right"></a> <div class="wrap"> <ul> <li><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/1.jpg" /></a></li> <li><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/2.jpg" /></a></li> <li><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/3.jpg" /></a></li> <li><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/4.jpg" /></a></li> </ul> </div> </div> </body>
// js var g_bMoveLeft=true; var g_oTimer=null; var g_oTimerOut=null; var g_bPause=true; var g_iPauseTime=1000; var g_iSpeed=2; window.onload=function () { var oDiv=document.getElementById('roll'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var aA=oDiv.getElementsByTagName('a'); var oChk=document.getElementById('chk_pause'); var oPauseTime=document.getElementById('pause_time'); var oSpeed=document.getElementById('sel_speed'); var i=0; var str=oUl.innerHTML+oUl.innerHTML; oUl.innerHTML=str; oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; for(i=0;i<aLi.length;i++) { aLi[i].onmouseover=function () { stopMove(); }; aLi[i].onmouseout=function () { startMove(g_bMoveLeft); }; } aA[0].onmouseover=function () { startMove(true); }; aA[1].onmouseover=function () { startMove(false); }; startMove(true); oChk.onclick=function () { g_bPause=oChk.getElementsByTagName('input')[0].checked; }; oSpeed.onchange=function () { g_iSpeed=parseInt(this.value); }; oPauseTime.onchange=function () { g_iPauseTime=parseInt(this.value); }; }; function startMove(bLeft) { g_bMoveLeft=bLeft; if(g_oTimer) { clearInterval(g_oTimer); } g_oTimer=setInterval(doMove, 30); } function stopMove() { clearInterval(g_oTimer); g_oTimer=null; } function doMove() { var oDiv=document.getElementById('roll'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var l=oUl.offsetLeft; if(g_bMoveLeft) { l-=g_iSpeed; if(l<=-oUl.offsetWidth/2) { l+=oUl.offsetWidth/2; } } else { l+=g_iSpeed; if(l>=0) { l-=oUl.offsetWidth/2; } } if(g_bPause) { if(Math.abs(l-Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth)<Math.ceil(g_iSpeed/2)) { stopMove(); g_oTimerOut=setTimeout ( function () { startMove(g_bMoveLeft); }, g_iPauseTime ); l=Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth; } } oUl.style.left=l+'px'; }
達叔小生:往後餘生,唯獨有你
You and me, we are family !
90後帥氣小夥,良好的開發習慣;獨立思考的能力;主動並且善於溝通
簡書部落格: 達叔小生
ofollow,noindex">https://www.jianshu.com/u/c785ece603d1結語
- 下面我將繼續對 其他知識 深入講解 ,有興趣可以繼續關注
- 小禮物走一走 or 點贊