第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

hh

//創(chuàng)建獎(jiǎng)池?cái)?shù)組,與定時(shí)器。
var?data=['phone5','ipad','samsung','canon','hp','thankyou','shopcard','¥1000'],
????timer=null,
????flag=0;

window.onload=function(){
????var?play=document.getElementById('play'),
????????stop=document.getElementById('stop');

????//鼠標(biāo)抽獎(jiǎng)開始
????play.onclick=playFun;
????stop.onclick=stopFun;
????//鍵盤抽獎(jiǎng)事件
????document.onkeyup=function(e){
????????e=event?||?window.event;
????????//event.keyCode獲取事件鍵碼
????????if(e.keyCode===13){
????????????//判斷當(dāng)前flag的值
????????????if(flag===0){
????????????????playFun();?
????????????}else?{
????????????????stopFun();
????????????}
????????}
????}
}

function?playFun(){
????var?play=document.getElementById('play'),
????????title=document.getElementById('title');
????//先停止定時(shí)器，防止多次點(diǎn)擊疊加定時(shí)
????clearInterval(timer);
????//設(shè)定定時(shí)器執(zhí)行函數(shù)與間隔
????timer=setInterval(function(){
????????//Math.random取0～1中間隨機(jī)浮點(diǎn)數(shù)(不包括0與1),再乘以獎(jiǎng)池?cái)?shù)組長(zhǎng)度，并用Math.floor取整得到0到數(shù)組長(zhǎng)度之間的隨機(jī)整數(shù)。
????????var?random=Math.floor(Math.random()*data.length);
????????//通過隨機(jī)數(shù)取到的數(shù)組項(xiàng)替換元素內(nèi)容
????????title.innerHTML=data[random];
????},50);
????//誰調(diào)用函數(shù)，this指誰。但此處不能用this替代play，否則鍵盤事件中this將指代document.onkeyup，document無法改變背景
????play.style.background='#ccc';
????//flag放到這里對(duì)單純的onclick事件沒有影響，但對(duì)鍵盤事件與鍵鼠交叉操作的事件會(huì)有影響
????flag=1;
}

function?stopFun(){
????clearInterval(timer);
????var?play=document.getElementById('play');
????play.style.background='#036';
????flag=0;
}

kk

//封裝函數(shù)，通過className獲取需要的元素?cái)?shù)組
function?getByClass(clsName,parent){
????var?oParent=parent?document.getElementById(parent):document,
????????eles=[],
????????elements=oParent.getElementsByTagName('*');

????for(var?i=0,l=elements.length;i<l;i++){
????????if(elements[i].className==clsName){
????????????eles.push(elements[i]);
????????}
????}
????return?eles;
}

window.onload=drag;

function?drag(){
????//拖拽
????var?oTilte=getByClass('login_logo_webqq','loginPanel')[0];
????oTilte.onmousedown=fnDown;

????//關(guān)閉
????var?oClose=document.getElementById('ui_boxyClose');
????oClose.onclick=function(){
????????document.getElementById('loginPanel').style.display='none';?
????}

????//切換狀態(tài)
????//根據(jù)功能目標(biāo)，分析html結(jié)構(gòu)，設(shè)置步驟方法，先取出必須元素
????var?loginState=document.getElementById('loginState'),
????????stateList=document.getElementById('loginStatePanel'),
????????lis=stateList.getElementsByTagName('li'),
????????statetTxt=document.getElementById('login2qq_state_txt'),
????????loginStateShow=document.getElementById('loginStateShow');
????
????//?先設(shè)置點(diǎn)擊顯示狀態(tài)列表，并對(duì)點(diǎn)擊事件設(shè)置阻止冒泡，防止冒泡到document層的點(diǎn)擊關(guān)閉列表功能
????loginState.onclick=function(e){
????????e=e?||?window.event;
????????if(e.stopPropagation){
????????????e.stopPropagation();
????????}else?{
????????????e.cancleBubble=true;
????????}
????????stateList.style.display='block';
????}

????//光標(biāo)滑過、離開和點(diǎn)擊狀態(tài)列表效果
????//使用for遍歷循環(huán)，為每個(gè)li添加事件
????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';
????????}
????????//點(diǎn)擊，先隱藏列表、阻止冒泡(否則會(huì)冒泡到loginState.onclick事件)
????????lis[i].onclick=function(e){
????????????//點(diǎn)擊到哪個(gè)li就獲取哪個(gè)li的id
????????????var?id=this.id;
????????????e=e?||?window.event;
????????????if(e.stopPropagation){
????????????????e.stopPropagation();
????????????}else?{
????????????????e.cancleBubble=true;
????????????}
????????????stateList.style.display='none';
????????????//并替換指定className,使用之前的函數(shù)封裝
????????????statetTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;
????????????//注意保留的className后的空格
????????????loginStateShow.className='login-state-show?'+id;
????????}
????}
????//實(shí)現(xiàn)點(diǎn)擊窗口任意地方都可關(guān)閉狀態(tài)列表，為防止冒泡沖突loginState.onclick事件需要阻止冒泡
????document.onclick=function(){
????????stateList.style.display='none';
????}
}

