webapi01 -练习
webapi01
有错望指正！！！
微博下拉菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { list-style: none; padding: 0; margin: 0; box-sizing: border-box; } .nav { width: 80px; } .tab { padding: 10px 0 10px; text-align: center; } .selector { display: none; } .selector ul { border: 1px solid orange; border-top: none; border-bottom: none; } .selector li { padding: 5px 20px; border-bottom: 1px solid orange; } .arrow { display: inline-block; width: 8px; height: 5px; margin: 0 0 0 5px; vertical-align: middle; background: url(icon.png) 0 -977px no-repeat; } </style></head><body> <div class="nav"> <div class="tab"> <i>微博</i> <em class="arrow"> </em> </div> <div class="selector"> <ul> <li>评论</li> <li>私信</li> <li>@我</li> </ul> </div> </div> <script> // 获取事件源 var nav = document.querySelector('.nav'); console.dir(nav); var tab = document.querySelector('.tab'); var sel = document.querySelector('.selector'); var lis = document.querySelectorAll('li'); console.log(lis); // 绑定事件 事件程序 nav.onmouseover = function() { tab.style.backgroundColor = '#ccc'; sel.style.display = 'block'; } nav.onmouseout = function() { tab.style.backgroundColor = ''; sel.style.display = 'none'; } tab.onmouseover = function() { this.style.color = '#ff8400'; } tab.onmouseout = function() { this.style.color = '#4c4c4c'; } for (var i = 0; i < lis.length; i ) { lis[i].onmouseover = function() { this.style.color = '#ff8400'; this.style.backgroundColor = '#fff5da'; } lis[i].onmouseout = function() { this.style.color = '#4c4c4c'; this.style.backgroundColor = ''; } } </script></body></html>结果图
用户名显示隐藏内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input { width: 200px; height: 30px; border: 1px solid #cccccc; outline: none; } </style></head><body> <input type="text" value="邮箱/ID/手机号"> <script> // 获取事件源 var input = document.querySelector('input'); // 绑定事件 事件程序 //onfocus 得到焦点 onblur 失去焦点 input.onfocus = function() { input.value = ''; input.style.borderColor = 'pink'; } input.onblur = function() { input.value = '邮箱/ID/手机号'; input.style.borderColor = '#ccc'; } </script></body></html>结果图
开关灯
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background-color: #fff; } </style></head><body> <button>开关灯</button> <script> var btn = document.querySelector('button'); var flag = 0; //默认关着 btn.onclick = function() { if (flag == 0) { document.body.style.backgroundColor = 'black'; flag = 1; } else { document.body.style.backgroundColor = '#fff'; flag = 0; } } </script></body></html>结果图
赞 (0)