JS 事件练习

QQ拖拽及状态栏选择

HTML

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>QQ练习</title>
 5     <link href="css/main.css" rel="stylesheet" />
 6     <script src="js/drag.js"></script>
 7 </head>
 8 <body>
 9     <div class="loginPanel" id="loginPanel">
10          <div style="position: relative; z-index: 1;">
11             <div class="ui_boxyClose" id="ui_boxyClose"></div>
12         </div>
13         <div class="login_logo_webqq"></div>
14  
15         <div class="inputs">
16             <div class="sign-input"><span>帐　号：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" 
17             class="input01" tabindex="1" value="QQ号码或Email帐号" 
18             onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div>
19             <div class="sign-input"><span>密　码：</span><span><input name="p" id="p" maxlength="16" 
20             type="password" class="input01" tabindex="2" /></span></div>
21         </div>
22 
23         <div class="bottomDiv">
24             <div class="btn" style="float: left"></div>
25             <div>
26                 <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态">
27                     <div id="loginStateShow" class="login-state-show online">状态</div>
28                     <div class="login-state-down">下</div>
29                     <div class="login-state-txt" id="login2qq_state_txt">在线</div>
30                     <ul id="loginStatePanel" class="statePanel login-state" style="display: none">
31                         <li id="online" class="statePanel_li">
32                             <div class="stateSelect_icon online"></div>
33                             <div class="stateSelect_text">我在线上</div>
34                         </li>
35                         <li id="callme" class="statePanel_li">
36                             <div class="stateSelect_icon callme"></div>
37                             <div class="stateSelect_text">Q我吧</div>
38                         </li>
39                         <li id="away" class="statePanel_li">
40                             <div class="stateSelect_icon away"></div>
41                             <div class="stateSelect_text">离开</div>
42                         </li>
43                         <li id="busy" class="statePanel_li">
44                             <div class="stateSelect_icon busy"></div>
45                             <div class="stateSelect_text">忙碌</div>
46                         </li>
47                         <li id="silent" class="statePanel_li">
48                             <div class="stateSelect_icon silent"></div>
49                             <div class="stateSelect_text">请勿打扰</div>
50                         </li>
51                         <li id="hidden" class="statePanel_li">
52                             <div class="stateSelect_icon hidden"></div>
53                             <div class="stateSelect_text">隐身</div>
54                         </li>
55                     </ul>
56                 </div>
57             </div>
58         </div>
59     </div>
60 </body>
61 </html>

View Code

