- 给登录按钮添加事件,点击时让登录层示,点击登录面板的关闭按钮,关闭整个登录层
- 抽奖活动
- 下拉菜单
给登录按钮添加事件,点击时让登录层示,点击登录面板的关闭按钮,关闭整个登录层
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} .head{font-size:12px;padding:6px 0 0 10px;} #login_box{width:300px;height:150px;background:#eee; border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;} #login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;} #close{width:14px;height:14px;background:url(close.png) no-repeat;position:absolute;right:4px;top:6px;} </style> <script> window.onload=function(){ var login_btn=document.getElementById('login'), login_box=document.getElementById('login_box'), close=document.getElementById('close'); // 封装添加事件监听程序 function addEvent(ele,type,hander){ // 执行代码 if(ele.addEventListener){ ele.addEventListener(type,hander,false); } else if(ele.attachEvent){ ele.attachEvent('on'+type,hander); } else { ele['on'+type]=hander; } } // 显示登录层函数 function showLogin(){ // 执行代码 login_box.style.display='block' } // 隐藏登录层函数 function hideLogin(){ // 执行代码 login_box.style.display='none' } //点击登录按钮显示登录层 // 执行代码 addEvent(login_btn,'click',showLogin); //点击关闭按钮隐藏登录层 // 执行代码 addEvent(close,'click',hideLogin);} </script> </head> <body> <div class="head">亲,您好!<input type="button" value="登 录" id="login"></div> <div id="login_box"> <p>用户登录</p><span id="close">X</span> </div> </body> </html>
抽奖活动
<!doctype html> <html > <head> <title>抽奖</title> <meta charset="UTF-8"> <style> div{ height:200px;width: 300px;margin: 0 auto;text-align: center;border: 1px solid black} #a{color: red;font-size: 18px} button{background-color: lightblue;margin: 20px;width: 60px;height: 40px} </style> <script > window.onload= function () { var data=['一千块','iPhone8','iPad','再抽一次','谢谢参加'] var a=document.getElementById('a'); var open=document.getElementById('open'); var stop=document.getElementById('stop'); var timer=null; var flag=0; open.onclick=play; function play(){ clearInterval(timer); timer=setInterval(function () { var ramod=Math.floor(Math.random()*data.length) a.innerHTML=data[ramod]; },50); open.style.backgroundColor='grey'; } stop.onclick=unplay; function unplay(){ clearInterval(timer); open.style.backgroundColor='lightblue'; } document.onkeyup=function(e){ if(e.keyCode==13){ if(flag==0){ play(); flag=1; }else{ unplay(); flag=0; } } } } </script> </head> <body> <div > <p id="a">开始抽奖</p> <button id="open">开始</button> <button id="stop">停止</button> </div> </body> </html>
下拉菜单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> body,ul,li{ margin:0; padding:0; font-size:13px;} ul,li{list-style:none;} #divselect{width:186px; margin:80px auto; position:relative; z-index:10000;} #divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal; padding-left:4px; padding-right:30px; border:1px solid #333333; /*background:url(xjt.png) no-repeat right center;*/} #divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;} #divselect ul li{height:24px; line-height:24px;} #divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;} </style> <script type="text/javascript"> window.onload=function(){ var box=document.getElementById('divselect'), title=box.getElementsByTagName('cite')[0], menu=box.getElementsByTagName('ul')[0], as=box.getElementsByTagName('a'), index=-1; // 点击三角时 title.onclick=function(event){ event = event||window.event; menu.style.display = 'block'; if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } document.onkeyup = function(event){ event = event||window.event; if(event.keyCode==40){ index++; if(index>=as.length) index=0; for(var i=0; i<as.length;i++){ as[i].style.background = '#fff'; } as[index].style.background = '#ccc'; } if(event.keyCode==38){ index--; if(index<0) index=as.length-1; for(var i=0; i<as.length;i++){ as[i].style.background = '#fff'; } as[index].style.background = '#ccc'; } if(event.keyCode==13){ for(var i=0; i<as.length;i++){ as[i].style.background = '#fff'; } title.innerHTML = as[index].innerHTML; menu.style.display = 'none'; } } } // 滑过滑过、离开、点击每个选项时 for(var i=0; i<as.length; i++){ as[i].num = i as[i].onmouseover = function(){ this.style.background = '#ccc' index = as[i].num-1; } as[i].onmouseout = function(){ this.style.background = '#fff' } as[i].onclick = function(event){ event = event||window.event; if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } menu.style.display = 'none'; title.innerHTML = this.innerHTML; } } // 点击页面空白处时 document.onclick = function(){ menu.style.display = 'none'; } } </script> </head> <body> <div id="divselect"> <cite>请选择分类</cite> <ul> <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li> <li><a href="javascript:;" selectid="2">.NET开发</a></li> <li><a href="javascript:;" selectid="3">PHP开发</a></li> <li><a href="javascript:;" selectid="4">Javascript开发</a></li> <li><a href="javascript:;" selectid="5">Java特效</a></li> </ul> </div> </body> </html>