1.一键改变多个div属性
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{ background-color: #dddddd; } .item:hover{ color: red; } /*给不同的子div设置不同的hover属性,即一键给不同的div改变不同的样式*/ .item:hover .a { background-color: yellow; } .item:hover .b{ background-color: black; } </style> </head> <body> <div class="item"> <div class="a">222</div> <div class="b">bbbb</div> </div> </body> </html>
2.给搜索框设置默认字
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 600px;margin: 0 auto"> <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字" /> <!--onfocus动作,获取焦点--> <input type="text" placeholder="关键字"/> </div> <script> function Focus() { var tag = document.getElementById('i1'); var val = tag.value; if(val == '请输入关键字'){ tag.value = ''; } } function Blur() { var tag = document.getElementById('i1'); var val = tag.value; if(val.length == 0){ tag.value = "请输入关键字" } } </script> </body> </html>
3.自动删除弹出框
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="s1"></div> <input type="button" value="删除" onclick="del();" /> <script> function del() { document.getElementById('s1').innerText = '已删除'; setTimeout(function () { document.getElementById('s1').innerText = ''; },3000) } </script> </body> </html>
4.引用图标
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/> #指定rel和href,href是图标文件的路径,包含所有图标, 一般用.min.css这个压缩版 <style> .item{ background-color: #dddddd; } .item:hover{ color: red; } .item:hover .b{ background-color: green; } </style> </head> <body> <div class="item"> <div class="a"> <i class="fa fa-superpowers" aria-hidden="true"></i> i标签跟a标签一样,class指定图标 </div> <div class="b">456</div> </div> </body> </html>
5.后台管理界面实现
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/> <style> body{ margin: 0; } .left{ float: left; } .right{ float: right; } .pg-header{ height: 48px; background-color: #2459a2; color: white; line-height: 48px; min-width: 600px; # div最小宽度,他等于menu和content宽度之和 } .pg-header .logo{ #左边‘明天你好的属性’ width: 200px; background-color: #204982; text-align: center; } .pg-header .icons{ #右边图标的属性 padding: 0 20px; #内边距(图标到div边框的距离):上下为0,左右为20px } .pg-header .icons:hover{ background-color: #204982; } .pg-header .user{ #右边为用户名属性 margin-right: 60px; padding: 0 20px; color: white; height: 48px; } .pg-header .user:hover{ background-color: #204982; } .pg-header .user .a img{ #右边头像的属性,头像div在用户名div内 height: 40px;width: 40px;margin-top: 4px;border-radius: 50%; } .pg-header .user .b{ #头像的下拉菜单属性,这里边的文字一般左靠齐 z-index: 20; position: absolute; top: 48px; right: 0; background-color: white; color: black; width: 160px; display: none; #默认不显示该下拉菜单 font-size: 14px; line-height: 30px; } .pg-header .user .b a{ #下拉菜单中的文字属性 padding: 5px; color: black; text-decoration: none; } .pg-header .user .b a:hover{ background-color: #dddddd; } .pg-header .user:hover .b{ display: block; } .pg-header .user .b a{ display: block; } .pg-content .menu{ #左边菜单栏属性 position: absolute; top:48px; left: 0; bottom: 0; width: 200px; background-color: #dddddd; } .pg-content .content{ position: absolute; top: 48px; right: 0; bottom: 0; left: 200px; overflow: auto;#与position: absolute;联用,就会使左边菜单栏固定在屏幕上 并且自己也有滚动条 z-index: 9; min-width: 400px; } </style> </head> <body> <div class="pg-header"> <div class="logo left"> 明天你好 </div> <div class="user right" style="position: relative"> <a class="a" href="#"> <img src="22.jpg"> </a> <div class="b"> <a href="#">我的资料</a> <a href="#">注销</a> </div> </div> <div class="icons right"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <span>5 </span> </div> <div class="icons right"> <i class="fa fa-bell-o" aria-hidden="true"></i> </div> </div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>--> <!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>--> <div style="background-color: purple"> <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> </div> </div> <div class="pg-footer"></div> </body> </html>
详细细节见视频day16 后台管理界面实现1-5
6.js添加标签
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="AddEle1();" value="+" /> <input type="button" onclick="AddEle2();" value="+" /> <div id="i1"> <p><input type="text" /></p> </div> <script> function AddEle1(){ //方法一: // 创建一个标签 // 将标签添加到i1里面 var tag = "<p><input type='text'/></p>"; // 注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' //'beforeBegin'、:i1标签开始位置的前边 // 'afterBegin'、:i1标签开始位置的后边 // 'beforeEnd'、:i1标签结束位置的前边 // 'afterEnd':i1标签结束位置的后边 document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag); } function AddEle2(){ //方法二:二比较好 // 创建一个标签 // 将标签添加到i1里面 var tag = document.createElement('input');//通过dom创建标签 tag.setAttribute('type', 'text'); //并设置属性 tag.style.fontSize = '16px'; tag.style.color = 'red'; var p = document.createElement('p');//创建p标签 p.appendChild(tag); //将tag标签放到p标签里 document.getElementById('i1').appendChild(p); } </script> </body> </html>
7.提交表单与定时器(任何标签都可以提交表单操作)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="f1" action="http://www.oldboyedu.com"> <input type="text" /> <input type="submit" value="提交" /> <a onclick="submitForm();">提交吧</a> </form> <script> function submitForm(){ //document.getElementById('f1').submit() //alert(123); var v = confirm('真的要删除吗?'); console.log(v); } // 定时器,一直执行 var obj = setInterval(function(){ console.log(1); clearInterval(obj); }, 1000); // 定时器,只执行一次 setTimeout(function () { console.log('timeout'); },15000); </script> </body> </html>
8.定时器timeout
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="status"></div> <input type="button" value="删除" onclick="DeleteEle();" /> <script> function DeleteEle(){ document.getElementById('status').innerText = "已删除"; setTimeout(function () { document.getElementById('status').innerText = ""; }, 50000); } </script> </body> </html>
9.事件:onblur当对象不再是焦点(鼠标点住该对象)的瞬间触发,onfocus:当对子昂变成焦点的瞬间触发,onclick,ondblclick,onmouseover,onmouseout,addEventListener等
例1:addEventListener
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #main{ background-color: red; width:300px; height:400px; } #content{ background-color: pink; width:150px; height:200px; } </style> <body> <div id="main"> <div id="content"></div> </div> <script> var mymain = document.getElementById("main"); var mycontent = document.getElementById("content"); //addEventListener('事件',函数,false冒泡模型,最下边content先出来,true捕捉模型,点谁出谁) mymain.addEventListener("click",function(){console.log("main")},true); mycontent.addEventListener("click",function(){console.log("content")},true); </script> </body> </html>
例2: 将对象不再是焦点时,框内内容变大写
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <script type="text/javascript"> function upperCase() { var x=document.getElementById("fname").value document.getElementById("fname").value=x.toUpperCase() } </script> </head> <body> 输入您的姓名: <input type="text" id="fname" onblur="upperCase()" /> </body> </html>
10.