JS实现60s倒计时(亲测有效),及span标签如何使用和禁用onclick事件

JS实现60s倒计时(亲测有效),及span标签如何使用和禁用onclick事件

另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的方法一般用KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id").attr('disb…("#id").prop(‘disbaled’,‘false’),对span img这样的没有disbale的属性,这种方法就不起作用了,此时可用KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id").setAttribu…("#id").removeAttribute(“onclick”)方法来设置事件是否可用。
以下是所有代码,复制即可使用:

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>验证码倒计时</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css" >
        .validate-div input{
            width:130px;
            float:left;
            line-height:30px;
        }
        .validation{
            float:left;
            width: 85px;
            background-color: #2eaef1;
            border-radius: 5px;
            margin-left: 20px;
            text-align: center;
            margin-top: 3px;
        }
        .validation span{
            color: #fff;
            line-height:30px;
            font-size: 14px;
        }
    </style>
</head>

<body>
<div class="validate-div">
    <input type="text" class="validation-code" id="validation-code" name="smscode" placeholder="输入验证码" >
    <div class="validation">
        <span class="" id="validate_span" onclick="sendsms(this);">获取验证码</span>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    //发送验证码函数
    function sendsms(e){
        /*发送验证码功能*/
        countdown(e);                                   //若发送验证码成功,则调用倒计时函数
    }
    //倒计时函数
    var time = 10;
    function countdown(e){
        if (time == 0) {
            //e.setAttribute('disabled',false);         对没有disbaled属性的span标签,此方法无效
            e.setAttribute("onclick","sendsms(this)");
            $("#validate_span").html("获取验证码");
            time = 10;
        }else{
            //e.attr('disabled',true);                  对没有disbaled属性的span标签,此方法也无效
            //e.setAttribute("onclick", '');            这样写也可以
            e.removeAttribute("onclick");
            $("#validate_span").html("重新发送(" + time + ")");
            time--;
            setTimeout(function() {
                countdown(e)
            },1000)
        }
    }
</script>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值