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