CSS

  1 .loginPanel {
  2     width: 380px;
  3     height: 247px;
  4     left: 400px;
  5     top: 120px;
  6     position: absolute;
  7     border: 1px solid #ccc;
  8     background: #f6f6f6;
  9     -moz-border-radius: 10px;
 10     -webkit-border-radius: 10px;
 11     border-radius: 10px;
 12     -moz-box-shadow: 0 0 8px #000;
 13     -webkit-box-shadow: 0 0 8px #000;
 14     box-shadow: 0 0 8px #000;
 15 }
 16 
 17 
 18 .login_logo_webqq {
 19     background: url('../images/login_window_logo.png') no-repeat -210px -0px;
 20     margin-left: 100px;
 21     margin-top: 10px;
 22     width: 200px;
 23     height: 44px;
 24     cursor: move;
 25 }
 26 
 27 
 28 .inputs {
 29     font: bold 15px arial;
 30     margin-left: 80px;
 31     margin-top: 30px;
 32 }
 33 
 34 .inputs .sign-input {
 35     padding-bottom: 20px;
 36 }
 37 
 38 .inputs .sign-input input {
 39     width: 170px;
 40     border: 1px #ccc solid;
 41     color: #868686;
 42     font-size: 16px;
 43     padding: 2px;
 44     -moz-border-radius: 10px;
 45     -webkit-border-radius: 10px;
 46     -khtml-border-radius: 10px;
 47     -border-radius: 10px;
 48     outline: none;
 49 }
 50 
 51 .btn {
 52     background: url("../images/login_btn.png") no-repeat -111px 0;
 53     width: 111px;
 54     height: 36px;
 55     border: 0;
 56     text-align: center;
 57     line-height: 20px;
 58     color: #0C4E7C;
 59     cursor: pointer;
 60     margin-left: 14px;
 61 }
 62 
 63 
 64 .login-state-trigger {
 65     cursor: pointer;
 66     display: block;
 67     float: left;
 68     height: 16px;
 69     overflow: hidden;
 70     width: 120px;
 71     margin: 4px 0 0 0;
 72 }
 73 
 74 .login-state-trigger2 {
 75     margin: 10px 0 0 20px;
 76 }
 77 
 78 .login-state-down {
 79     background: url("../images/ptlogin.png") no-repeat scroll 0 -22px transparent;
 80     float: left;
 81     height: 6px;
 82     margin-top: 5px;
 83     overflow: hidden;
 84     text-indent: -999em;
 85     width: 7px;
 86 }
 87 
 88 .login-state-show {
 89     float: left;
 90     height: 14px;
 91     overflow: hidden;
 92     text-indent: -999em;
 93     width: 14px;
 94     margin: 1px 4px 0 0;
 95 }
 96 
 97 .login-state-txt {
 98     float: left;
 99     margin-left: 5px;
100     font-size: 12px;
101     >line-height:18px!important;
102 }
103 
104 .login-state .callme {
105     background: url("../images/ptlogin.png") -72px 0 no-repeat;
106 }
107 
108 .login-state .online {
109     background: url("../images/ptlogin.png") 0 0 no-repeat;
110 }
111 
112 .login-state .away {
113     background: url("../images/ptlogin.png") -18px 0 no-repeat;
114 }
115 
116 .login-state .busy {
117     background: url("../images/ptlogin.png") -36px 0 no-repeat;
118 }
119 
120 .login-state .silent {
121     background: url("../images/ptlogin.png") -108px 0 no-repeat;
122 }
123 
124 .login-state .hidden {
125     background: url("../images/ptlogin.png") -54px 0 no-repeat;
126 }
127 
128 .statePanel {
129     display: none;
130     position: absolute;
131     right: 68px;
132     top: 193px;
133     z-index: 10;
134     margin: 0;
135     border-width: 1px;
136     border-style: solid;
137     border-color: #ccc #6a6a6a #666 #cdcdcd;
138     padding: 0;
139     width: 100px;
140     height: 133px;
141     overflow: hidden;
142     background: white;
143     font-size: 12px;
144     line-height: 1.5;
145 }
146 
147 .statePanel .statePanel_li {
148     display: block;
149     float: left;
150     margin: 0;
151     padding: 3px 0;
152     width: 100px;
153     height: 16px;
154     line-height: 16px;
155     overflow: hidden;
156     zoom: 1;
157     cursor: pointer;
158 }
159 
160 .stateSelect_icon {
161     float: left;
162     margin: 2px 0 0 5px;
163     width: 14px;
164     height: 14px;
165     overflow: hidden;
166 }
167 
168 .stateSelect_text {
169     margin: 0 0 0 22px;
170 }
171 
172 .bottomDiv {
173     margin-left: 70px;
174 }
175 
176 .ui_boxyClose{
177     width:28px;
178     height:28px;
179     position:absolute;
180     top:-10px;
181     right:-10px;
182     cursor:pointer;
183     background:url('../images/boxy_btn.png') no-repeat;z-index:1}.
184 
185 ie6_0 .ui_boxyClose{
186     background:0;
187     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='boxy_btn.png',sizingMethod='scale')
188 }

View Code

