智能社JavaScript学习笔记第三课
JS学习第三课
选项卡
制作一个选项卡,有四个按键,按不同按键展示不同的div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 .active {background:yellow;} #div1 div {width:170px;height:200px;background:#ccc;border:1px solid #999; display:none;} </style> <script> window.onload = function() { var oDiv = document.getElementById('div1'); var aBtn = oDiv.getElementsByTagName('input'); var aDiv = oDiv.getElementsByTagName('div'); for (var i = 0;i < aBtn.length;i++) { aBtn[i].index = i;//为每一个button记录一个index aBtn[i].onclick = function() { for(var i = 0;i < aBtn.length;i++){//这个循环是为了先把所有button取消高亮,把所有的div隐藏 aBtn[i].className = ''; aDiv[i].style.display='none'; } this.className = 'active';//this就是当前发生事件的元素 aDiv[this.index].style.display = 'block'; } } }; </script> </head> <body> <div id="div1"> <input class = "active" type = "button" value = "教育" /> <input type = "button" value = "金融" /> <input type = "button" value = "科技" /> <input type = "button" value = "体育" /> <div style = "display:block;">1111</div> <div>2222</div> <div>3333</div> <div>4444</div> </div> </body> </html>
JS简易日历
鼠标移到一个月份上,底下div里显示该月份及该月份相关活动。
这里和选项卡不同的是只用了一个div。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function(){ var arr = ['过年了','春游','走','dd']//数组存好每个月的内容,在div中展示 var oDiv = document.getElementById('tab');//获取div var aLi = oDiv.getElementsByTagName('li');//获取li var oTxt = oDiv.getElementsByTagName('div')[0];//oDiv中只有一个div,即index为0的 for(var i=0;i<aLi.length;i++) { aLi[i].index = i;//为每一个li加一个index,这样div中显示鼠标移到的月份时只用给index+1 aLi[i].onmouseover=function(){ for(var i=0;i<aLi.length;i++){//先使之前的事件清空 aLi[i].className=''; } this.className='active';//当前事件高亮 } } oTxt.innerHTML='<h2>' +(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>' //计算机会从左往右拼接,所以中间想接在一起的要加括号 }; </script> </head> <body> <div id="tab" class="calendar"> <ul> <li class="active"><h2>1</h2><p>JAN</p></li> <li><h2>2</h2><p>FEB</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>JUG</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 calss = "text"> <h2>1月活动</h2> <p>春游吧</p> </div> </div> </body> </html>
注意inner HTML的用法,oDiv.innerHTML就是从oDiv中获取HTML。
oTxt.innerHTML='<h2>' +(this.index+1)+’月活动</h2><p>'+arr[this.index]+'</p>'
这里因为是innerHTML,实际上我们就可以往里放html的代码,这里就是这样做的。