前端实战——第一课
找到一个不错的网站：http://www.fgm.cc/learn/ 有很多用原生JS写的有意思的东西，之后会把每个小例子的实现代码分享出来。
我的方法是，读题目之后先自己写，写到效果差不多后去F12看源码。然后比较自己的和源码的写法，取长补短。
（1）控制div属性
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>控制div属性</title> <style> #square{ width:100px; height:100px; background:red; margin:10px auto; } #outer{ text-align:center; } </style> <script> function changeStyle(ele,sty,va){ ele.style[sty]=va; } window.onload=function(){ var butt=document.getElementsByTagName("button"); var design=document.getElementById("square"); var oAtt=["width","height","background","display","display"]; var oVal=["200px","200px","blue","none","block"] for (var i=0;i<butt.length ;i++ ) { butt[i].index=i; butt[i].onclick=function(){ if (this.index==butt.length-1)//if语句可以换成：this.index==butt.length-1 && (design.style.cssText=""); design.style.cssText=""; changeStyle(design,oAtt[this.index],oVal[this.index]); } } } </script> </head> <body> <div id="outer"> <button type="button">变宽</button>//input 标签也能实现botton的作用。 <button type="button">变高</button> <button type="button">变色</button> <button type="button">隐藏</button> <button type="button">重置</button> <div id="square"></div> </div> </body> </html>
（2）网页换肤
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>网页换肤</title> <style> body,ul,li{margin:0;padding:0;} html,body{height:100%;} body{font:12px/1.5 Tahoma;} li{list-style-type:none} a:link,a:visited{text-decoration:none;} a:hover {text-decoration:underline;} #outer{width:500px;margin:0 auto;} #skin,#nav{overflow:hidden;} #skin{margin:10px 0} #skin li {float:left; width:6px; height:6px; cursor:pointer; overflow:hidden; margin-right:10px; text-indent:-9999px; border-width:4px; border-style:solid;} #skin li.current{background:#fff!important;} #red{border-color:red;background:red;} #green{border-color:green;background:green;} #black{border-color:black;background:black;} #nav{border:1px solid #fff;} #nav li{float:left;width:82px;line-height:25px;text-align:center;border-right:1px solid #fff;} #nav li.last{width:83px;border-right-width:0;} #nav li a{color:#fff;} </style> <link href="green.css" rel="stylesheet" type="text/css" /> <script> window.onload = function () { var oLink = document.getElementsByTagName("link")[0]; var oSkin = document.getElementById("skin").getElementsByTagName("li"); for(var i = 0; i< oSkin.length; i++) { oSkin[i].onclick = function () { for(var p in oSkin) oSkin[p].className = ""; this.className = "current"; oLink['href'] = this.id + ".css"; } } }; </script> </head > <body> <div id="outer"> <ul id="skin"> <li id="red" title="红色" class>红</li> <li id="green" title="红色" class>绿</li> <li id="black" title="红色" class="current">黑</li> </ul> <ul id="nav"> <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 class="last"><a href="">旅游</a></li> </ul> </div> </body>
（3）函数接收参数并弹出
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数接收参数并弹出</title> <style> body{font:12px/1.5 Tahoma;text-align:center;} input{border:1px solid #ccc;padding:3px;} button{cursor:pointer;} </style> <script> function pop(elem){ var input=document.getElementsByTagName("input"); if (input[0].value) { alert(input[0].value); }else alert(input[0].placeholder); if (input[1].value) { alert(input[1].value); }else alert(input[1].placeholder); } </script> </head> <body> <p><input type="text" value="北京市" /></p> <p><input type="text" value="朝阳区"/></p> <p><button onclick="pop(this)"> 传参</button></p> </body> </html>
（4）用循环将三个Div变成红色
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用循环将三个Div变成红色</title> <style> #outer{width:350px;height:100px;margin:10px auto;} #outer div{float:left;width:100px;height:100px;background-color:black;margin-right:10px;} </style> <script> window.onload=function(){ var but=document.getElementsByTagName("button")[0]; but.onclick=function(){ var divs=document.getElementById("outer").getElementsByTagName("div"); for(var i=0;i<divs.length;i++) divs[i].style.backgroundColor="red"; } } </script> </head> <body> <center><button> 点击将Div变成红色</button></center> <div id="outer"> <div></div> <div></div> <div></div> </div> </body> </html>
（5）鼠标移入/移除改变样式
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入/移除改变样式<</title> <style> body{font:12px/1.5 Tahoma;color:#fff} #div1{width:150px;height:150px;margin:0 auto;padding:10px;background:black;border:10px solid #000;cursor:crosshair;} #div1.hover{color:red;background:white;border:10px solid red;} </style> <script> window.onload = function () { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function () { oDiv.className = "hover" }; oDiv.onmouseout = function () { oDiv.className = "" } }; </script> </head> <body> <div id="div1" >鼠标移入改变样式，鼠标移出恢复.</div> </body> </html>
（6）记住密码提示框
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>记住密码提示框</title> <style> body,input{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:300px; height:90px;margin:0 auto; } input{margin-right:5px;vertical-align:middle;} #tips{font-size:10px; width:200px; height:40px; color:black; background-color:#ffffcc; border:2px solid #ff9900; display:none} </style> <script> window.onload=function(){ var tip=document.getElementById("tips"); var label=document.getElementsByTagName("label")[0]; label.onmouseover=function(){ tip.style.display="block"; } label.onmouseout=function(){ tip.style.display="none"; } } </script> </head> <body> <div id="outer"> <label><input type="checkbox"/>两周内自动登录</label> <div id="tips"> 为了您的信息安全，请不要在网吧或公用电脑上使用此功能！</div> </div> </body> </html>
