JQuery实现注册按钮计时

最新推荐文章于 2023-03-16 10:24:05 发布

苍羽

最新推荐文章于 2023-03-16 10:24:05 发布

阅读量266

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        var i = 10;
        function timers() {
            $(function() {
                if (i >= 0) {
                    $("#timer").val("请认真阅读此协议" + i + "秒后可注册").attr("disabled", "disalbed");
                    $("#btn").attr("disabled", "disabled");
                    i--;
                }
                else {
                    $("#timer").css("display", "none");
                    $("#btn").attr("disabled", "");
                    clearInterval(timer);
                }

            });

        }
        var timer = setInterval("timers()", 1000);
    
    </script>
</head>
<body>
<input type="button" id="timer" />
<input type="button" id="btn" value="注册"  disabled="disabled"/>
</body>
</html>

在此代码中，中间过程使用的是JQuery，但是使用的还是使用最基础的javascript语法。写出此代码的思路如下：
1.计时。在一个按钮中的value会有一个计时的参数，此参数必须每隔一秒就需要变化一次。所以可以联想到使用setInterval或者是timeOut函数。所以在程序中先定义了一个var i=10;作为时间。

2.实现按钮的不可用性。此时必须判断时间i是否大于0，如果大于0则此时的按钮都为不可用，并且要控制时间递减所以使用i--。其中的 $("#timer").val("请认真阅读此协议" + i + "秒后可注册").attr("disabled", "disalbed"); $("#btn").attr("disabled", "disabled");分别获取到id=“timer”和id=“btn”的控件并将其可用性变为不可用。

3.实现隐藏以及可用性。当时间为0时，需要将id=“timer”的控件隐藏，所以使用函数css（"disaplay","none"）;将id=“btn”的控件变为可用，所以设置控件的属性，使用attr（"disabled",""）并且将setInterval清除。

转自：http://www.cnblogs.com/sun-sjmeng/archive/2012/06/07/2539778.html

苍羽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现注册按钮计时

var i = 10; function timers() { $(function() { if (i >= 0) { $("#timer").val("请认真阅读此协议" + i + "秒后可注册").attr("disabled", "disalbed");
复制链接

扫一扫