javascript键盘事件表单交互

最新推荐文章于 2024-10-10 09:56:47 发布
最新推荐文章于 2024-10-10 09:56:47 发布
阅读量1.2k 收藏
点赞数
分类专栏： web dev micellaenous 文章标签： javascript function alignment generator border null
键盘选择表单
  1.   <style type="text/css">
  2.   *{
  3.   margin:0px;padding:0px;font-size:12px;
  4.   }
  5.   input{
  6.       width:100px;height:20px;border:1px solid #ccc;
  7.     }
  8. TD { cursor: hand; }   
  9.   </style>
  10.   <script language="javascript" type="text/javascript">   
  11.     function document.onkeydown(){  
  12.      if(document.all('oTable')){
  13.          var rowsArray = document.all('oTable').rows;  
  14.          for(var i=0;i<rowsArray.length;i++){  
  15.               if(rowsArray[i].children[0].style.backgroundColor=='#dcdcdc'){  
  16.                  switch(window.event.keyCode){  
  17.                      case 38 :  
  18.                          if(i-1>=0){  
  19.                            rowsArray[i-1].children[0].style.backgroundColor = '#dcdcdc';   
  20.                            rowsArray[i].children[0].style.backgroundColor = '';  
  21.                          }  
  22.                          break;  
  23.                      case 40 :  
  24.                          if(i+1<=rowsArray.length-1){  
  25.                             rowsArray[i+1].children[0].style.backgroundColor = '#dcdcdc';    
  26.                             rowsArray[i].children[0].style.backgroundColor = '';  
  27.                          }  
  28.                          break;                           
  29.                      case 13 :  
  30.                  var str = rowsArray[i].childNodes[0].innerHTML;
  31.                document.getElementById("username").value = str;
  32.                document.getElementById("tips").style.display='none';            
  33.                         break;   
  34.                  break;  
  35.               }  
  36.          }  
  37.          }
  38.       }  
  39.       function document.onclick(){  
  40.        if(document.all('oTable')){
  41.           if(window.event.srcElement.tagName!='TD'){ return; }  
  42.           var rowsArray = document.all('oTable').rows;  
  43.           for(var i=0;i<rowsArray.length;i++){  
  44.                if(rowsArray[i].cells[0]==window.event.srcElement){  
  45.                   rowsArray[i].cells[0].style.backgroundColor = '#dcdcdc';  
  46.                }else{  
  47.                   rowsArray[i].cells[0].style.backgroundColor = '';  
  48.                }  
  49.           }   
  50.         }         
  51.       }  
  54.   function doaaa(id)
  55.   {
  57.   var str = id.childNodes[0].innerHTML;
  58.   alert(str);
  59.     document.getElementById("username").value = str;
  60.     document.getElementById("tips").style.display='none';
  61.   return true;
  62.   }
  63. var aid = new Array("人民币","美刀","英镑","欧元","港币");
  64. function tips(id,str){
  65. var l=document.getElementById(id).offsetLeft+120;
  66. var t=document.getElementById(id).offsetTop;
  67. var htmlstring ="<table id=/"oTable/" width=/"100/">";
  68. for(var i=0;i<aid.length;i++){
  69. if(i==0){htmlstring = htmlstring+"<tr height=/"20/" οnclick=/"doaaa(this);/"><td style=/"background-color:#dcdcdc;/">0"+i+":"+aid[i]+"</td></tr>";}
  70. else{htmlstring = htmlstring+"<tr height=/"20/" οnclick=/"doaaa(this);/"><td>0"+i+":"+aid[i]+"</td></tr>";}
  72. }
  73. htmlstring = htmlstring+"</table>";
  74. var inheight = aid.length*22+"px";
  75. document.getElementById("tips").innerHTML=htmlstring;
  76. document.getElementById("tips").style.left=l+"px";
  77. document.getElementById("tips").style.top=t+"px";
  78. document.getElementById("tips").style.height=inheight;
  79. document.getElementById("tips").style.display="block";
  80. }
  81. function outtips(){
  82. for(var i=0;i<aid.length;i++){
  83.  if(document.getElementById("username").value=="0"+i) 
  84.   document.getElementById("username").value=aid[i];
  85. }
  86.     //if(document.getElementById("username").value==0+"") 
  87.   //  document.getElementById("tips").style.display='none';
  88. }
  89. </script>
  90. </head>
  91. <body>
  93.                     
  94. <div id="tips" style="position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:200px;line-height:20px;background:#fcfcfc"></div>
  95. <br />
  96. 姓名：<input type="text" id="username" οnfοcus="tips('username','姓名长度最多16个字符')" οnblur="outtips()" />
  97. <br />
  98. 密码：<input type="password" id="password" οnfοcus="tips('password','密码长度必须在3-18位之间')" οnblur="outtips()" />
  100. </body>
  101. </html>

Msdn Menu

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>MSND menu</title>
  5. <meta name="Generator" content="EditPlus">
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  7. <meta name="Author" content="">
  8. <meta name="Keywords" content="">
  9. <meta name="Description" content="">
  10. <style>
  11. .LocaleManagementFlyoutPopup {
  12.  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  13.   border:1px solid #666666;
  14.   padding: 3px 3px 3px 3px;
  15.   text-align: left;
  16.   background-color: #FFFFFF;
  17.   z-index: 10;
  18.   opacity: .95;
  19.   filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=2,Color='silver',Positive='true') alpha(opacity=95);
  20. }
  22. .LocaleManagementFlyoutPopup A, .LocaleManagementFlyoutPopup A:visited {
  23.   font-size: 10px;
  24.   color: #000000;
  25.   cursor: hand;
  26.   border: 1px solid #FFFFFF;
  27.   padding: 1px 3px 1px 3px;
  28.   height: 15px;
  29.   text-align: left;
  30.   text-decoration: none;
  31.   white-space: nowrap;
  32.   display: block;
  33. }
  35. .LocaleManagementFlyoutPopup A:hover {
  36.   background-color: #f0f7fd;
  37.   color: #000000;
  38.   cursor: hand;
  39.   border: 1px solid #addbef;
  40.   padding: 1px 3px 1px 3px;
  41.   height: 15px;
  42.   text-decoration: none;
  43.   white-space: nowrap;
  44.   display: block;
  45. }
  47. .LocaleManagementFlyoutPopupHr {
  48.  height: 1px;
  49.  background: #d0e0f0;
  50.  margin: 0px 11px 21px 11px;
  51. }
  53. .LocaleManagementFlyoutPopArrow {
  54.   margin: 4px 0px 0px 0px;
  55. }
  57. .LocaleManagementFlyoutStatic_msdn {
  58.  border: 1px solid #ffffff;
  59. }
  61. .LocaleManagementFlyoutStaticHover_msdn {
  62.  border: 1px solid #addbef;
  63. }
  65. .TFlyPopupAnimate {
  66.  position: absolute;
  67.  display: block;
  68.  border: 1px solid gray;
  69.  overflow: hidden;
  70.  visibility: hidden;
  71.  margin: 0;
  72.  padding: 0;
  73.  z-index: 1;
  74. }
  75. </style>
  76. <script>
  77. /*
  78. name 对象的 id 值
  79. offsetLeft 定位：左 - 偏移量
  80. offsetTop 定位：顶部 - 偏移量
  81. alignment 对齐方式{-1: left; 0: center; 1: right}
  82. anyIter 显示方式(<=0: 普通样式; >0: 缩放样式)
  83. anyTime 动画时间间隔
  84. staticHover 鼠标覆盖时的样式
  85. popupHover 显示内容鼠标覆盖时的样式
  86. popupLatency 显示内容延时
  87. hideLatency 隐藏内容延时
  88. onInit 初始化
  89. onPopup 显示内容时行为
  90. onHide 隐藏内容时行为
  91. */
  92. function TFly_Init(name, offsetLeft, offsetTop, alignment, anyIter, anyTime, staticHover, popupHover, popupLatency, hideLatency, onInit, onPopup, onHide) {
  93.  var TFly = document.getElementById(name);
  94.  TFly.DT = document.getElementById(name + "_Popup"); // 显示内容对象
  95.  TFly.F = document.getElementById(name + "_Anim"); // 动画效果对象
  96.  TFly.oX = offsetLeft;
  97.  TFly.oY = offsetTop;
  98.  TFly.alignment = alignment;
  99.  TFly.AnyIter = anyIter;
  100.  TFly.AnyTime = anyTime;
  102.  TFly.popupLatency = popupLatency;
  103.  TFly.hideLatency = hideLatency;
  104.  TFly.onPopup = onPopup;
  105.  TFly.onHide = onHide;
  107.  TFly.onmouseover = function() {
  108.  if (staticHover != '') { // 替换样式，并储存原来的样式
  109.      TFly.className_ = TFly.className;
  110.       TFly.className = staticHover;
  111.     }
  112.  TFly_Popup(TFly, true);
  113.   }
  115.  TFly.onmouseout = function() {
  116.    if (staticHover != '') { // 恢复原来的样式
  117.      TFly.className = TFly.className_;
  118.     }
  119.     TFly_Popup(TFly, false);
  120.   }
  122.  if (document.all) {
  123.  TFly.onactivate = TFly.onmouseover;
  124.  TFly.ondeactivate = TFly.onmouseout;
  125.  } else {
  126.  TFly.onfocus = TFly.onmouseover;
  127.  TFly.onblur = TFly.onmouseout;
  128.  }
  130.  TFly.DT.onmouseover = function() {
  131.  if (popupHover != '') {
  132.      TFly.DT.className_ = TFly.DT.className;
  133.       TFly.DT.className = popupHover;
  134.     }
  135.     TFly_Popup(TFly, true);
  136.   }
  138.  TFly.DT.onmouseout = function() {
  139.    if (popupHover != '') {
  140.  TFly.DT.className = TFly.DT.className_;
  141.     }
  142.    TFly_Popup(TFly, false);
  143.  }
  145.  TFly_CallClientFunction(onInit, TFly);
  146. }
  148. // 调用初始化程序
  149. function TFly_CallClientFunction(name, TFly) {
  150.  if (name != null && name != "")
  151.  eval(name + "(TFly);");
  152. }
  154. // 定位
  155. function TFly_SetPosition(TFly, obj) {
  156.  obj.style.top = TFly.oY + TFly.offsetHeight + "px";
  157.  obj.style.left = TFly.oX + (TFly.offsetWidth - obj.offsetWidth ) * (1 + TFly.alignment) / 2 + "px";
  158. }
  160. function TFly_Popup(TFly, value) {
  161.  if (TFly.timer != null) window.clearTimeout(TFly.timer); // 清除超时
  163.  if (value) { // 判断状态
  164.  if (TFly.status == "on") return;
  166.  // 如果 popup 已经显示，则显示延时为 0
  167.     // 例如从一个菜单移动到另外一个菜单
  168.     var timeout = (TFly.status == "active") ? 0 : TFly.popupLatency;
  170.  if (TFly.AnyIter > 0 && TFly.AnyTime > 0)
  171.  TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, true, TFly.F.curIter);}, timeout);
  172.  else
  173.  TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, true);}, timeout);
  175.  } else {
  176.  if (TFly.status == "off") return;
  178.  var timeout = (TFly.status == "active") ? 0 : TFly.hideLatency;
  180.  if (TFly.AnyIter > 0 && TFly.AnyTime > 0)
  181.  TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, false, TFly.F.curIter);}, timeout);
  182.  else
  183.  TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, false);}, timeout);
  184.  }
  185. }
  187. // 设置弹出内容的可见性
  188. function TFly_SetVisibility(TFly, value) {
  189.  if (value == true) {
  190.  TFly_SetPosition(TFly, TFly.DT);
  191.  TFly.DT.style.visibility = "visible";
  192.  TFly.style.zIndex = "999";
  193.  } else {
  194.  TFly.DT.style.visibility = "hidden";
  195.  TFly.style.zIndex = "0";
  196.  TFly.DT.style.left = "-10000px";
  197.  }
  198. }
  200. function TFly_AnimateStart (TFly, inout, curIter) {
  201.  if (TFly.F.timer != null) window.clearTimeout(TFly.F.timer);
  203.  if (curIter == null) curIter=0;
  205.  if (TFly.status != "active") {
  206.  TFly.status = "active";
  207.  TFly.F.style.visibility = "visible";
  208.  TFly.DT.style.visibility = "hidden";
  209.  }
  211.  if (curIter < 0 || curIter > TFly.AnyIter) {
  212.  TFly.F.curIter = (curIter < 1) ? 0 : TFly.AnyIter;
  213.  TFly.status = (TFly.F.curIter == TFly.AnyIter) ? "on": "off";
  214.  TFly.F.style.visibility = "hidden";
  215.  TFly_SetPosition(TFly, TFly.DT);
  216.  TFly.style.zIndex = (TFly.F.curIter == TFly.AnyIter) ? "999" : "0";
  218.  if (TFly.F.curIter == TFly.AnyIter) {
  219.  TFly.status = "on";
  220.  TFly_SetVisibility(TFly, true);
  221.  TFly_CallClientFunction(TFly.onPopup, TFly);
  222.  } else {
  223.  TFly.status = "off";
  224.  TFly_SetVisibility(TFly, false);
  225.  TFly_CallClientFunction(TFly.onHide, TFly);
  226.  }
  227.  } else {
  228.  var per = curIter * (95 / TFly.AnyIter) + 5;
  229.  TFly.F.style.visibility = "hidden";
  230.  TFly.F.style.width = TFly.DT.offsetWidth / 100 * per + "px";
  231.  TFly.F.style.height = TFly.DT.offsetHeight / 100 * per + "px";
  232.  TFly_SetPosition(TFly, TFly.F);
  233.  TFly.F.style.visibility = "visible";
  234.  var timeout = (per == 100 ) ? 0 : TFly.AnyTime - (TFly.AnyTime / (TFly.AnyIter) * (curIter));
  235.  curIter += (inout) ? 1 : -1;
  236.  TFly.F.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, inout, curIter)}, timeout);
  237.  TFly.F.curIter = curIter;
  238.  }
  239. }
  240. </script>
  241. </head>
  243. <body>
  244.           
  246. <div style="display:inline;vertical-align:middle">
  247.   <div class="LocaleManagementFlyoutStatic_msdn" style="position:relative;" id="LocaleManagement">
  248.     <a class="LocaleManagementFlyoutStaticLink_msdn" href="javascript:void(0)">United States - English </a><img class="LocaleManagementFlyoutPopArrow" src="http://msdn2.microsoft.com/msdn/Controls/UserRecognitionFlyout/en-us/popdownarrow-msdn-left.gif" alt="Dropdown Arrow" style="height:4px;width:7px;border-width:0px;" /><div id="LocaleManagement_Popup" class="LocaleManagementFlyoutPopup" style="position: absolute;visibility:hidden;left:-65534px;">
  249.       <table border="0" style="width:175px;">
  250.         <tr>
  251.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl05','')">Australia (English)</a></td>
  252.         </tr><tr>
  253.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl06','')">Brasil (Portugués)</a></td>
  255.         </tr><tr>
  256.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl07','')">Canada (English)</a></td>
  257.         </tr><tr>
  258.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl08','')">Canada (Fran?ais)</a></td>
  259.         </tr><tr>
  260.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl09','')">中国 (简体中文)</a></td>
  261.         </tr><tr>
  263.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl10','')">Deutschland (Deutsch)</a></td>
  264.         </tr><tr>
  265.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl11','')">France (Fran?ais)</a></td>
  266.         </tr><tr>
  267.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl12','')">India (English)</a></td>
  268.         </tr><tr>
  269.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl13','')">Россия (Pусский)</a></td>
  271.         </tr><tr>
  272.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl14','')">United Kingdom (English)</a></td>
  273.         </tr><tr>
  274.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl15','')">United States (English)</a></td>
  275.         </tr><tr>
  276.           <td class="LocaleManagementFlyoutPopupHr"></td>
  277.         </tr><tr>
  278.       
  279.             <td><a href="#" target=_blank>更多</a></td>
  280.         </tr>
  281.       </table></div>
  282.       <div id="LocaleManagement_Anim" class="TFlyPopupAnimate"></div>
  283.   </div>
  284.   
  285. </div>
  287. <script>
  288. TFly_Init('LocaleManagement', 0, 0, -1, 2, 60, 'LocaleManagementFlyoutStaticHover_msdn', '', 100, 400, '', '', '');
  289. </script>
  290. </body>
  291. </html>

