1.记住密码 提示框
生活随笔
收集整理的這篇文章主要介紹了
1.记住密码 提示框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
用JS實現：當鼠標移入的時候顯示提示框，鼠標移出的時候隱藏提示框
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 <!--當鼠標移入的時候，把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 為了您的賬號安全，請謹慎選擇！ 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 <!--當鼠標移入的時候，把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 為了您的賬號安全，請謹慎選擇！ 23 </div> 24 25 </body> 26 </html>
?
?
代碼如上，我們會發現，當鼠標移入選擇框時會實現顯示隱藏的功能，但是當鼠標移入“記住密碼”這些字的時候，功能并不能實現，我們要想實現當移入密碼也能實現此功能，只要加一個<lable>標簽即可。
1 <body> 2 <!--當鼠標移入的時候，把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 為了您的賬號安全，請謹慎選擇！ 10 </div> 11 12 </body>這樣就可以實現無論是移入字體還是選擇框時都可以實現顯示和隱藏的功能了。
?
第一小節總結：
效果原理
Js中的事件
???當...時候
???onmouseover(鼠標移入） ? onmouseout（鼠標移出）
???alert的使用（彈出一個對話框）
元素獲取
???id（相當于名字）
???document.getElementById() ? ? 獲取元素
屬性操作
???obg.style.display=’block’
??Js中class都叫做className
?
轉載于:https://www.cnblogs.com/150536FBB/p/8711419.html
總結
以上是生活随笔為你收集整理的1.记住密码 提示框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C# FTp 上传，下载
- 下一篇： 【CVE-2020-1957】shiro