[读码时间] 记住密码提示框

说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>记住密码提示框</title>
    <style>
        body,input,p{
            margin:0;
            padding:0;
        }
        body{
            font:12px/1.5 Tahoma;
        }
        #outer{
            width:200px;
            margin:10px auto;
        }
        input{
            margin-right:5px;
            vertical-align:middle;
        }
        #tips{
            padding:5px;
            margin-top:5px;
            background:#ffefa4; /*提示背景浅黄色*/
            display:none; /*不显示*/
        }
    </style>
    <script>
        window.onload = function () {
            var oTips = document.getElementById("tips"); //获取tips提示的引用
            var oLabel = document.getElementsByTagName("label")[0]; //获取标签的引用，命令返回的是一个对象集合，故需用[0]取第一个元素
            oLabel.onmouseover = function () { //注册mouseover事件，设置元素样式的display属性值为block
                oTips.style.display = "block";
            };
            oLabel.onmouseout = function () {  //注册mouseout事件，设置元素样式的display属性值为none
                oTips.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <!--一个div包裹一个input和 div，input又用label标签包裹-->
    <div id="outer">
        <label><input type="checkbox" />两周内自动登陆</label>
        <div id="tips">为了您的信息安全，请不要在网吧或公用电脑上使用此功能！</div>
    </div>
</body>
</html>
View Code