zoukankan      html  css  js  c++  java
  • js防止提交数据之后的按钮连击

    js防止提交数据之后的按钮连击

    一、实例描述

    当页面提交的数据特别多时,页面会反应比较迟钝,此时如果用户等不及而连续单击按钮,导致数据重复提交。本案例就是为了防止数据重复提交。

    二、截图

    三、代码

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3 <head>
     4     <meta charset="utf-8">
     5     <title>课堂演示</title>
     6     <style type="text/css">
     7      input{
     8       margin: 10px;
     9       width: 100px;
    10       height: 30px;
    11     }
    12     </style>    
    13 </head>
    14 <body>
    15 
    16 <input type=button value="提交" onClick="check()">
    17 
    18 <script type="text/javascript">
    19     function check(){
    20         if (window.document.readyState == 'complete'){
    21 
    22             alert("加载完毕,可以继续"); 
    23 
    24             return true;
    25 
    26         }else{
    27 
    28             alert("正在处理,请等待!");
    29 
    30             return false; 
    31 
    32         }
    33     }
    34 </script>
    35 
    36 </body>
    37 </html>

    1、判断document的状态

    2、window对象和document对象的层级关系

    3、document的readyState属性

    4、防止连击的方法:添加点击事件,提示用户处理进程

    5、js中等于号写法,和php,java,c++都一样

    6、这里字符串用的单引号

    四、总结

    案例要点:

    本例的重点是如何判断页面的状态。

    readyState 属性返回当前文档的状态,该属性返回以下值:

    • uninitialized - 还未开始载入
    • loading - 载入中
    • interactive - 已加载,文档与用户可以开始交互
    • complete - 载入完成
  • 相关阅读:
    284. Peeking Iterator
    283. Move Zeroes
    282. Expression Add Operators
    281. Zigzag Iterator
    280. Wiggle Sort
    279. Perfect Squares
    python 正则匹配替换,在匹配的字符后方添加新的字符
    odoo default_get 方法和onchange装饰器造成冲突,
    redmine 如何启用用户图标
    odoo 打印执行的sql语句
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/8970552.html
Copyright © 2011-2022 走看看