再来一个例子

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>MSND menu</title>
  5. <meta name="Generator" content="EditPlus">
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  7. <meta name="Author" content="">
  8. <meta name="Keywords" content="">
  9. <meta name="Description" content="">
  10. <style>
  11. .LocaleManagementFlyoutPopup {
  12.  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  13.   border:1px solid #666666;
  14.   padding: 3px 3px 3px 3px;
  15.   text-align: left;
  16.   background-color: #FFFFFF;
  17.   z-index: 10;
  18.   opacity: .95;
  19.   filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=2,Color='silver',Positive='true') alpha(opacity=95);
  20. }
  22. .LocaleManagementFlyoutPopup A, .LocaleManagementFlyoutPopup A:visited {
  23.   font-size: 10px;
  24.   color: #000000;
  25.   cursor: hand;
  26.   border: 1px solid #FFFFFF;
  27.   padding: 1px 3px 1px 3px;
  28.   height: 15px;
  29.   text-align: left;
  30.   text-decoration: none;
  31.   white-space: nowrap;
  32.   display: block;
  33. }
  35. .LocaleManagementFlyoutPopup A:hover {
  36.   background-color: #f0f7fd;
  37.   color: #000000;
  38.   cursor: hand;
  39.   border: 1px solid #addbef;
  40.   padding: 1px 3px 1px 3px;
  41.   height: 15px;
  42.   text-decoration: none;
  43.   white-space: nowrap;
  44.   display: block;
  45. }
  47. .LocaleManagementFlyoutPopupHr {
  48.  height: 1px;
  49.  background: #d0e0f0;
  50.  margin: 0px 11px 21px 11px;
  51. }
  53. .LocaleManagementFlyoutPopArrow {
  54.   margin: 4px 0px 0px 0px;
  55. }
  57. .LocaleManagementFlyoutStatic_msdn {
  58.  border: 1px solid #ffffff;
  59. }
  61. .LocaleManagementFlyoutStaticHover_msdn {
  62.  border: 1px solid #addbef;
  63. }
  65. .TFlyPopupAnimate {
  66.  position: absolute;
  67.  display: block;
  68.  border: 1px solid gray;
  69.  overflow: hidden;
  70.  visibility: hidden;
  71.  margin: 0;
  72.  padding: 0;
  73.  z-index: 1;
  74. }
  75. </style>
  76. <script>
  77. /*
  78. name 对象的 id 值
  79. offsetLeft 定位：左 - 偏移量
  80. offsetTop 定位：顶部 - 偏移量
  81. alignment 对齐方式{-1: left; 0: center; 1: right}
  82. anyIter 显示方式(<=0: 普通样式; >0: 缩放样式)
  83. anyTime 动画时间间隔
  84. staticHover 鼠标覆盖时的样式
  85. popupHover 显示内容鼠标覆盖时的样式
  86. popupLatency 显示内容延时
  87. hideLatency 隐藏内容延时
  88. onInit 初始化
  89. onPopup 显示内容时行为
  90. onHide 隐藏内容时行为
  91. */
  92. function TFly_Init(name, offsetLeft, offsetTop, alignment, anyIter, anyTime, staticHover, popupHover, popupLatency, hideLatency, onInit, onPopup, onHide) {
  93.  var TFly = document.getElementById(name);
  94.  TFly.DT = document.getElementById(name + "_Popup"); // 显示内容对象
  95.  TFly.F = document.getElementById(name + "_Anim"); // 动画效果对象
  96.  TFly.oX = offsetLeft;
  97.  TFly.oY = offsetTop;
  98.  TFly.alignment = alignment;
  99.  TFly.AnyIter = anyIter;
  100.  TFly.AnyTime = anyTime;
  102.  TFly.popupLatency = popupLatency;
  103.  TFly.hideLatency = hideLatency;
  104.  TFly.onPopup = onPopup;
  105.  TFly.onHide = onHide;
  107.  TFly.onmouseover = function() {
  108.  if (staticHover != '') { // 替换样式，并储存原来的样式
  109.      TFly.className_ = TFly.className;
  110.       TFly.className = staticHover;
  111.     }
  112.  TFly_Popup(TFly, true);
  113.   }
  115.  TFly.onmouseout = function() {
  116.    if (staticHover != '') { // 恢复原来的样式
  117.      TFly.className = TFly.className_;
  118.     }
  119.     TFly_Popup(TFly, false);
  120.   }
  122.  if (document.all) {
  123.  TFly.onactivate = TFly.onmouseover;
  124.  TFly.ondeactivate = TFly.onmouseout;
  125.  } else {
  126.  TFly.onfocus = TFly.onmouseover;
  127.  TFly.onblur = TFly.onmouseout;
  128.  }
  130.  TFly.DT.onmouseover = function() {
  131.  if (popupHover != '') {
  132.      TFly.DT.className_ = TFly.DT.className;
  133.       TFly.DT.className = popupHover;
  134.     }
  135.     TFly_Popup(TFly, true);
  136.   }
  138.  TFly.DT.onmouseout = function() {
  139.    if (popupHover != '') {
  140.  TFly.DT.className = TFly.DT.className_;
  141.     }
  142.    TFly_Popup(TFly, false);
  143.  }
  145.  TFly_CallClientFunction(onInit, TFly);
  146. }
  148. // 调用初始化程序
  149. function TFly_CallClientFunction(name, TFly) {
  150.  if (name != null && name != "")
  151.  eval(name + "(TFly);");
  152. }
  154. // 定位
  155. function TFly_SetPosition(TFly, obj) {
  156.  obj.style.top = TFly.oY + TFly.offsetHeight + "px";
  157.  obj.style.left = TFly.oX + (TFly.offsetWidth - obj.offsetWidth ) * (1 + TFly.alignment) / 2 + "px";
  158. }
  160. function TFly_Popup(TFly, value) {
  161.  if (TFly.timer != null) window.clearTimeout(TFly.timer); // 清除超时
  163.  if (value) { // 判断状态
  164.  if (TFly.status == "on") return;
  166.  // 如果 popup 已经显示，则显示延时为 0
  167.     // 例如从一个菜单移动到另外一个菜单
  168.     var timeout = (TFly.status == "active") ? 0 : TFly.popupLatency;
  170.  if (TFly.AnyIter > 0 && TFly.AnyTime > 0)
  171.  TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, true, TFly.F.curIter);}, timeout);
  172.  else
  173.  TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, true);}, timeout);
  175.  } else {
  176.  if (TFly.status == "off") return;
  178.  var timeout = (TFly.status == "active") ? 0 : TFly.hideLatency;
  180.  if (TFly.AnyIter > 0 && TFly.AnyTime > 0)
  181.  TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, false, TFly.F.curIter);}, timeout);
  182.  else
  183.  TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, false);}, timeout);
  184.  }
  185. }
  187. // 设置弹出内容的可见性
  188. function TFly_SetVisibility(TFly, value) {
  189.  if (value == true) {
  190.  TFly_SetPosition(TFly, TFly.DT);
  191.  TFly.DT.style.visibility = "visible";
  192.  TFly.style.zIndex = "999";
  193.  } else {
  194.  TFly.DT.style.visibility = "hidden";
  195.  TFly.style.zIndex = "0";
  196.  TFly.DT.style.left = "-10000px";
  197.  }
  198. }
  200. function TFly_AnimateStart (TFly, inout, curIter) {
  201.  if (TFly.F.timer != null) window.clearTimeout(TFly.F.timer);
  203.  if (curIter == null) curIter=0;
  205.  if (TFly.status != "active") {
  206.  TFly.status = "active";
  207.  TFly.F.style.visibility = "visible";
  208.  TFly.DT.style.visibility = "hidden";
  209.  }
  211.  if (curIter < 0 || curIter > TFly.AnyIter) {
  212.  TFly.F.curIter = (curIter < 1) ? 0 : TFly.AnyIter;
  213.  TFly.status = (TFly.F.curIter == TFly.AnyIter) ? "on": "off";
  214.  TFly.F.style.visibility = "hidden";
  215.  TFly_SetPosition(TFly, TFly.DT);
  216.  TFly.style.zIndex = (TFly.F.curIter == TFly.AnyIter) ? "999" : "0";
  218.  if (TFly.F.curIter == TFly.AnyIter) {
  219.  TFly.status = "on";
  220.  TFly_SetVisibility(TFly, true);
  221.  TFly_CallClientFunction(TFly.onPopup, TFly);
  222.  } else {
  223.  TFly.status = "off";
  224.  TFly_SetVisibility(TFly, false);
  225.  TFly_CallClientFunction(TFly.onHide, TFly);
  226.  }
  227.  } else {
  228.  var per = curIter * (95 / TFly.AnyIter) + 5;
  229.  TFly.F.style.visibility = "hidden";
  230.  TFly.F.style.width = TFly.DT.offsetWidth / 100 * per + "px";
  231.  TFly.F.style.height = TFly.DT.offsetHeight / 100 * per + "px";
  232.  TFly_SetPosition(TFly, TFly.F);
  233.  TFly.F.style.visibility = "visible";
  234.  var timeout = (per == 100 ) ? 0 : TFly.AnyTime - (TFly.AnyTime / (TFly.AnyIter) * (curIter));
  235.  curIter += (inout) ? 1 : -1;
  236.  TFly.F.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, inout, curIter)}, timeout);
  237.  TFly.F.curIter = curIter;
  238.  }
  239. }
  240. </script>
  241. </head>
  243. <body>
  244.           
  246. <div style="display:inline;vertical-align:middle">
  247.   <div class="LocaleManagementFlyoutStatic_msdn" style="position:relative;" id="LocaleManagement">
  248.     <a class="LocaleManagementFlyoutStaticLink_msdn" href="javascript:void(0)">United States - English </a><img class="LocaleManagementFlyoutPopArrow" src="http://msdn2.microsoft.com/msdn/Controls/UserRecognitionFlyout/en-us/popdownarrow-msdn-left.gif" alt="Dropdown Arrow" style="height:4px;width:7px;border-width:0px;" /><div id="LocaleManagement_Popup" class="LocaleManagementFlyoutPopup" style="position: absolute;visibility:hidden;left:-65534px;">
  249.       <table border="0" style="width:175px;">
  250.         <tr>
  251.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl05','')">Australia (English)</a></td>
  252.         </tr><tr>
  253.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl06','')">Brasil (Portugués)</a></td>
  255.         </tr><tr>
  256.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl07','')">Canada (English)</a></td>
  257.         </tr><tr>
  258.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl08','')">Canada (Fran?ais)</a></td>
  259.         </tr><tr>
  260.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl09','')">中国 (简体中文)</a></td>
  261.         </tr><tr>
  263.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl10','')">Deutschland (Deutsch)</a></td>
  264.         </tr><tr>
  265.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl11','')">France (Fran?ais)</a></td>
  266.         </tr><tr>
  267.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl12','')">India (English)</a></td>
  268.         </tr><tr>
  269.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl13','')">Россия (Pусский)</a></td>
  271.         </tr><tr>
  272.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl14','')">United Kingdom (English)</a></td>
  273.         </tr><tr>
  274.           <td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl15','')">United States (English)</a></td>
  275.         </tr><tr>
  276.           <td class="LocaleManagementFlyoutPopupHr"></td>
  277.         </tr><tr>
  278.       
  279.             <td><a href="#" target=_blank>更多</a></td>
  280.         </tr>
  281.       </table></div>
  282.       <div id="LocaleManagement_Anim" class="TFlyPopupAnimate"></div>
  283.   </div>
  284.   
  285. </div>
  287. <script>
  288. TFly_Init('LocaleManagement', 0, 0, -1, 2, 60, 'LocaleManagementFlyoutStaticHover_msdn', '', 100, 400, '', '', '');
  289. </script>
  292. </body>
  293. </html>
