zhensolid
/
Python-100-Days


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
							<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#adv {
				width: 200px;
				height: 200px;
				color: yellow;
				position: fixed;
				right: 10px;
				top: 10px;
				background-color: blue;
			}
			#adv button {
				float: right;
				border: none;
				outline: none;
				color: white;
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<div id="adv">
			此广告位招租
			<button>关闭</button>
		</div>
		<script>
			+function() {
				var advDiv = document.querySelector('#adv');
				var button = document.querySelector('#adv button');
				var counter = 0;
				button.addEventListener('click', function() {
					counter += 1;
					if (counter < 3) {
						var currentStyle = 
							document.defaultView.getComputedStyle(advDiv);
						var newTop = parseInt(currentStyle.top) + 20;
						var newRight = parseInt(currentStyle.right) + 20;
						advDiv.style.top = newTop + 'px';
						advDiv.style.right = newRight + 'px';
					} else {
						advDiv.style.display = 'none';
					}
				});
			}();
			// 鼠标按下 - mousedown
			// 鼠标移动 - mousemove
			// 鼠标松开 - mouseup
			// clientX / clientY - 鼠标的横纵坐标
		</script>
	</body>
</html>