05-初学JavaScript
由于昨天事情较多 没有时间去写这个 那就今天早上写吧
一、冒泡：
-
冒泡事件：
定义：当多个Dom元素互相嵌套的时候，一个元素触发了某个事件（例如Click事件），那么嵌套此事件的所有元素都会被触发一次Click事件，注意：只会触发他的直系亲属元素，而与其自己，父级，爷级等等同级的亲戚集是不会触发的
-
DOM事件流
元素的触发流程分为三个阶段
-
捕获阶段：先从祖先级一直找到触发的源元素（所有元素都触发了相同事件）
-
目标阶段：找到原元素，然后触发源元素的事件
-
冒泡阶段：然后重新流回祖先元素，又触发了一遍相同事件
-
这是我在网上找的结论 我自己的理解就是父元素套子元素 点击子元素 同时也会触发父元素 不会触发他的同级元素 但是要注意的是 只能触发相同的事件
要阻止冒泡的话
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 500px;height: 500px;background: yellow;border: 1px solid black;" >
<div> <input type="text" /><span></span>
</div>
</div>
<script>
var i1 = document.getElementsByTagName('input')[0];
var d1 = document.getElementsByTagName('div')[0];
var d2 = document.getElementsByTagName('div')[1];
i1.onfocus = function() {
document.getElementsByTagName('span')[0].innerText = "这是span"
}
d2.onclick = function(e){
alert(123)
document.getElementsByTagName('span')[0].innerText = "这是span";
e = e || window.event;
e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
}
d1.onclick = function(e){
alert('这是div');
}
</script>
</body>
</html>
二、视口大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
for (var i = 0; i <100; i++) {
document.write('<p>这是第'+i+'段落元素<p>');
}
document.onclick = function (){
var width = document.documentElement.clientWidth;//获取视口的大小
var height = document.documentElement.clientHeight;
alert(width+' '+height);
}
//视口大小改变事件（很重要）
</script>
</body>
</html>
三、网页大小
for (var i = 0; i <100; i++) {
document.write('<p>这是第'+i+'段落元素<p>');
}
document.onclick = function (){
//获取网页大小
var width = document.documentElement.scrollWidth;
var height = document.documentElement.scrollHeight;
alert(width+' '+height);
}
四、元素大小
document.onclick = function (){
var div = document.getElementsByTagName('div')[0];
// var width = div.clientWidth;//内容区加内边距
// var height = div.clientHeight;
var width = div.offsetWidth;
var height = div.offsetHeight;
alert(width+' '+height);
}
这里有两种获取的方法 一是clientwidth 这获取的是内容区加内边距 第二个是offsetwidth
五、滚动条的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
position: fixed;
right: 0px;
bottom: 0px;
display:none;
}
</style>
</head>
<body>
<a id="a"></a>
<script>
for(var i = 0;i<1000;i++){
document.write("<p>这是第"+i+"个段落元素</p>");
}
//这是点击鼠标获取到顶端的距离
document.onclick = function(){
alert(document.documentElement.scrollTop);
}
document.onscroll = function(){//滚动条事件
var top = document.documentElement.scrollTop;//滚动条距离body上边框的距离
if(top>300){
document.getElementsByTagName('img')[0].style.display = 'block'
}else{
document.getElementsByTagName('img')[0].style.display = 'none'
}
}
</script>
<a href="#a"> <img src="../img/plane.png" /></a>
</body>
</html>
这是一个小案例 鼠标往下滚动 到一定位置 右下角图片就显示出来 然后点击回到顶部 这里由于没有加动画样式 所以有些简陋 但是需求达到了
六、小飞机移动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
position:fixed;
}
</style>
</head>
<body>
<img src="../img/plane.png" alt="">
</body>
<script>
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
var a =0,b=0,c=0,d=0;
window.onload = function (e){
var img = document.getElementsByTagName('img')[0];
var flywidth = img.clientWidth;//内容区加内边距
var flyheight = img.clientHeight;
console.log();
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
img.style.left=(width-flywidth)/2+'px'
img.style.top=(height-flyheight)/2+'px';
window.onresize = function (){
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
img.style.left=(width-flywidth)/2+'px'
img.style.top=(height-flyheight)/2+'px';
}
document.onkeydown = function (e){
var mtop='300';
if (e.keyCode==39){//右
a=5
img.style.left=parseFloat(img.style.left)+a+'px';
console.log(img.style.left);
}else if(e.keyCode==38){//上
// var a =0,b=0,c=0,d=0;
a=-5
img.style.top=parseFloat(img.style.top)+a+'px'
}else if(e.keyCode==37){//左
// var a =0,b=0,c=0,d=0;
a=-5
img.style.left=parseFloat(img.style.left)+a+'px'
}else if(e.keyCode==40){//下
// var a =0,b=0,c=0,d=0;
a=5
img.style.top=parseFloat(img.style.top)+a+'px'
}
}
}
</script>
</html>
这里是自己做的有些简陋 判断上下左右键之后 每次给这个a值初始化一下 这样才能让移动距离不是越加越大
七、倒计时删除文本框的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button">
<button>取消删除</button>
<textarea>
</textarea>
</body>
<script>
var btn1 = document.getElementsByTagName("input")[0];
var btn2 = document.getElementsByTagName("button")[0];
var t1 = document.getElementsByTagName("textarea")[0];
var i = 3;
btn1.value = '还有'+i+'秒成功删除了'
console.log(btn1.value);
btn1.onclick=function (){
t2 = setInterval(f,1000)
t = setTimeout(a,3000);
}
function f(){
i--;
btn1.value='还有'+i+'秒成功删除了'
if(i == 0){
clearInterval(t2)
i=3;
btn1.value='还有'+i+'秒成功删除了';
}
}
function a(){
t1.value='';
}
btn2.onclick = function (){
btn1.value='还有3秒成功删除了';
clearTimeout(t);
clearInterval(t2)
}
</script>
</html>
这里有一个小bug 解决半天还是没有弄出来 希望有机会可以解决吧
浙公网安备 33010602011771号