标签：select bottom 招募 宝贝 标记 :link 云计算 title 积累
JS又上完了,还是感觉JS技巧性很强,需要多积累经验...看了一下PHP的内容,感觉搭建环境好麻烦,结果回来下了个wamp感觉好像就可以了.....
1.红绿蓝颜色条:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页背景颜色控制2</title> <script type="text/javascript"> window.onload = function(){ //找对象 var inputsObj = document.getElementsByTagName("input"); //加时间 for(var i=0;i<inputsObj.length;i++){ inputsObj[i].onchange = function(){ //找对象 var red = document.getElementById("red").value; var green = document.getElementById("green").value; var blue = document.getElementById("blue").value; //输出颜色 document.body.style.backgroundColor="rgb("+red+","+green+","+blue+")"; //找到span标记并写入内容 var spanObj = document.getElementsByTagName("span"); for(var j=0;j<spanObj.length;j++){ spanObj[j].innerHTML = inputsObj[j].value; } } } } </script> </head> <body> 红：<input type="range" min="0" max="255" id="red" value="255"><span id="res_red">255</span><br> 绿：<input type="range" min="0" max="255" id="green" value="255"><span id="res_green">255</span><br> 蓝：<input type="range" min="0" max="255" id="blue" value="255"><span id="res_blue">255</span><br> </body> </html>
2.选项卡切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡切换</title> <style type="text/css"> body,ul,li{margin: 0px;padding: 0px;} ul li{list-style: none;} .box{ width:298px; height: 98px; margin: 10px; border: 1px solid #eee; overflow: hidden; } .title{ height: 27px; position: relative; } .title ul{ position:absolute; width: 301px; left:-1px; } .title ul li{ height: 26px; line-height: 26px; float: left; width: 58px; text-align: center; overflow: hidden; background: #fff; border-bottom: 1px solid #eee; padding:0px 1px; background: #f7f7f7; } .title ul li.select{ background: #fff; border-bottom-color: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; padding:0px; font-weight: bold; } .content .cont{margin: 10px 10px 10px 20px;} .content .cont ul li{ float: left; width: 133px; height: 25px; line-height: 25px; overflow: hidden; } a:link,a:visited{text-decoration: none;color: #000;} a:hover{color:#f90;} </style> <script type="text/javascript"> window.onload = function(){ var div_titleObj = document.getElementById("title"); var lisObj = div_titleObj.getElementsByTagName("li"); var div_contentObj = document.getElementById("content"); var divsObj = div_contentObj.getElementsByTagName("div"); for(var i=0; i<lisObj.length; i++){ lisObj[i].id = i; lisObj[i].onclick = function(){ for(var j=0; j<divsObj.length; j++){ divsObj[j].style.display = "none"; lisObj[j].className = ""; } divsObj[this.id].style.display = "block"; lisObj[this.id].className = "select"; } } } </script> </head> <body> <div class="box" id="box"> <div class="title" id="title"> <ul> <li class="select"><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> <div class="content" id="content"> <div class="cont" style="display: block;"> <ul> <li><a href="#">阿里云总裁胡晓明</a></li> <li><a href="#">云计算将成为新经济爆发点</a></li> <li><a href="#">天猫超市发放10亿红包</a></li> <li><a href="#">高圆圆跑步公开课上线</a></li> </ul> </div> <div class="cont" style="display: none;"> <ul> <li><a href="#">2016春节发货调整公告</a></li> <li><a href="#">广告法禁用语大全</a></li> <li><a href="#">邮费争议问题汇总</a></li> <li><a href="#">炒信规则调整意见反馈</a></li> </ul> </div> <div class="cont" style="display: none;"> <ul> <li><a href="#">趣解2016电商四大趋势</a></li> <li><a href="#">全职妈妈两年两皇冠</a></li> <li><a href="#">创业社区招募管理员</a></li> <li><a href="#">滥发信息体检工具上线</a></li> </ul> </div> <div class="cont" style="display: none;"> <ul> <li><a href="#">拉你进Q群微信刷单？</a></li> <li><a href="#">推荐店铺安全管理利器</a></li> <li><a href="#">谨防炒信”黑吃黑“</a></li> <li><a href="#">警方铲除炒信诈骗团伙</a></li> </ul> </div> <div class="cont" style="display: none;"> <ul> <li><a href="#">公益宝贝获中华慈善奖</a></li> <li><a href="#">公益发展指数阿里五星</a></li> <li><a href="#">公益宝贝卖家发票索取</a></li> <li><a href="#">公益机构淘宝开店攻略</a></li> </ul> </div> </div> </div> </body> </html>
标签：select bottom 招募 宝贝 标记 :link 云计算 title 积累
原文地址：http://www.cnblogs.com/panbee/p/6175670.html
