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