H5學習之6 獲取滑鼠座標值並且顯示其值

2021-07-15 12:48:55 字數 1532 閱讀 5047

html

>

lang=

"en"

>

style=

"margin:0px"

>

滑鼠停在空白區域可以顯示座標

id="coordiv"

style=

"float:left;

width: 199px;

height:99px;

border:1px solid black "

οnmοusemοve=

"shubiaojinru(event)"

οnmοuseοut=

"shubiaolikai(event)"

>

id="xyzuobiaoxianshiquyu"

>

具體效果如下

(因為截圖時無法擷取滑鼠,所以裡沒有滑鼠)滑鼠在div外

滑鼠在div內

思路解釋:

第一句話是 寫在body標籤裡的乙個p標籤 ,p標籤是乙個單獨段落,所以再建立div時會在下一行

滑鼠停在空白區域可以顯示座標

然後是兩個連續的div標籤,也都寫在body標籤裡,第乙個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)"

>

id="xyzuobiaoxianshiquyu"

>

div的屬性 id,style設定樣式(float:left向左浮動,不然第二個div會直接出現在第乙個div下邊),onmousemove滑鼠進入此div時執行的函式,onmouseout滑鼠離開此div時執行的函式。

此外,這裡設定了乙個body標籤的樣式,直接寫在了body標籤的style屬性裡

style=

"margin:0px"

>

不僅在此處設定了body標籤的樣式,而且還在head標籤裡寫了style標籤來更改body標籤內容的樣式,而style標籤只能寫在head標籤裡,而script標籤則可以寫在head標籤與body標籤裡。

這是寫在head標籤裡的style標籤,用來設定了一下body的字型樣式。 

最後是功能函式的實現,script標籤實現。寫在了body標籤裡。

H5學習之5 canvas的運用

html id mycanvas width 200 height 100 style border 1px solid c3c3c3 具體效果如下 思路解釋 在body裡建立canvas標籤,就是畫布。id mycanvas width 200 height 100 style border 1p...

H5學習之24 CSS定位

html lang en eg smile.gif id image class overflow 當乙個容器無法顯示完文字時可以設定滾動條以此能夠檢視完整的文字當乙個容器無法顯示完文字時,可以設定滾動條以此能夠檢視完整的文字當乙個容器無法顯示完文字時,可以設定滾動條以此能夠檢視完整的文字當乙個容器...

前端開發學習之路之h5表單

1.input 裡面什麼都能放,毫無限制 單行文字框 密碼框 單選按鈕 複選按鈕 附件 提交按鈕 h5拓展 搜尋框,日期框,數字框,email框.input的屬性 type name 引數的key 不能預設 value 引數的value 按鈕的時候不能預設 placeholder 提示語 check...