JS02(排他思想封装tab栏、下拉菜单使用和换肤、京东点击搜索隐藏文字、星座运式)
排他思想封装tab栏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * {margin:0; padding: 0;} ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } .hd { height: 45px; } .hd span { display:inline-block; width: 90px; background-color: pink; line-height: 45px; text-align: center; cursor: pointer; } .hd span.current { background-color: purple; } .bd li { height: 255px; background-color: purple; display: none; } .bd li.current { display: block; } </style> </head> <body> <div class="box" id="one"> <div class="hd"> <span class="current">体育</span> <span>娱乐</span> <span>新闻</span> <span>综合</span> </div> <div class="bd"> <ul> <li class="current">我是体育模块</li> <li>我是娱乐模块</li> <li>我是新闻模块</li> <li>我是综合模块</li> </ul> </div> </div> <div class="box" id="two"> <div class="hd"> <span class="current">体育</span> <span>娱乐</span> <span>新闻</span> <span>综合</span> </div> <div class="bd"> <ul> <li class="current">我是体育模块</li> <li>我是娱乐模块</li> <li>我是新闻模块</li> <li>我是综合模块</li> </ul> </div> </div> <div class="box" id="three"> <div class="hd"> <span class="current">体育</span> <span>娱乐</span> <span>新闻</span> <span>综合</span> </div> <div class="bd"> <ul> <li class="current">我是体育模块</li> <li>我是娱乐模块</li> <li>我是新闻模块</li> <li>我是综合模块</li> </ul> </div> </div> </body> </html> <script> function tab(id) { // 封装tab // 获取元素 只获取 这个id 下面的span 和 li var eleId = document.getElementById(id); // 获取id元素 var spans = eleId.getElementsByTagName("span"); // span 4个小span var lis = eleId.getElementsByTagName("li"); // 4个小li for(var i=0; i<spans.length;i++) { // 遍历 4个 span spans[i].index = i; // 每个span得到索引号 spans[i].onmouseover = function() { // 鼠标经过span // 先清除所有的spans for(var j = 0;j<spans.length; j++) { spans[j].className = ""; lis[j].className = ""; } this.className = "current"; // 留下当前的那个li 显示出来 lis[this.index].className = "current"; } } } tab("one"); // 实参 tab("two"); tab("three"); </script>
下拉菜单使用和换肤
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { background: url(images/chun1.jpg); -webkit-background-size: cover; background-size: cover; } </style> </head> <body> <select name="" id="sele"> <option value="1">春意绵绵</option> <option value="2">夏日炎炎</option> <option value="3">秋风瑟瑟</option> <option value="4">冬雪皑皑</option> </select> </body> </html> <script> var sele = document.getElementById("sele"); // 下拉列表 sele.onchange = function() { // alert(this.value); switch(this.value) { case "1": // 表单娶过来的值 是 字符型 document.body.style.backgroundImage = " url(images/chun1.jpg)"; break; case "2": // 表单娶过来的值 是 字符型 document.body.style.backgroundImage = " url(images/xia1.jpg)"; break; case "3": // 表单娶过来的值 是 字符型 document.body.style.backgroundImage = " url(images/qiu1.jpg)"; break; case "4": // 表单娶过来的值 是 字符型 document.body.style.backgroundImage = " url(images/dong1.jpg)"; break; } } </script>
京东点击搜索框隐藏文字
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> input,button { border:0; padding:0; outline: none; float: left; } .search { width: 258px; height: 40px; margin: 100px auto; background-color: pink; } .search input { width: 210px; height: 40px; background: url(images/left.jpg) no-repeat; padding-left: 6px; color: #ccc; } .search button { width: 42px; height: 40px; background: url(images/right.jpg) no-repeat; cursor: pointer; } </style> </head> <body> <div class="search"> <input type="text" value="请输入..." id="txt" style="color:#ccc"/> <button></button> </div> </body> </html> <script> var txt = document.getElementById("txt"); txt.onfocus = function() { // 获得焦点之后才去判断 // alert("您得到了焦点") // 当我们得到了焦点的时候， 文本框里面的值为空 有点问题 // txt.value = ""; if(this.value == "请输入..." && this.style.color == "rgb(204, 204, 204)" || this.value == "请输入..." && this.style.color == "#ccc" ) // 说明用户还没有输入 { this.value = ""; // = 赋值 == 判断 === 全等 this.style.color = "#333"; } } txt.onblur = function() { // alert("您失去了焦点") if(this.value == "") // 如果当前的表单的值为空 { // 回来吧 this.value = "请输入..."; this.style.color = "#ccc"; } } </script>
星座运式
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 350px; height: 250px; border: 1px solid #ccc; margin: 100px auto; } .dt { padding-left:10px; line-height: 35px; font-weight: 700; color:#036; } .dd-t{ overflow: hidden; } .dd { padding: 10px; } .icon { width: 50px; height: 50px; float: left; background: url(Icon.png) no-repeat; margin-right:10px; } .yunshi { //灰角星 width: 80px; height: 13px; display: inline-block; background:url(yunshi.png) no-repeat; position: relative; } .star { //红角星 width:0; height: 13px; position: absolute; top:0; left:0; background:url(yunshi.png) no-repeat left bottom; } </style> </head> <body> <div class="box"> <div class="dt">星座运势</div> <div class="dd"> <div class="dd-t"> <div class="icon" id="ico"></div> <div class="right"> <select name="" id="sele"> <option value="0">白羊座 03.21-04.19</option> <option value="1">金牛座 04.20-05.29</option> <option value="2">双子座 04.20-05.29</option> </select> <div> 今日运势: <span class="yunshi"> <span class="star" id="stAr"></span> </span> </div> </div> </div> <div class="dd-b" id="content"> 这几天的财运都很强，但是危机总在不知不觉之中发生了，例如：因为太过乐观而误判情势，导致投...[详细] </div> </div> </div> </body> </html> <script> var sele = document.getElementById("sele"); // select 列表 var ico = document.getElementById("ico"); // 羊羊羊 var content = document.getElementById("content"); var star = document.getElementById("stAr"); // 小星星 var arr = [8,9,3,10,7]; // 满分10 分 白羊座 8分 // 宽度一共 80像素 我平均划分为 10分 每份 8px star.style.width = 8 * arr[0] + "px"; var textArr = ["受到财帛宫内行星不利相位的影响，部份的人花钱较不节制，经常一不小心就把信用卡刷爆了，除此之...", "最近你的学习能力相当好，领悟力也很高，可以在很短的时间内就对新的业务内容有通盘的了解，所以.", "或许最近有些心事困扰着你，让你今天工作起来相当无力，甚至有些心不在焉，如果忙碌了一段时间后.."]; sele.onchange = function() { // alert(this.value); ico.style.backgroundPosition = "0 "+(-this.value*50)+"px"; // 关系 -索引号 乘以 50 就是他的y坐标 content.innerHTML = textArr[this.value]; // 数组 star.style.width = 8 * arr[this.value] + "px"; } </script>
