- 给登录按钮添加事件，点击时让登录层示，点击登录面板的关闭按钮，关闭整个登录层
- 抽奖活动
- 下拉菜单
给登录按钮添加事件，点击时让登录层示，点击登录面板的关闭按钮，关闭整个登录层
<!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>