-
ie event兼容问题查看全部
-
常用查看全部
-
键盘事件：查看全部
-
事件是文档或浏览器窗口中发生的特定的交互瞬间。查看全部
-
var data=['Phone5','Ipad','三星筆記本','佳能相機','惠普打印機','謝謝參與','50元充值卡','1000元超市購物券'], timer=null, flag=0; //這是用來判斷你回車鍵是按第幾次了 window.onload=function(){ var play=document.getElementById('play'), stop=document.getElementById('stop'); // 開始抽獎 play.onclick=playFun; stop.onclick=stopFun; // 鍵盤事件 document.onkeyup=function(event){ event = event || window.event; if(event.keyCode==13){ if(flag==0){ playFun(); flag=1; }else{ stopFun(); flag=0; } } } } function stopFun(){ clearInterval(timer); var play=document.getElementById('play'); play.style.background='#036'; }查看全部
-
console.log()—— 主要是方便调式javascript用的,可以看到在页面中输出的内容。 相比alert其的优点是： a.能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。 b.console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。 c.console里面的内容非常丰富，你可以在控制台输入：console，然后就可看到它有网页的各种提示。查看全部
-
var data=['Phone5','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','50元充值卡','1000元超市购物券'], timer=null; window.onload=function(){ var play=document.getElementById('play'), stop=document.getElementById('stop'); // 开始抽奖 play.onclick=playFun; function playFun(){ var title=document.getElementById('title'); var play=document.getElementById('play'); clearInterval(timer); timer=setInterval(function(){ var random=Math.floor(Math.random()*data.length); title.innerHTML=data[random]; },50); play.style.background='#999'; } PS: css{cursor:pointer}定義光標為手型 js:console.log("random")//打印random Math.floor(Math.random()*數組的長度8)//0~7之間的隨機數取整 JavaScript can "display" data in different ways: Writing into an alert box, using window.alert(). Writing into the HTML output using document.write(). Writing into an HTML element, using innerHTML. Writing into the browser console, using console.log().查看全部
-
// 鼠標滑過、離開和點擊狀態列表時 for(var i=0,l=lis.length;i<l;i++){ lis[i].onmouseover=function(){ this.style.background='#567'; } lis[i].onmouseout=function(){ this.style.background='#FFF'; } lis[i].onclick=function(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } var id=this.id; stateList.style.display='none'; stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML; // 雖然getByClass返回結果只有一個, 但是他還是陣列的模式, 所以"[0]"還是要加 loginStateShow.className=''; loginStateShow.className='login-state-show '+id; } } // 點擊其他區域的時候, 自動取消選擇列表(隱藏菜單) document.onclick=function(){ stateList.style.display='none'; } }查看全部
-
function drag(){ var oTitle=getByClass('login_logo_webqq','loginPanel')[0]; // 拖曳 oTitle.onmousedown=fnDown; // 關閉 var oClose=document.getElementById('ui_boxyClose'); oClose.onclick=function(){ document.getElementById('loginPanel').style.display='none'; } // 切換狀態 var loginState=document.getElementById('loginState'), stateList=document.getElementById('loginStatePanel'), lis=stateList.getElementsByTagName('li'), stateTxt=document.getElementById('login2qq_state_txt'), loginStateShow=document.getElementById('loginStateShow'); loginState.onclick=function(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } stateList.style.display='block'; }查看全部
-
function fnMove(e,posX,posY){ var oDrag=document.getElementById('loginPanel'), l=e.clientX-posX, //e.clientX 是新的光標的座標 t=e.clientY-posY, winW=document.documentElement.clientWidth || document.body.clientWidth, winH=document.documentElement.clientHeight || document.body.clientHeight, maxW=winW-oDrag.offsetWidth-10, maxH=winH-oDrag.offsetHeight; if(l<0){ l=0; }else if(l>maxW){ l=maxW; } if(t<0){ t=10; }else if(t>maxH){ t=maxH; } oDrag.style.left=l+'px'; oDrag.style.top=t+'px'; }查看全部
-
function fnDown(event){ // 這邊的event事件是光標點下去時候的事件對象 event = event || window.event; var oDrag=document.getElementById('loginPanel'), // 光標按下時光標和面板之間的距離 disX=event.clientX-oDrag.offsetLeft, disY=event.clientY-oDrag.offsetTop; // 移動 document.onmousemove=function(event){ // 這邊的event事件是每移動的時候的事件對象 event = event || window.event; fnMove(event,disX,disY); } // 释放鼠标, mouseup, 當用戶釋放鼠標按鈕時觸發 document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } }查看全部
-
任何能夠跟著鼠標移動的東西 都要有一個前提：絕對定位 (in CSS) left, top 根據座標來變化. onmousemove事件： 當鼠標指針在元素內部移動時重複地觸發, 我們鼠標每動一下都會觸發onmousemove事件 window.onload=drag; // 頁面加載的時候, 加載drag函數 function drag(){ var oTitle=getByClass('login_logo_webqq','loginPanel')[0]; // 拖曳 oTitle.onmousedown=fnDown; // 鼠標按下是屬於onmousedown這個事件 } function fnDown() { document.onmousemove=function(event){ // 整個頁面的控制, 以document表示. 所以這邊才用document // 移動就是用onmousemove事件來表示 event = event || window.event; // 鼠標到哪, 面板就到哪,以下代码有bug oDrag.style.left = event.clientX+"px"; oDrag.style.top = event.clientY+"px"; } }查看全部
-
document.getElementsByClassName(); IE10以前都不支持, 所以最好還是用一個函數封裝出一個可以抓ClassName的函數 function getByClass(clsName, parent){ // 必要的參數寫在前面, parent是非必要的所以寫在後面 var oParent=parent?document.getElementById(parent):document, eles=[], // 因為class名可以重複, 所以抓出來後就會是一個陣列 // 把父元素下所有的元素取出來, 一個一個判斷和我們要的一不一樣 elements=oParent.getElementsByTagName('*'); for(var i=0,l=elements.length;i<l;i++){ if(elements[i].className==clsName){ eles.push(elements[i]); // push()方法是Add a new item to an array } } return eles; }查看全部
-
使用事件处理程序： 1.HTML事件处理程序：缺点是HTML代码和JS代码的耦合程度大，不方便进行维护； 2.DOM0级事件处理程序： 较传统的方式：把一个函数赋值给一个事件的处理程序属性；查看全部
-
任何跟随鼠标的事件，对象都得是绝对定位。position:absolute;查看全部
举报
0/150
提交
取消