JavaScript

  1 //封装一个getByClass函数，接收两个参数：第一个必需，第二个可选
  2 function getByClass(className, parentId) {
  3     var parent = parent ? document.getElementById(parentId) : document,
  4     eles = new Array(),
  5     elements = parent.getElementsByTagName("*");
  6     for(var i = 0, l = elements.length; i < l; i++) {
  7         if(elements[i].className == className) {
  8             eles.push(elements[i]);
  9         }
 10     }
 11     return eles;    //切记这个函数返回的是一个数组！！！
 12 };
 13 
 14 //在页面加载完毕之后调用drag函数
 15 window.onload = drag;
 16 
 17 //封装drag函数
 18 function drag() {
 19     //使用getByClass函数取得相应类名的某个元素；
 20     //千万记得，这个函数返回的是一个数组，要想取得某个元素，一定要通过方括号访问
 21     var title = getByClass("login_logo_webqq", "loginPanel")[0];
 22     //在鼠标在title区域按下时调用fnDown函数
 23     title.onmousedown = fnDown;
 24     //点击面板右上角按钮可关闭面板，实际上是将其隐藏
 25     var close = document.getElementById("ui_boxyClose");
 26     close.onclick = function() {
 27         //通过JS设置css属性值，其值必须是字符串
 28         document.getElementById("loginPanel").style.display = "none";
 29     };
 30     //点击loginState区域将loginStatePanel显示出来
 31     var loginState = document.getElementById("loginState");
 32     var loginStatePanel = document.getElementById("loginStatePanel");
 33     loginState.onclick = function(event) {
 34         loginStatePanel.style.display = "block";
 35         //阻止冒泡
 36         event = event || wind.event;
 37         if(event.stopPropagation) {
 38             event.stopPropagation();
 39         } else if(event.cancelBubble) {
 40             event.cancelBubble = true;
 41         };
 42     };
 43     //鼠标悬浮、离开和点击状态列表时
 44     var list = loginStatePanel.getElementsByTagName("li");
 45     for(var i = 0, l = list.length; i < l; i++) {
 46         //鼠标悬浮时，相应的元素改变背景颜色
 47         list[i].onmouseover = function() {
 48             this.style.backgroundColor = "#567";
 49         };
 50         //鼠标离开，恢复原来的颜色
 51         list[i].onmouseout = function() {
 52             this.style.backgroundColor = "";
 53         };
 54         //鼠标点击时，切换状态
 55         list[i].onclick = function(event) {
 56             //鼠标点击时，将loginStatePanel隐藏
 57             loginStatePanel.style.display = "none";
 58             //无效！！！
 59             //点击某一个元素，将loginStatePanel隐藏；
 60             //点击事件会冒泡，冒到祖先元素loginState，这个元素上已经绑定了一个点击事件，点击时将loginStatePanel显示出来；
 61             //最终的结果就是loginStatePanel先被隐藏后又被显示，所以隐藏没有效果。
 62             //阻止冒泡！！！
 63             event = event || wind.event;
 64             if(event.stopPropagation) {
 65                 event.stopPropagation();
 66             } else if(event.cancelBubble) {
 67                 event.cancelBubble = true;
 68             };
 69             //鼠标点击选择后，改变登录状态
 70             //改变显示的文字
 71             var state_txt = document.getElementById("login2qq_state_txt");
 72             var id = this.id;
 73             state_txt.innerHTML = getByClass("stateSelect_text", id)[0].innerHTML;
 74             //改变显示的图标
 75             var loginStateShow = document.getElementById('loginStateShow');
 76             loginStateShow.className = "";
 77             loginStateShow.className = "login-state-show " + id;
 78         }
 79     };
 80     //在页面的任何位置点击，隐藏loginStatePanel
 81     //如果单纯地添加这个事件，loginStatePanel将无法显示出来
 82     //原因在于：前面在loginState区域点击的时候，显示loginStatePanel；
 83     //冒泡到document上，又被隐藏了
 84     //所以需要在前面的事件上阻止冒泡
 85     document.onclick = function() {
 86         var loginStatePanel = document.getElementById("loginStatePanel");
 87         loginStatePanel.style.display = "none";
 88     };
 89 };
 90 
 91 //封装fnDown函数
 92 function fnDown(event) {
 93     event = event || window.event;
 94     var panel = document.getElementById("loginPanel");
 95     //在鼠标按下的那一刻，取得鼠标点击的那个点距离面板左上角的水平和垂直距离
 96     var disX = event.clientX - panel.offsetLeft;
 97     var disY = event.clientY - panel.offsetTop;
 98     //鼠标在页面中移动，持续触发document.onmousemove事件，核心思想是：鼠标到哪儿，面板到哪儿
 99     document.onmousemove = function(event) {
100         event = event || window.event;
101         //调用fnMove函数
102         fnMove(event, disX, disY);
103     };
104     //鼠标在页面中任何地方松开，都可以取消跟随效果；所以onmouseup应该挂载在document上，而不是title
105     document.onmouseup = function() {
106         document.onmousemove = null;
107         document.onmouseup = null;
108     }
109 }
110 
111 //封装fnMove函数
112 function fnMove(event, posX, posY) {
113     event = event || window.event;
114     //在一个新的函数作用域中，需要重新取得所需要的元素
115     var panel = document.getElementById("loginPanel");
116     //计算面板左上角距离页面左上角的动态距离
117     var l = event.clientX - posX;
118     var t = event.clientY - posY;
119     //计算面板能够移动的最大最小距离，防止移动到页面之外，出现滚动条
120     var window_width = document.documentElement.clientWidth || document.body.clientWidth;
121     var window_height = document.documentElement.clientHeight || document.body.clientHeight;
122     var max_width = window_width - panel.offsetWidth - 10;
123     var max_height = window_height - panel.offsetHeight;
124     //控制面板移动的最大最小距离
125     if(l < 0) {
126         l = 0;
127     } else if (l > max_width) {
128         l = max_width;
129     };
130     if(t < 0) {
131         t = 0;
132     } else if (t > max_height) {
133         t = max_height;
134     };
135     //最后的设置，让面板左上角距离页面左上角的距离随着鼠标的移动动态调整，达到拖拽效果
136     //切记，要带单位！
137     panel.style.left = l + "px";
138     panel.style.top = t + "px";
139 };

