<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-size: 70%; /*設置字的大小*/ font-family: verdana, helvetica, arial, sans-serif; /* 設置body部分的樣式，直接寫在head的style裏，直接用body{}這種形式 設置字體，優先採用第一個， 第一個系統不識別就採用第二個，可以字體名稱可以加雙引號 */ } </style> </head> <body style="margin:0px"> <!--設置body標籤部分與左邊的距離，margin的意思是邊緣。0也就是body會貼着最左邊生成--> <p>鼠標停在空白區域可以顯示座標</p> <div id="coordiv" style="float:left;width: 199px;height:99px;border:1px solid black " οnmοusemοve="shubiaojinru(event)" οnmοuseοut="shubiaolikai(event)" > <!-- div的style也就是樣式可以直接定義在div的標籤裏 onmousemove也就是當鼠標進入的時候執行的函數，onmouseout也就是當鼠標離開的時候執行的函數。 --> </div> <br/> <br/> <br/> <div id="xyzuobiaoxianshiquyu"> </div> <script type="text/javascript"> function shubiaojinru(e) {/*當鼠標進入時，執行此函數。*/ x = e.clientX;/*直接寫一個x獲取鼠標的x*/ y = e.clientY;/*直接寫一個y獲取鼠標的y*/ document.getElementById("xyzuobiaoxianshiquyu").innerHTML = "Coordinates:("+x+","+y+")"; /* 獲取用於顯示文本的div然後通過 .innerHTML=""; 來設置需要顯示的文本內容， 文本內容直接用“”括起來，數據內容比如x,y,需要在前後加上+ */ } function shubiaolikai(e) {/*鼠標離開時執行此函數*/ document.getElementById("xyzuobiaoxianshiquyu").innerHTML = ""; /*獲取div,設置其顯示內容爲空白*/ } </script> </body> </html>具體效果如下
（因爲截圖時無法截取鼠標，所以圖片裏沒有鼠標）鼠標在div外
鼠標在div內
思路解釋：
第一句話是 寫在body標籤裏的一個p標籤 ，p標籤是一個單獨段落，所以再創建div時會在下一行
<p>鼠標停在空白區域可以顯示座標</p>
然後是兩個連續的div標籤，也都寫在body標籤裏，第一個div用於判定鼠標座標，第二個div用於顯示鼠標座標值
<div id="coordiv" style="float:left;width: 199px;height:99px;border:1px solid black " οnmοusemοve="shubiaojinru(event)" οnmοuseοut="shubiaolikai(event)" > <!-- div的style也就是樣式可以直接定義在div的標籤裏 onmousemove也就是當鼠標進入的時候執行的函數，onmouseout也就是當鼠標離開的時候執行的函數。 --> </div> <br/> <br/> <br/> <div id="xyzuobiaoxianshiquyu">div的屬性 id，style設置樣式（float：left向左浮動，不然第二個div會直接出現在第一個div下邊），onmousemove鼠標進入此div時執行的函數，onmouseout鼠標離開此div時執行的函數。
此外，這裏設置了一個body標籤的樣式，直接寫在了body標籤的style屬性裏
<body style="margin:0px"> <!--設置body標籤部分與左邊的距離，margin的意思是邊緣。0也就是body會貼着最左邊生成-->不僅在此處設置了body標籤的樣式，而且還在head標籤裏寫了style標籤來更改body標籤內容的樣式，而style標籤只能寫在head標籤裏，而script標籤則可以寫在head標籤與body標籤裏。
<style type="text/css"> body { font-size: 70%; /*設置字的大小*/ font-family: verdana, helvetica, arial, sans-serif; /* 設置body部分的樣式，直接寫在head的style裏，直接用body{}這種形式 設置字體，優先採用第一個， 第一個系統不識別就採用第二個，可以字體名稱可以加雙引號 */ } </style>這是寫在head標籤裏的style標籤，用來設置了一下body的字體樣式。
最後是功能函數的實現，script標籤實現。寫在了body標籤裏。
<script type="text/javascript"> function shubiaojinru(e) {/*當鼠標進入時，執行此函數。*/ x = e.clientX;/*直接寫一個x獲取鼠標的x*/ y = e.clientY;/*直接寫一個y獲取鼠標的y*/ document.getElementById("xyzuobiaoxianshiquyu").innerHTML = "Coordinates:("+x+","+y+")"; /* 獲取用於顯示文本的div然後通過 .innerHTML=""; 來設置需要顯示的文本內容， 文本內容直接用“”括起來，數據內容比如x,y,需要在前後加上+ */ } function shubiaolikai(e) {/*鼠標離開時執行此函數*/ document.getElementById("xyzuobiaoxianshiquyu").innerHTML = ""; /*獲取div,設置其顯示內容爲空白*/ } </script>