-
<!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>您好！请登录</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");
/**
* 封装监听事件
* ele-传入元素
* type-事件类型
* handle-调用方法
*/
function eventListener(ele,type,handle){ //
if(ele.addEventListener){ //判断非ie执行事件
ele.addEventListener(type,handle);
}else if(ele.attachEvent){ //ie浏览器执行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>
查看全部 -
把事件封装到新定义的对象中。
查看全部 -
把事件封装在对象里面，把功能封装在方法里面。
查看全部 -
事件对象
查看全部 -
事件处理程序
查看全部 -
事件流
查看全部 -
事件是文档或浏览器窗口中发生的特定的交互瞬间。
事件流：描述的是从页面中接受事件的顺序 （IE：事件冒泡流 / Netscape事件捕获流）
事件冒泡流：即事件最开始由最具体的无素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到最不具体的那个节点（文档）
查看全部 -
1.首先分析实现原理；然后分析要取出的对象，进行取出；再给对象绑定事件；
2.分析各种事件，并对其件进行函数封装；
3.块的里面的文字（状态、下）不见了：用负缩进把他们搞到窗口之外了，当代码注释使用。
4.在适当的地方阻止事件冒泡：
ul父元为div，点击li时希望ul隐藏，点击div时希望其显示，在点击li后会冒泡到div ,因而需要阻止冒泡；
注意区分onmousedown和onclick，只能阻止相对应类型事件。
重点：利用事件冒泡实现切换状态菜单；当一个块内包含众多事件时，必须要注意到事件冒泡的影响。
5.在其他任何地方点击，要使列表隐藏：document.onclick是代表在页面的任何地方点击事件。
document下的子元素还有一个onclick事件，所以要注意事件冒泡的影响；查看全部 -
console.log
主要是方便你调式javascript用的,你可以看到你在页面中输出的内容。
相比alert他的优点是：
他能看到结构化的东西，如果是alert，淡出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
console里面的内容非常丰富，你可以在控制台输入：console，然后就可看到它有网页的各种提示。
键盘事件
onkeydown：按下键盘上任意键时触发，（按住不放会重复触发）
onkeypress：按下键盘上的字符键时触发
onkeyup：释放键盘上的键时触发,（即按住不会重复触发）
keyCode：event对象的keyCode属性用于得到键盘对应键的键码值，回车键为13。
定时器：
注意：使用timer前一定要进行初始化=====>var timer[];
timer=setInterval(function(){},50)：每隔50ms执行一次函数
clearInterval(定时器名)：清除定时器，再加定时器前需清除原来的定时器，防止多个定时器叠加
随机数：
Math.random()：生成0-1的随机数
Math.floor()：向下取整查看全部 -
var arr = ['三星手机','小米1','小米2','苹果','魅族','50元话费','谢谢光临','血压仪','100元代金券','慕课网职业路径'];
var timer;
var flag = 0;
window.onload = function(){
var play = document.getElementById('play');
var 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();
}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:当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件
keyPress:当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件
keyUp:当用户释放键盘上的键时触发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().查看全部 -
拖拽->鼠标跟随
1、绑定鼠标点击事件
2、获取鼠标坐标：clientX clientY (所有浏览器都支持此属性)
3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽)
4、将拖拽元素设置成绝对定位
5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法)
6、设置left、top限定，禁止元素拖出窗口
7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth
8、拖拽元素绑定onmouseup事件，在此事件中注销onmousemove事件，完成元素拖拽的释放效果
注意可以把left、top理解成x轴、y轴element.offsetTop 返回元素的垂直偏移位置。<br>
<br>
element.offsetLeft 返回元素的水平偏移位置。
相对于浏览器窗口查看全部 -
1、任何能够跟着鼠标移动的东西 都要有一个前提：绝对定位
2、鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。
3、js ie10以下版本不支持document.getElementsByClassName
4、js封装getClass方法，获取class
5、实现随鼠标拖动，需要让窗口的坐标随着鼠标移动，鼠标的坐标保存在时间的clientX和clientY两个属性中。
6、onmousedown鼠标按下 窗口和鼠标的位置同步；
element.style.left/top=clientX/Y+'px';
onmousemove当鼠标指针在元素内部移动时重复地触发2.在指定区域（整个QQ面板）按下——页面随光标移动，即页面的坐标与光标坐标一致——释放鼠标是停止移动
3.clientX与clentY能够获取鼠标的光标位置；onmousedown鼠标按下事件；移动要用到onmousemove事件，当鼠标指针在元素内部移动时重复的触发；clientX与clentY是event这个对象的属性，非ie用event,ie用window.event
查看全部 -
在IE10之前的游览器不支持document.getElementByClassName()。因此为了解决游览器不兼容的问题，首先我们需要封装一个获取类名的方法（这个面板的样式大部分是用class写的）
// 封装一个取类名方法
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中的事件对象
（非IE的事件对象用event，IE8之前用window.event)
IE中的事件对象
1.type属性 用于获取事件类型
2.srcElement属性 用于获取事件目标
IE和其它浏览器兼容：
event = event||window.event (IE8之前的浏览器用window.event)
var ele = event.target ||event.srcElement
3.ancelBubble属性 用于阻止事件冒泡。
true表示阻止冒泡，false表示不阻止冒泡。
4.returnValue属性 用于阻止事件的默认行为。注意：判断不要判断方法，判断属性。例如：if(event.propagation)设置false为阻止事件的默认行为。（ie中基本都是属性，没有方法）
查看全部
举报