1.记住密码 提示框
生活随笔
收集整理的這篇文章主要介紹了
1.记住密码 提示框
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
用JS實現(xiàn)：當(dāng)鼠標(biāo)移入的時候顯示提示框，鼠標(biāo)移出的時候隱藏提示框
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 #div1{ 8 width: 100px; 9 height: 50px; 10 background: #FFCC99; 11 border: 1px solid #FF9900; 12 display: none; 13 } 14 </style> 15 </head> 16 <body> 17 <!--當(dāng)鼠標(biāo)移入的時候，把div1的style的display變成block--> 18 <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" 19 onmouseout="document.getElementById('div1').style.display='none';"/> 記住密碼 20 21 <div id="div1"> 22 為了您的賬號安全，請謹(jǐn)慎選擇！ 23 </div> 24 25 </body> 26 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 #div1{ 8 width: 100px; 9 height: 50px; 10 background: #FFCC99; 11 border: 1px solid #FF9900; 12 display: none; 13 } 14 </style> 15 </head> 16 <body> 17 <!--當(dāng)鼠標(biāo)移入的時候，把div1的style的display變成block--> 18 <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" 19 onmouseout="document.getElementById('div1').style.display='none';"/> 記住密碼 20 21 <div id="div1"> 22 為了您的賬號安全，請謹(jǐn)慎選擇！ 23 </div> 24 25 </body> 26 </html>
?
?
代碼如上，我們會發(fā)現(xiàn)，當(dāng)鼠標(biāo)移入選擇框時會實現(xiàn)顯示隱藏的功能，但是當(dāng)鼠標(biāo)移入“記住密碼”這些字的時候，功能并不能實現(xiàn)，我們要想實現(xiàn)當(dāng)移入密碼也能實現(xiàn)此功能，只要加一個<lable>標(biāo)簽即可。
1 <body> 2 <!--當(dāng)鼠標(biāo)移入的時候，把div1的style的display變成block--> 3 <label onmouseover="document.getElementById('div1').style.display='block';" 4 onmouseout="document.getElementById('div1').style.display='none';"> 5 <input type="checkbox" /> 記住密碼 6 </label> 7 8 <div id="div1"> 9 為了您的賬號安全，請謹(jǐn)慎選擇！ 10 </div> 11 12 </body>這樣就可以實現(xiàn)無論是移入字體還是選擇框時都可以實現(xiàn)顯示和隱藏的功能了。
?
第一小節(jié)總結(jié)：
效果原理
Js中的事件
???當(dāng)...時候
???onmouseover(鼠標(biāo)移入） ? onmouseout（鼠標(biāo)移出）
???alert的使用（彈出一個對話框）
元素獲取
???id（相當(dāng)于名字）
???document.getElementById() ? ? 獲取元素
屬性操作
???obg.style.display=’block’
??Js中class都叫做className
?
轉(zhuǎn)載于:https://www.cnblogs.com/150536FBB/p/8711419.html
總結(jié)
以上是生活随笔為你收集整理的1.记住密码 提示框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C# FTp 上传，下载
- 下一篇： 【CVE-2020-1957】shiro