View Code

此demo有瑕疵！

通过alert()检测，id会随着点击不同的状态栏而相应变化，但是getByClass("stateSelect_text", id)[0].innerHTML永远都是“我在线上”，原因未知！

抽奖

HTML

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>抽奖</title>
 5         <meta charset="utf-8">
 6         <link type="text/css" rel="stylesheet" href="css/style.css">
 7         <script type="text/javascript" src="js/script.js"></script>
 8     </head>
 9     <body>
10         <div id="title" class="title">开始抽奖啦！</div>
11         <div class="btns">
12             <span id="start">开 始</span>
13             <span id="stop">停 止</span>
14         </div>
15     </body>
16 </html>

View Code

CSS

 1 * {
 2     margin:0;
 3     padding:0;
 4 }
 5 
 6 .title {
 7     width:400px;
 8     height:70px;
 9     margin:0 auto;
10     padding-top:30px;
11     text-align:center;
12     font-size:24px;
13     font-weight:bold;
14     color:#F00;
15 }
16 
17 .btns {
18     width:190px;
19     height:30px;
20     margin:0 auto;}
21 
22 .btns span {
23     display:block;       
24     float:left;
25     width:80px;
26     height:27px;
27     line-height:27px;
28     background:#036;
29     border:1px solid #eee;
30     border-radius:7px;
31     margin-right:10px;
32     color:#FFF;
33     text-align:center;
34     font-size:14px;
35     font-family:"微软雅黑";
36     cursor:pointer;
37 }

View Code

JavaScript

 1 //抽奖效果的核心思想：创建一个数组，随机取得数组中的某个元素。
 2 //创建一个数组备用
 3 var data = ["iPhone", "iPad", "iPad Mini", "iPod", "Thank you", "Thank you","Thank you", "Thank you"];
 4 var timer = null;
 5 var flag = 0;
 6 
 7 window.onload = lottery;
 8 
 9 function lottery() {
10     var start = document.getElementById("start");
11     var stop = document.getElementById("stop");
12     //鼠标事件
13     start.onclick = playStart;
14     stop.onclick = playStop;
15     //键盘事件
16     document.onkeyup = function(event) {
17         event = event || window.event;
18         //检测是否按了回车键
19         if(event.keyCode === 13) {
20             //如果flag为0，则表示没有按过回车键，开始抽奖，然后将flag赋值为1
21             //为了达到鼠标与键盘的完美配合效果，将flag赋值分别写在playStart和playStop函数里
22             if(flag === 0) {
23                 playStart();
24                 //flag = 1;
25             } else if(flag ===1) {
26                 //如果flag为1，则表示正在抽奖，停止抽奖，将flag重置为0，以便开始下次抽奖
27                 playStop();
28                 //flag = 0;
29             }
30         };
31     };
32 };
33 
34 //封装playStart函数
35 function playStart() {
36     var title = document.getElementById("title");
37     //每次点击只执行一个定时器，关掉之前的定时器
38     clearInterval(timer);
39     //生成新的定时器
40     timer = setInterval(function() {
41         //每隔一段时间生成一个随机数，所以变量random必须写在setInterval内部
42         var random = Math.floor(Math.random() * 8);
43         title.innerHTML = data[random];
44     }, 50);
45     //改变按钮的背景颜色
46     var start = document.getElementById("start");
47     start.style.backgroundColor = "#999";
48     flag = 1;
49 };
50 //封装playStop函数
51 function playStop() {
52     //清除定时器
53     clearInterval(timer);
54     //恢复"开始"按钮的颜色
55     var start = document.getElementById("start");
56     start.style.backgroundColor = "#036";
57     flag = 0;
58 };

View Code

下拉菜单

HTML

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>下拉菜单</title>
 6         <link rel="stylesheet" href="style.css">
 7     </head>
 8     <body>
 9         <div id="divselect">
10             <cite>请选择分类</cite>
11             <ul>
12                 <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
13                 <li><a href="javascript:;" selectid="2">.NET开发</a></li>
14                 <li><a href="javascript:;" selectid="3">PHP开发</a></li>
15                 <li><a href="javascript:;" selectid="4">Javascript开发</a></li>
16                 <li><a href="javascript:;" selectid="5">Java特效</a></li>
17             </ul>
18         </div>
19     <script type="text/javascript" src="script.js"></script>
20     </body>
21 </html>

View Code