bluedusk
关注
专栏目录
JavaScript表单验证与交互
吃不胖.
09-26 381
在HTML中，表单是通过什么来定义的？在此，我们可以使用HTML属性 onsubmit 和 JavaScript 函数 validateForm() 来实现表单验证，当用户提交表单时，如果 validateForm() 函数返回为 false，则提交会被阻止。在HTML中，按钮通常使用input或button元素定义，当用户点击按钮时，可以触发JavaScript函数，实现交互效果。JavaScript可以使网页实现动态效果，比如当用户点击按钮时，会有反应，当用户鼠标移到图片上时，图片会放大等。
JS网页键盘交互式代码.zip
07-04
JS网页键盘交互式代码，点击指定的位置，然后开始键入。
p5.js入门教程之键盘交互
11-28
一、键盘交互相关关键词与函数 keyIsPressed: 关键词，按下按键时为true，反之为false keyCode: 关键词，用于判断按下哪个按键 keyPressed():函数，按键按下时触发一次 keyReleased():函数，按键松开时触发一次 keyIsDown():函数，按下指定按键时返回true，反之为false 以下是一个较综合的案例，用wsad与zxcv控制小球移动： var x=200; var y=200; var speed=2; function setup() { createCanvas(400, 400); } function draw() {
p5.js入门教程(5) 键盘交互
西河某人的博客
07-29 4463
一、键盘交互相关关键词与函数 keyIsPressed: 关键词，按下按键时为true，反之为false keyCode: 关键词，用于判断按下哪个按键 keyPressed():函数，按键按下时触发一次 keyReleased():函数，按键松开时触发一次 keyIsDown():函数，按下指定按键时返回true，反之为false 以下是一个较综合的案例，用wsad与zxcv控制小球...
【JavaScript】事件监听中的键盘事件详解
lph159的博客
09-10 1538
键盘事件是用户在键盘上执行某些操作时触发的事件。常见的键盘事件包括keydownkeypress和keyup。它们能捕捉到用户按下或释放键盘按键的动作，通过对这些事件进行监听，我们可以为用户提供更丰富的交互体验。键盘事件在 Web 开发中扮演着至关重要的角色，从表单输入到快捷键、游戏控制，键盘事件的合理运用可以显著提升用户的操作体验。通过keydownkeyup等事件监听，我们能够捕捉用户的键盘输入并作出相应的响应。
『JavaScript』JavaScript事件类型详解：全面解析各类用户交互行为
老陈聊架构
12-28 987
📣读完这篇文章里你能收获到：理解事件驱动编程的基本概念和工作原理，掌握JavaScript中常见的事件类型及其应用场合，学习如何使用DOM API添加和移除事件监听器，探讨事件冒泡、事件捕获和事件委托等高级事件处理技术
javascript网页键盘交互式代码
10-27
以上内容只是JavaScript键盘交互的基础。实际上，你可以通过更多的技术，如防抖(debounce)或节流(throttle)来优化性能，或者利用CSS和HTML5 API来增强用户体验。总之，JavaScript提供了强大的能力，使网页能够响应...
javascript 键盘事件总结 推荐
10-29
JavaScript 键盘事件是网页交互中的重要组成部分，它们允许开发者监听用户通过键盘输入时的各种行为。本文将深入探讨JavaScript中的键盘事件，以及如何利用这些事件来实现特定的功能。 首先，让我们了解一下...
javascript键盘事件全面控制脚本代码
01-19
在互联网时代，编写和应用各种...了解和掌握JavaScript键盘事件，不仅可以提高网页的交互性和用户体验，还能为开发者提供更多的创造可能性。在实际开发中，合理运用这些事件，可以让我们做出更加生动和智能的网页应用。
JavaScript键盘事件响应顺序详解
10-16
在介绍JavaScript键盘事件响应顺序之前，我们首先要明白JavaScript键盘事件是指当用户在网页中按下或释放键盘上的某个键时，浏览器能够以事件的形式响应用户的行为。在JavaScript中，常见的键盘事件有三种，分别是...
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
12-13
在JavaScript中，事件（Events）是用户或浏览器与页面交互时触发的特定动作，比如点击按钮、按下键盘上的键或者移动鼠标。本文将详细介绍如何使用JavaScript处理HTML事件、键盘事件和鼠标事件。 ### HTML事件处理 ...
JS添加按钮交互
键盘上跳舞的精灵
10-22 2974
实现span内容增加和删除操作，代码如下：<!DOCTYPE html> <html> <head> <title>新增按钮</title> </head> <body> <div id='container'> <button id="btn-add">新增</button> <div id="wrap"></div> </div> <script type="text/j
H5键盘按键交互动画特效
W Y L
05-01 1073
html5基于css3制作酷炫的点击按键键盘，彩色方格轮廓交互动画特效。 html代码 <div class="case"> <!-- First row --> <div class="key" data-key="escape">esc</div> <div class="key" data-key="1"></d...
JS实现键盘监听(包括组合键)
热门推荐
光阴迷客的知识库
11-25 2万+
依然使用案例驱动~案例是学习的最好实践！ document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==27){ // 按 Es
JavaScript事件的基本概述，以及鼠标，键盘，表单事件的绑定
qq_42724864的博客
03-14 361
** 事件：什么是事件？ ** 事件是发生并得到处理的操作，既：事件来了，然后处理。 比如：1.电话铃声响起(事件发生) --需要接电话（处理） 2.学生举手请教问题（有事了） – 需要解答（处理） 3.按钮被点击了，然后对应一个函数来处理 2.事件绑定方式 JavaScript事件是由访问Web页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作时，再去执行一系列代码。 JavaScr...
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
最新发布
杨荧的CSDN博客
10-10 990
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值