标签：前端

javascript之setInterval与setTimeout用法

马同学 评论

setTimeout

定义和用法: 　　setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。
语法: 　　setTimeout(code,millisec)
参数：
code （必需）：要调用的函数后要执行的 JavaScript 代码串。
millisec（必需）：在执行代码前需等待的毫秒数。
提示： 　　setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

继续阅读

javascript之屏幕距离

马同学 评论

获取当前元素距离浏览器窗口的位置  PS:是只读属性,不可设置

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>屏幕象素测试</title>
<style type="text/css">
	#div1{
		width:150px;
		height:100px;
		border:2px solid #4455ff;
		position:absolute;
		top:300px;
		left:230px;
		overflow:auto;
	}	
	#div2{
		
		
	}
	#div2_1{
		
	}
	#div3{
		
	}
</style>
</head>
<body>
	<div id="div1">

		点下我试试<br>
		中文会自动换行所以要用数字或字母
		111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
		
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
		中文会自动换行所以要用数字或字母
	</div>
	<div id="div2">
		<div id="div2_1">
		</div>
	</div>
	<div id="div3">
		
	</div>
	<script type="text/javascript" charset="utf-8">
		var div1 = document.getElementById("div1");
		console.log(div1);
		div1.scrollTop=10;
		div1.scrollLeft=10;
		with(document){
			write('距离浏览器窗口顶部 '+div1.offsetTop+'<br>');
			write('距离浏览器窗口左部 '+div1.offsetLeft+'<br>');
			write('当前元素宽度包含边框 '+div1.offsetWidth+'<br>');
			write('当前元素高度包含边框 '+div1.offsetHeight+'<br>');
			write('当前元素宽度不包含边框 '+div1.clientHeight+'<br>');
			write('当前元素高度不包含边框'+div1.clientHeight+'<br>');
			write('当前元素滚动条顶部位置'+div1.scrollTop+'<br>');
			//为什么scrollTop返回的是元素的高度，而scrollLeft返回的是设置的值 ??
			write('当前元素滚动条空间左部位置 包含边框'+div1.scrollWidth+'<br>');
			write('当前元素举动条空间顶部位置 包含边框'+div1.scrollHeight+'<br>');
		}
		//由事件产生的像素位置-----坐标
		//Firefox 点后重新刷新不会加载  ？？ 像素也有差别
		div1.onclick=function(event){
			with(document){
				console.log('当前元素点后的鼠标X坐标距离左边窗口位置 '+event.clientX+'<br>');
				console.log('当前元素点后的鼠标Y坐标距离顶部窗口位置'+event.clientY+'<br>');
				//网说解释说是获取当前事件后与容器的坐标 ??
				console.log(''+event.offsetX+'<br>');
				console.log(event.offsetY);
			}
		}
		//测试下 滚动事件 
div1.onscroll=function(event){
	//console.log(event);
	console.log(div1.scrollTop);
}

	</script>
</body>
</html>