CSS

 1 body,ul,li {
 2     margin:0; 
 3     padding:0; 
 4     font-size:13px;
 5 }
 6 
 7 ul,li {
 8     list-style:none;
 9 }
10 
11 #divselect {
12     width:186px;
13      margin:80px auto; 
14      position:relative; 
15      z-index:10000;
16 }
17 
18 #divselect cite {
19     width:150px; 
20     height:24px;
21     line-height:24px; 
22     display:block; 
23     color:#807a62; 
24     cursor:pointer;
25     font-style:normal;
26     padding-left:4px; 
27     padding-right:30px; 
28     border:1px solid #333333; 
29     background:url(xjt.png) no-repeat right center;
30 }
31 
32 #divselect ul {
33     width:184px;
34     border:1px solid #333333;
35     background-color:#ffffff; 
36     position:absolute; 
37     z-index:20000; 
38     margin-top:-1px; 
39     display:none;
40 }
41 
42 #divselect ul li {
43     height:24px; 
44     line-height:24px;
45 }
46 
47 #divselect ul li a {
48     display:block; 
49     height:24px; 
50     color:#333333; 
51     text-decoration:none; 
52     padding-left:10px; 
53     padding-right:10px;
54 }

View Code

JavaScript

 1 window.onload = draw;
 2 
 3 function draw() {
 4     var select = document.getElementById("divselect");
 5     select.onclick = drawDown;
 6     document.onclick = function() {
 7         //关闭下拉菜单
 8         var ulist = document.getElementsByTagName("ul")[0];
 9         ulist.style.display = "none";
10         //清除背景颜色
11         var list = ulist.getElementsByTagName("a");
12         for(var i = 0, l = list.length; i < l; i++) {
13             list[i].style.backgroundColor = "";
14         }
15     };
16 };
17 
18 function drawDown(event) {
19     var ulist = document.getElementsByTagName("ul")[0];
20     ulist.style.display = "block";
21             event = event || window.event;
22             if(event.stopPropagation) {
23                 event.stopPropagation();
24             } else if(event.cancelBubble) {
25                 event.cancelBubble = true;
26             }
27     var list = ulist.getElementsByTagName("a");
28 
29     //鼠标事件
30     for(var i = 0, l = list.length; i < l; i++) {
31         list[i].onmouseover = function() {
32         //清除所有键盘事件导致的背景颜色
33         for(var i = 0, l = list.length; i < l; i++) {
34             list[i].style.backgroundColor = "";
35         }
36             this.style.backgroundColor = "#567";
37         };
38         list[i].onmouseout = function() {
39             this.style.backgroundColor = "";
40         };
41         list[i].onclick = function(event) {
42             var cite = document.getElementsByTagName("cite")[0];
43             cite.innerHTML = this.innerHTML;
44             ulist.style.display = "none";
45             event = event || window.event;
46             if(event.stopPropagation) {
47                 event.stopPropagation();
48             } else if(event.cancelBubble) {
49                 event.cancelBubble = true;
50             }
51         };
52     };
53 
54     //键盘事件
55     //声明并初始化一个变量index，赋值为-1
56     var index = -1;
57     document.onkeyup = function(event) {
58         event = event || window.event;
59         //清除所有鼠标事件导致的背景颜色
60         for(var i = 0, l = list.length; i < l; i++) {
61             list[i].style.backgroundColor = "";
62         }
63         //如果按下的是向下方向键
64         if(event.keyCode === 40) {
65             //每按键一次，index递增
66             index++;
67             //控制index的大小范围
68             //如果index大于等于数组的长度，则将其重置为0，这时候就会选中数组的第一项，此时应该恢复数组最后一项的背景颜色
69             if(index >= l) {
70                 index = 0;
71                 list[l-1].style.backgroundColor = "";
72             }
73             //第一次按向上方向键时，index从-1变成0，以index为索引号，改变键盘选中的每一项的背景颜色
74             list[index].style.backgroundColor = "#567";
75             //恢复上一项的背景颜色
76             list[index-1].style.backgroundColor = "";
77         }
78         //如果按下的是向上方向键，逻辑同上
79         if(event.keyCode ===38) {
80             index--;
81             if(index < 0) {
82                 index = l -1;
83                 list[0].style.backgroundColor = "";
84             }
85             list[index].style.backgroundColor = "#567";
86             list[index+1].style.backgroundColor = "";
87         }
88         //如果按下的是回车键
89         if(event.keyCode === 13) {
90             var cite = document.getElementsByTagName("cite")[0];
91             cite.innerHTML = list[index].innerHTML;
92             ulist.style.display = "none";
93         };
94     }
95 };