function?fnDown(event){???//此event為onmousedown觸發(fā),攜帶光標(biāo)clientXY參數(shù)
????event=event?||?window.event;
????var?oDrag=document.getElementById('loginPanel'),
????????//計(jì)算出onmousedown時(shí)光標(biāo)與面板之間的水平垂直距離
????????disX=event.clientX-oDrag.offsetLeft,
????????disY=event.clientY-oDrag.offsetTop;
????//移動(dòng)
????document.onmousemove=function(event){?//此event為onmousemove觸發(fā)
????????event=event?||?window.event;
????????fnMove(event,disX,disY);//為下一步進(jìn)行封裝?
????}
????//釋放
????document.onmouseup=function(){
????????document.onmousemove=null;//光標(biāo)釋放直接將onmousemove賦值null，清空
????????document.onmouseup=null;//在清空自身，不浪費(fèi)資源，防止與其他的onmouseup沖突?
????}
}

function?fnMove(e,posX,posY){
????var?oDrag=document.getElementById('loginPanel'),
????????l=e.clientX-posX,//光標(biāo)距離?減去?光標(biāo)與面板之間的距離?等于面板實(shí)際定位距離
????????t=e.clientY-posY,//可以保證光標(biāo)與面板的相對(duì)位置不變的情況下拖拽面板
????????winW=document.documentElement.clientWidth?||?document.body.clientWidth,//窗口的寬度，后者為IE兼容
????????winH=document.documentElement.clientHeight?||?document.body.clientHeight,//窗口的高度
????????maxW=winW-oDrag.offsetWidth-10,//避免面板拖出窗口，限定拖拽最大距離(減10是因?yàn)槊姘尻P(guān)閉按鈕盒子使用了絕對(duì)定位，拖拽時(shí)會(huì)被邊框遮擋)
????????maxH=winH-oDrag.offsetHeight;//用窗口寬高減去面板寬高即可得到
????
????//進(jìn)行距離判斷，固定上下限
????if(l<0){
????????l=0;
????}else?if(l>maxW){
????????l=maxW;
????}
????//因?yàn)殛P(guān)閉按鈕在面板頂部，所以最小值改為其絕對(duì)定位位移的相反值
????if(t<10){
????????t=10;
????}else?if(t>maxH){
????????t=maxH;
????}

????oDrag.style.left=l+'px';
????oDrag.style.top=t+'px';
}

addEvent(ele, type, hander)

hander是函數(shù)名，不能加()，加了()就成了函數(shù)方法有返回值。

function showMessage(event){

????alert("event.target.nodename");

?????event.stopPropagation();//阻止事件向上傳播

}

this引用被觸發(fā)的元素：

DOM2級(jí)事件處理程序 **定義了兩個(gè)方法：?

> addEventListener()--------------添加事件 >

?removeEventListener()-----------移除事件?

三個(gè)參數(shù)設(shè)置;事件名稱，處理方法(函數(shù))，布爾值-----冒泡（false）或捕獲（true）

DOM0級(jí)事件處理程序：

var y=document.getElementById('btn2');? 取得btn2按鈕對(duì)象。

btn2.onclick=function(){

????alert('這是通過DOM0級(jí)添加的事件！')

}

btn2.onclick=null;? ? 刪除onclick屬性

HTML事件處理程序：

DOM的事件對(duì)象

1. type屬性? 用于獲取事件類型

2. target屬性 用于獲取事件目標(biāo)

3. stopPropagation()方法 用于阻止事件冒泡

4. preventDefault()方法 阻止事件的默認(rèn)行為
   

stopPropagation阻止冒泡

dom不支持IE瀏覽器

IE事件處理程序

attachEvent（）添加事件

detachEvent（）刪除事件

????????接收相同的兩個(gè)參數(shù);事件處理程序的名稱和事件處理程序的函數(shù)

??? 三種事件處理

1、對(duì)于HTML事件來說，只能添加一個(gè)事件程序，且與JS的耦合過密，不利于后期的維護(hù)。

2、對(duì)于DOM0級(jí)事件，可以添加多個(gè)事件程序，但是只會(huì)執(zhí)行最后一個(gè)事件。

3、對(duì)于DOM2級(jí)事件，同樣可以添加多個(gè)事件程序，并且從上到下按順序執(zhí)行

? DOM2級(jí)事件定義了兩個(gè)方法：

????????用于處理指定和刪除事件程序的操作，addEventListener（）和removeEventListener（）。

????????接收三個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和布爾值。

dom中和ie中的event屬性，比如獲取dom中的事件目標(biāo)event.target,在ie中則要用event.srcElement

兩種事件流（處理順序完全相反）

????????????????????????????????????????????三種事件處理

1、對(duì)于HTML事件來說，只能添加一個(gè)事件程序，且與JS的耦合過密，不利于后期的維護(hù)。

2、對(duì)于DOM0級(jí)事件，可以添加多個(gè)事件程序，但是只會(huì)執(zhí)行最后一個(gè)事件。

3、對(duì)于DOM2級(jí)事件，同樣可以添加多個(gè)事件程序，并且從上到下按順序執(zhí)行！