登陆框提醒文字/功能

来源：互联网发布：java算法笔试题编辑：程序博客网时间：2024/05/16 09:00
由于项目需要在登陆框上面添加提醒文字的功能，功能类似于新浪微博的。折腾了一天，总算是把他给弄出来了。下面贴出代码来：
欢迎访问我的博客
<html>    <head>        <title>登陆框 提醒功能</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <style>            /*下拉框*/            .son_ul{background:#fff;width:200px;border:1px solid #ccc;padding:0 2px;position:absolute;left:70px;top:30px;color:#333;text-indent:5px; overflow:hidden;zoom:1;}            .son_ul ul{padding:0;}            .son_ul ul li{height:20px;line-height:20px;cursor:pointer;height:20px;line-height:20px; overflow:hidden;}            .son_ul .hover{background:#efefef;}            .server_list h2 em{margin-top:0;}         </style>        <script type="text/javascript" src="http://f.game.tom.com/xbyxpt/js/jquery-1.4.2.min.js"></script>        <script type="text/javascript">          //定义类          var lLayer = {              currentIndex:-1          };          //生成页面的HTML代码          lLayer.geneList = function (prefix)          {              if (prefix == '' || prefix =='undefined') { prefix = ''; }              var mailList = [                  {'name':'tom',     'address': '@tom.com',     'index':'0'},                  {'name':'163',     'address': '@163.com',     'index':'1' },                  {'name':'sina',    'address': '@sina.com',    'index':'2'},                  {'name':'qq',      'address': '@qq.com',      'index':'3'},                  {'name':'126',     'address': '@126.com',     'index':'4'},                  {'name':'hotmail', 'address': '@hotmail.com', 'index':'5'},                  {'name':'gmail',   'address': '@gmail.com',   'index':'6'},                  {'name':'suho',    'address': '@suho.com',    'index':'7'},                  {'name':'yahoo',   'address': '@yahoo.com',   'index':'8'},                  {'name':'139',     'address': '@139.com',     'index':'9'}              ];              var html = '';              for (var i = 0; i < mailList.length; i++)              {                  if (i == 0)                  {                      html += '<li id="liid_'+mailList[i].index+'" syle="bgcolor:#999999">'+prefix+mailList[i].address+'</li>';                  } else                   {                      html += '<li id="liid_'+mailList[i].index+'">'+prefix+mailList[i].address+'</li>';                  }              }              $('#ullists').html(html);          }          //输入字符信息，自动补全          lLayer.setItem = function (value, event)          {              if (value == '' || value =='undefined')               {                  lLayer.layerHide('loginLayers');              }              lLayer.geneList(value);              lLayer.layerShow('loginLayers');              lLayer.moveItems(event.keyCode);              if (event.keyCode == 13)              {                  lLayer.selectItems();              }          }          //移动方向键          lLayer.moveItems = function (keyCode)          {              var liListNum = document.getElementById("ullists").getElementsByTagName("li").length;              liListNum -= 1;              if (keyCode == 38)              {                  if (lLayer.currentIndex == 0)                  {                      lLayer.currentIndex = liListNum;                  } else                   {                      lLayer.currentIndex -= 1;                  }                  document.getElementById('liid_'+lLayer.currentIndex).style.backgroundColor = "#999999";               } else if (keyCode == 40)              {                  if (lLayer.currentIndex == liListNum)                  {                      lLayer.currentIndex = 0;                  } else                  {                      lLayer.currentIndex += 1;                  }                  document.getElementById('liid_'+lLayer.currentIndex).style.backgroundColor = "#999999";              }          }          //选择内容          lLayer.selectItems = function ()          {              if (lLayer.currentIndex == -1)              {                  lLayer.currentIndex = 0;              }              var passport = $('#liid_'+lLayer.currentIndex).text();              document.getElementById('tomid').value = passport;              lLayer.layerHide('loginLayers');              document.getElementById('tompwd').focus();          }          //浮层显示          lLayer.layerShow = function (id)          {              return document.getElementById(id).style.display = 'block';          }          //浮层隐藏          lLayer.layerHide = function (id)          {              return document.getElementById(id).style.display = 'none';          }          </script>    </head>    <body>        用户名：<input type="text" name="tomid" id="tomid" class="inp" autocomplete="off" tabindex="1" onKeyUp="lLayer.setItem(this.value, event)"/>        <div class="son_ul" id="loginLayers" style="display:none;">        <strong>请选择账号类型</strong>        <ul id="ullists"> </ul>        </div>        <br />        密   码：<input type="password" id="tompwd" name="tompwd"/>    </body></html>
登陆框 提醒文字/功能

登陆框提醒文字/功能
