[分享]css3手机发送验证码表单

在手机端应用中，通常需要使用短信验证码来验证用户的身份或操作。这时需要一个发送验证码的表单，使用CSS3可以非常方便地实现。 首先，我们需要一个用于填写手机号码的输入框。可以使用以下代码创建： 接下...

在手机端应用中，通常需要使用短信验证码来验证用户的身份或操作。这时需要一个发送验证码的表单，使用CSS3可以非常方便地实现。

首先，我们需要一个用于填写手机号码的输入框。可以使用以下代码创建：

<input type="tel" placeholder="请输入手机号码" name="phone" id="phone" /> 

接下来，我们需要一个发送验证码的按钮。使用CSS3创建一个带有倒计时的按钮需要几个步骤：

<button class="code-btn">获取验证码</button>

.code-btn{ 
    background-color: #fff; 
    color: #198CFF; 
    border: 1px solid #198CFF; 
    border-radius: 5px; 
    padding: 5px 15px; 
} 

.code-btn:active{ 
    background-color: #198CFF; 
    color: #fff; 
} 

.code-btn.disable{ 
    background-color: #f2f2f2; 
    color: #ccc; 
    border: 1px solid #ccc; 
} 

我们给按钮添加了一个类名code-btn，并分别为不同状态设置了一些样式。例如，按钮按下时的样式、禁用状态的样式等。

为了实现倒计时的功能，我们需要在JavaScript中编写一些代码。在发送验证码的同时启动一个计时器，60秒后重新激活按钮：

var time = 60; 
var timer = null; 

function sendCode(){ 
    var phone = $("#phone").val(); 
    if(phone == ""){ 
        alert("请输入手机号码"); 
        return; 
    } 

    //发送验证码的代码 

    $(".code-btn").addClass("disable"); 
    timer = setInterval(function(){ 
        time--; 
        $(".code-btn").text(time + "秒后重新发送"); 
        if(time == 0){ 
            clearInterval(timer); 
            time = 60; 
            $(".code-btn").removeClass("disable").text("获取验证码"); 
        } 
    }, 1000); 
} 

以上就是使用CSS3实现手机发送验证码表单的方法。除此之外，还可以使用CSS3动画效果为表单添加更多的视觉体验。