上聯：這個需求很簡單
下聯：怎麼實現我不管
橫批：明天上線

一、滑鼠座標獲取

1、橫座標：clientX
2、縱座標：clientY

	<script>
		// onmousemove - 當滑鼠移動會觸發事件
		document.onmousemove = function (e) {
			console.log(e.clientX, e.clientY);
		};
	</script>

二、offset系列屬性

1、offsetWidth：用於獲取元素的真實寬度，除了margin以外的寬
2、offsetHeight：用於獲取元素的真實高度，除了margin以外的高
3、offsetLeft：用於獲取元素到定位父盒子之間的左側距離，當前元素的邊框到定位父盒子的邊框之間的距離(邊框到邊框)。
4、offsetTop：用於獲取元素到定位父盒子之間的頂部距離，當前元素的邊框到定位父盒子的邊框之間的距離(邊框到邊框)。
5、offsetParent：獲取定位父盒子

模擬拖拽小案例

	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			left: 100px;
			top: 120px;
		}
	</style>
	
	<div id="box"></div>
	
	<script>
		var box = document.getElementById('box');
		// - 盒子預設不跟隨，點選盒子後，讓盒子以點選位置跟隨
		//   1 在點選盒子時，獲取滑鼠在盒子內的座標，計算方式：滑鼠座標 - 盒子的左側距離
		//   2 設定真正的拖拽效果：需要將點選分為點下和擡起兩種操作，mousedown - 滑鼠按鍵點下後觸發，mouseup - 滑鼠按鍵擡起後觸發
		// - 滑鼠按鍵點下時獲取滑鼠在盒子內的座標
		box.onmousedown = function (e) {
			var x = e.clientX - box.offsetLeft;
			var y = e.clientY - box.offsetTop;
			// - 滑鼠移動，設定跟隨
			document.onmousemove = function (e) {
				box.style.left = e.clientX - x + 'px';
				box.style.top = e.clientY - y + 'px';
			};
		};
		// - 滑鼠按鍵擡起，清除跟隨效果
		box.onmouseup = function () {
			// 清除跟隨效果
			document.onmousemove = null;
		};
	</script>
 

三、定時器

1、timeout

timeout定時器，延時定時器
1、引數1：時間到達後執行的操作，函式
引數2：延遲的時間，毫秒單位
返回值：返回當前定時器標識，用於進行清除操作。

var timer = null;
timer = setTimeout(function () {
	console.log('這是列印的內容');
}, 3000);

2、清除定時器的方式
引數：定時器的標識id

btn.onclick = function () {
	clearTimeout(timer);
};

2、interval

interval定時器 - 間隔定時器
1、設定方式：
引數1：間隔執行的操作程式碼，函式
引數2：間隔時間，毫秒單位

var timer = null;
timer = setInterval(function () {
	console.log('列印了內容');
}, 1000);

2、清除定時器

btn.onclick = function () {
	clearInterval(timer);
	// 特殊點：兩個定時器的清除方式可以互換使用，這個操作沒有意義，不推薦這樣使用。
	// clearTimeout(timer);
};

運動的案例請參考我寫的四個輪播圖
簡單輪播圖（1）：https://blog.csdn.net/weixin_40589472/article/details/83957670
左右焦點輪播圖（2）：https://blog.csdn.net/weixin_40589472/article/details/83962253
無縫滾動輪播圖（3）：https://blog.csdn.net/weixin_40589472/article/details/83962613
完整輪播圖（4）：https://blog.csdn.net/weixin_40589472/article/details/83988106