當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
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 }; View Code?
轉載于:https://www.cnblogs.com/cc156676/p/5746925.html
總結
- 上一篇： 牛逼，70行代码开启微信分身术，让你无限
- 下一篇： JSONObject中optString