-
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style>
????????@charset?'utf-8';
????????body{margin:0;padding:0;background:#87ceeb}
????????.tips{display:flex;width:500px;height:300px;margin:100px?auto;align-items:center;justify-content:center;flex-flow:column;background:rgba(255,255,255,.5);border-radius:20px}
????????.tips?h1{font-family:Arial,Helvetica,sans-serif;font-size:3rem;color:#555;letter-spacing:1rem}
????????#tips-login{padding:0;width:100px;height:40px;border:0;border-radius:5px;font-size:1.4rem;color:#1e90ff;background:rgba(255,255,255,.9);outline:0}
????????#login_box{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5)}
????????#login_box?.login{position:relative;margin:100px?auto;width:500px;height:300px;background:rgba(255,255,255,1)}
????????#login_box?.login?h2{padding:10px;color:#333;text-align:center}
????????#login_box?.login?#close{position:absolute;top:-15px;right:-15px;display:block;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;color:#fff;background:rgba(0,0,0,.5)}
????</style>
</head>
<body>
????<div?class="tips">
????????<h1>您好！請(qǐng)登錄</h1>
????????<input?type="button"?value="登?錄"?id="tips-login">
????</div>
????<div?id="login_box">
????????<div?class="login">
????????????<h2>用戶登錄</h2>
????????????<span?id="close">X</span>
????????</div>
????</div>
????<script>
????????window.onload?=?function?()?{?
????????????var?btn?=?document.getElementById("tips-login"),?
????????????????loginBox?=?document.getElementById("login_box"),?
????????????????close?=?document.getElementById("close");
????????????/**
?????????????*?封裝監(jiān)聽事件
?????????????*?ele-傳入元素
?????????????*?type-事件類型
?????????????*?handle-調(diào)用方法
?????????????*/
????????????function?eventListener(ele,type,handle){?//
????????????????if(ele.addEventListener){???//判斷非ie執(zhí)行事件
????????????????????ele.addEventListener(type,handle);
????????????????}else?if(ele.attachEvent){??//ie瀏覽器執(zhí)行onclick事件
????????????????????ele.attachEvent('on'+type,handle)
????????????????}else{
????????????????????ele['on'+type]=handle;
????????????????}
????????????}
????????????function?show(){
????????????????loginBox.style.display?=?'block';
????????????}
????????????function?hide(){
????????????????loginBox.style.display?=?'none';
????????????}
????????????eventListener(btn,'click',show);
????????????eventListener(close,'click',hide);
????????}
????</script>
</body>
</html>
查看全部 -
把事件封裝到新定義的對(duì)象中。
查看全部 -
把事件封裝在對(duì)象里面，把功能封裝在方法里面。
查看全部 -
事件對(duì)象
查看全部 -
事件處理程序
查看全部 -
事件流
查看全部 -
事件是文檔或?yàn)g覽器窗口中發(fā)生的特定的交互瞬間。
?事件流：描述的是從頁面中接受事件的順序 （IE：事件冒泡流 / Netscape事件捕獲流）
?事件冒泡流：即事件最開始由最具體的無素（文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn)）接收，然后逐級(jí)向上傳播到最不具體的那個(gè)節(jié)點(diǎn)（文檔）
查看全部 -
1.首先分析實(shí)現(xiàn)原理；然后分析要取出的對(duì)象，進(jìn)行取出；再給對(duì)象綁定事件；
2.分析各種事件，并對(duì)其件進(jìn)行函數(shù)封裝；
3.塊的里面的文字（狀態(tài)、下）不見了：用負(fù)縮進(jìn)把他們搞到窗口之外了，當(dāng)代碼注釋使用。
4.在適當(dāng)?shù)牡胤阶柚故录芭荩?br />ul父元為div，點(diǎn)擊li時(shí)希望ul隱藏，點(diǎn)擊div時(shí)希望其顯示，在點(diǎn)擊li后會(huì)冒泡到div ,因而需要阻止冒泡；
注意區(qū)分onmousedown和onclick，只能阻止相對(duì)應(yīng)類型事件。
重點(diǎn)：利用事件冒泡實(shí)現(xiàn)切換狀態(tài)菜單；當(dāng)一個(gè)塊內(nèi)包含眾多事件時(shí)，必須要注意到事件冒泡的影響。
5.在其他任何地方點(diǎn)擊，要使列表隱藏：document.onclick是代表在頁面的任何地方點(diǎn)擊事件。
document下的子元素還有一個(gè)onclick事件，所以要注意事件冒泡的影響；查看全部 -
console.log
主要是方便你調(diào)式j(luò)avascript用的,你可以看到你在頁面中輸出的內(nèi)容。
相比alert他的優(yōu)點(diǎn)是：
他能看到結(jié)構(gòu)化的東西，如果是alert，淡出一個(gè)對(duì)象就是[object object],但是console能看到對(duì)象的內(nèi)容。
console不會(huì)打斷你頁面的操作，如果用alert彈出來內(nèi)容，那么頁面就死了，但是console輸出內(nèi)容后你頁面還可以正常操作。
console里面的內(nèi)容非常豐富，你可以在控制臺(tái)輸入：console，然后就可看到它有網(wǎng)頁的各種提示。
鍵盤事件
onkeydown：按下鍵盤上任意鍵時(shí)觸發(fā)，（按住不放會(huì)重復(fù)觸發(fā)）
onkeypress：按下鍵盤上的字符鍵時(shí)觸發(fā)
onkeyup：釋放鍵盤上的鍵時(shí)觸發(fā),（即按住不會(huì)重復(fù)觸發(fā)）
keyCode：event對(duì)象的keyCode屬性用于得到鍵盤對(duì)應(yīng)鍵的鍵碼值，回車鍵為13。
定時(shí)器：
注意：使用timer前一定要進(jìn)行初始化=====>var timer[];
timer=setInterval(function(){},50)：每隔50ms執(zhí)行一次函數(shù)
clearInterval(定時(shí)器名)：清除定時(shí)器，再加定時(shí)器前需清除原來的定時(shí)器，防止多個(gè)定時(shí)器疊加
隨機(jī)數(shù)：
Math.random()：生成0-1的隨機(jī)數(shù)
Math.floor()：向下取整查看全部 -
var arr = ['三星手機(jī)','小米1','小米2','蘋果','魅族','50元話費(fèi)','謝謝光臨','血壓儀','100元代金券','慕課網(wǎng)職業(yè)路徑'];
var timer;
var flag = 0;
window.onload = function(){
var play = document.getElementById('play');
var stop = document.getElementById('stop');
//鼠標(biāo)抽獎(jiǎng)
play.onclick = playFun;
stop.onclick = stopFun;
//鍵盤抽獎(jiǎng)
document.onkeyup = function(event){
event = event || window.event;
if(event.keyCode == 13){
if(flag == 0){
playFun();
}else if(flag == 1){
stopFun();
}
}
}
}
function playFun() {
var title = document.getElementById('title');
var play = document.getElementById('play');
if(flag==0){
timer = setInterval(function(){
var random = Math.floor(Math.random()*arr.length);
title.innerHTML = arr[random];
},100)
play.style.background="#333"
flag = 1;
}
}
function stopFun(){
clearInterval(timer);
flag = 0；
play.style.background="#113"
}查看全部 -
keyDown:當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件
keyPress:當(dāng)用戶按下鍵盤上的字符鍵時(shí)觸發(fā)，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件
keyUp:當(dāng)用戶釋放鍵盤上的鍵時(shí)觸發(fā)var data=['Phone5','Ipad','三星筆記本','佳能相機(jī)','惠普打印機(jī)','謝謝參與','50元充值卡','1000元超市購(gòu)物券'],
??? timer=null;
window.onload=function(){
??? var play=document.getElementById('play'),
??????? stop=document.getElementById('stop');
??? // 開始抽獎(jiǎng)
??? 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}定義光標(biāo)為手型
js:console.log("random")//打印random
Math.floor(Math.random()*數(shù)組的長(zhǎng)度8)//0~7之間的隨機(jī)數(shù)取整
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().查看全部 -
拖拽->鼠標(biāo)跟隨
1、綁定鼠標(biāo)點(diǎn)擊事件
2、獲取鼠標(biāo)坐標(biāo)：clientX clientY (所有瀏覽器都支持此屬性)
3、為容器元素綁定onmousemove (表明可拖拽元素只在容器元素內(nèi)可拖拽)
4、將拖拽元素設(shè)置成絕對(duì)定位
5、在onmousemove中改變拖拽元素的left、top (注意left、top的算法)
6、設(shè)置left、top限定，禁止元素拖出窗口
7、當(dāng)前瀏覽器窗口寬度document.documentElement.clientWidth或document.body.clientWidth
8、拖拽元素綁定onmouseup事件，在此事件中注銷onmousemove事件，完成元素拖拽的釋放效果
注意可以把left、top理解成x軸、y軸element.offsetTop 返回元素的垂直偏移位置。<br>
<br>
element.offsetLeft 返回元素的水平偏移位置。
相對(duì)于瀏覽器窗口查看全部 -
1、任何能夠跟著鼠標(biāo)移動(dòng)的東西 都要有一個(gè)前提：絕對(duì)定位
2、鼠標(biāo)事件都是在瀏覽器窗口中的特定位置上發(fā)生的。這個(gè)位置信息保存在事件的clientX和clientY屬性中。所有瀏覽器都支持這兩個(gè)屬性，它們的值表示事件發(fā)生時(shí)鼠標(biāo)指針在視口中的水平和垂直坐標(biāo)。不包括頁面滾動(dòng)的距離。
3、js ie10以下版本不支持document.getElementsByClassName
4、js封裝getClass方法，獲取class
5、實(shí)現(xiàn)隨鼠標(biāo)拖動(dòng)，需要讓窗口的坐標(biāo)隨著鼠標(biāo)移動(dòng)，鼠標(biāo)的坐標(biāo)保存在時(shí)間的clientX和clientY兩個(gè)屬性中。
6、onmousedown鼠標(biāo)按下 窗口和鼠標(biāo)的位置同步；
element.style.left/top=clientX/Y+'px';
onmousemove當(dāng)鼠標(biāo)指針在元素內(nèi)部移動(dòng)時(shí)重復(fù)地觸發(fā)2.在指定區(qū)域（整個(gè)QQ面板）按下——頁面隨光標(biāo)移動(dòng)，即頁面的坐標(biāo)與光標(biāo)坐標(biāo)一致——釋放鼠標(biāo)是停止移動(dòng)
3.clientX與clentY能夠獲取鼠標(biāo)的光標(biāo)位置；onmousedown鼠標(biāo)按下事件；移動(dòng)要用到onmousemove事件，當(dāng)鼠標(biāo)指針在元素內(nèi)部移動(dòng)時(shí)重復(fù)的觸發(fā)；clientX與clentY是event這個(gè)對(duì)象的屬性，非ie用event,ie用window.event
查看全部 -
在IE10之前的游覽器不支持document.getElementByClassName()。因此為了解決游覽器不兼容的問題，首先我們需要封裝一個(gè)獲取類名的方法（這個(gè)面板的樣式大部分是用class寫的）
// 封裝一個(gè)取類名方法
function getClasses(clsName,parent){
??? var oParent = parent ? document.getElementById(parent) : document,
??????? eles = [],
??????? elements = oParent.getElementsByTagName("*");
??? for(var i=0,j=elements.length;i<j;i++){
??????? if(elements[i].className === clsName){
??????????? eles.push(elements[i]);??????
??????? }
??? }
??? return eles;
}查看全部 -
IE中的事件對(duì)象
（非IE的事件對(duì)象用event，IE8之前用window.event)
IE中的事件對(duì)象
1.type屬性 用于獲取事件類型
2.srcElement屬性 用于獲取事件目標(biāo)
IE和其它瀏覽器兼容：
event = event||window.event? (IE8之前的瀏覽器用window.event)
var? ele = event.target? ||event.srcElement
3.ancelBubble屬性 用于阻止事件冒泡。
true表示阻止冒泡，false表示不阻止冒泡。
4.returnValue屬性?? 用于阻止事件的默認(rèn)行為。?注意：判斷不要判斷方法，判斷屬性。例如：if(event.propagation)設(shè)置false為阻止事件的默認(rèn)行為。（ie中基本都是屬性，沒有方法）
查看全部
舉報(bào)