JS学习笔记1

最新推荐文章于 2024-09-01 23:35:40 发布

灬奔跑的蜗牛灬

最新推荐文章于 2024-09-01 23:35:40 发布

阅读量80

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_16183731/article/details/87223721

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

阻止冒泡事件

//阻止事件冒泡.下面的不会在输出，几个控件重合在一起,顺序执行，设置了后面的不会在执行   支持ie8/谷歌
window.event.cancelBubble=true;
//不支持IE8 ,支持火狐/谷歌
e.stopPropagation();e--- 事件参数对象，

window.event 就是事件对象 ---- e 是一样的。
//获取地址栏上#号以后的内容
console.log(window.location.hash)
//获取主机名和端口
console.log(window.location.host)
//获取协议（http/https/ftp…）
console.log(window.location.protocol)
//获取搜索的内容
console.log(window.location.search)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
	</head>
	<body>
		<div id = "dv">点我试试</div>
		<div id = "dv">点我试试</div>
	</body>
	
	<script type="application/javascript" charset="UTF-8">
		document.getElementsByTagName("div")[0].onclick=function(){
			//阻止事件冒泡.下面的不会在输出，几个控件重合在一起,顺序执行，设置了后面的不会在执行支持ie8/谷歌
				window.event.cancelBubble=true;
			//不支持IE8 e.stopPropagation();e--- 事件参数对象，
				console.log("div 被点击了")
			//获取地址栏上#号以后的内容
				console.log(window.location.hash)
			//获取主机名和端口
				console.log(window.location.host)
			//获取协议（http/https/ftp....）
				console.log(window.location.protocol)
			//获取搜索的内容
				console.log(window.location.search)
			
			}
		
		document.body.onclick=function(){
				console.log("body 被点击了")
			}
		
		document.onclick=function(){
				console.log("document 被点击了")
			}
		
	</script>
</html>

定时器
//定时器该定时器会返回自己的id 值 var timeId = window.setInterval(函数,时间)
//定时器的执行过程，页面加载完毕，一定时间后重复执行，除非清除定时器
var timeId = window.setInterval(函数,时间)
//清除定时器 window.clearInterval(定时器Id值)
//一次行定时器只执行一次 window.setTimeout(函数,时间)

//定时器 该定时器会返回自己的id 值 var timeId = window.setInterval(函数,时间)
		//定时器的执行过程 ，页面加载完毕，一定时间后重复执行，除非清除定时器
		var timeId = window.setInterval(timer,500)
		function timer(){
			console.log("时间"+new Date())
			//清除定时器 window.clearInterval(定时器Id值)
			window.clearInterval(timeId)
		}
		
		
		//一次行定时器 只执行一次 window.setTimeout(函数,时间)
		var timeId2 = window.setTimeout(function(){
			console.log(new Date())
			window.clearTimeout(timeId2);//清除定时器
		},100);

///div 透明度渐变

var val = 10;
var timeId3 = window.setInterval( function(){		document.getElementById("opcity").style.opacity=val/10;
val-=1;
if(val<0){
	window.clearInterval(timeId3);
}
		},100)

///div 移动

#opcity{
				height: 20px;
				width: 30px;
				background-color: red;
				position: absolute;/* 脱离文档才能移动*/
			}
//div 移动
		var timeId4 = window.setInterval(function(){
			var left = document.getElementById("opcity").offsetLeft;//获取实体位置，数字类型 无px
			left+=100;
			if(left<1000){
				document.getElementById("opcity").style.left = left+"px";
			}else{
				document.getElementById("opcity").style.left = "0px";
				window.clearInterval(timeId4);
			}
		},300)