伪类 - 码农教程

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		#div1
		{
			width: 200px;height: 200px;background: red;position: absolute;left: 50%;top: 50%;margin: -100px  0 0 -100px;box-shadow: 0 -100px 0 pink;
		}
		#div1:after
		{
			width: 100%;height: 100%;background: black;position: absolute;left: -100%;content: "666";box-shadow: 0 200px 0 yellow;color: white;
		}
		#div1:before
		{
			width: 100%;height: 100%;background: green;position: absolute;left: 100%;content: "777";box-shadow: 0  200px 0 blue;color: white;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
	<script type="text/javascript">
		function getStyle(obj,style)
		{
			if(obj.currentStyle)
			{
				return obj.currentStyle[style];
			}
			else
			{
				return getComputedStyle(obj)[style];
			}
		}
		console.log(getComputedStyle(div1,":after")['width']);
		var json={"height":"200px"}
		alert(json["height"]);
		//alert(div1.currentStyle.height);//ie系列低的浏览器用
		alert(getComputedStyle(div1)["height"]);//都兼容
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<video id="video"></video>
	<script type="text/javascript">
		video.src="http://images.sohu.com/ytv/SH/Coke/64036020120714021103.mp4?t="+Math.random();
		video.addEventListener("progress",function()
			{
				console.log(video.buffered.end(0));//缓冲
			});
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
div{width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;margin: -100px 0 0 -100px;
	transition:0.5s;
}

	</style>
</head>
<body>
	<div id="div1"></div>
	<script type="text/javascript">
		div1.onclick=function()
		{
			this.style.transform="rotate(90deg)";
		}
		div1.addEventListener("transitionend",function()
			{
				if(div1.style.background=="red")
				{
					div1.style.transform="rotate(0deg)";
					div1.style.background="black";
				}
				else
				{
					div1.style.background="red";
				}
			});
	</script>
</body>
</html>

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
</head>
<body>
<script type="text/javascript">
	
	
	setInterval = alert;
	setInterval(1)
	//可以简写为:
	setInterval(function()
		{
			alert(1);
		},这里是系统默认的事件);
</script>
</body>
</html>

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title>
    <style type="text/css">
*{margin: 0;padding: 0;}
#div1{width: 200px;height: 200px;background: black;}
#div1:after{
	width: 314px;height: 200px;
	background: red;
	content: '';
	position: absolute;
	left: 200px;
}


#div2{height: 200px;background: green;}

    </style> 
</head>

<body>
<div id='div1'></div>
<script type="text/javascript">
	/*
	function getStyle(obj,style){
		if(obj.currentStyle){//ie
			return obj.currentStyle[style];
		}
		else{//非ie
			return getComputedStyle(obj)[style]
		}
	}
	*/
	console.log(getComputedStyle(div1,':after')['width']);
	/*
	var json = {
		'height':'200px'
	}
	*/
	//alert(json['height']);
	//alert(div1.currentStyle.height)
//	alert(getComputedStyle(div1)['height'])


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