倒计时效果的常见应用
倒计时功能是非常有用的一个小功能，在常用的一些app、网站里面也比较常用。比如学习通的作业、考试界面，就会显示倒计时来提醒同学们抓紧时间完成；利用手机号登录时也会有发送验证码的倒计时；此外在一些网站里还会利用倒计时告诉用户多久以后网站将会发布或者关闭进行维护，也可以用于举办活动的开始和停止的倒计时。
实现原理
本次的实现效果如下图2.1：（本次博客还是在上周验证码实现的基础上对倒计时进行讲解的）
图2.1 实现效果
从图2.1的效果中可以看出，当我们点击“发送验证码”就会触发倒计时。倒计时这一效果的实现需要用到JavaScript中的Date对象，定义日期对象还是用var myDate = new Date()，利用myDate存放了当前日期对象，然后可以通过日期对象的函数获取具体需要的数据，比如，年月日等等。Data对象方法比较多，如下图：
图2.2 data对象方法
getYear() 获取年份，获取年最好用；getFullYear()获取完整格式年份，如2014，一般用这个；getMonth()获取月，从0开始（0~11），如果要返回当前月份要加1；getDate()获取日（1~31）；getDay()获取星期几（0~6）；getHours()获取小时（0~23）；getMinutes()获取分钟数（0~59）；getSeconds()获取秒数（0~59）；getTime()获取毫秒数。
实现过程
创建相应的文件，并在HTML5中引入，利用HTML5代码对页面框架进行搭建（按钮样式可查看之前写的博客）；
<header> <i class="am-icon-angle-left back"></i> <p>账号注册</p> </header> <div> <div> <input type="tel" placeholder="手机号" class="input-item mobile"> <i class="res-icon am-icon-phone"></i> </div> <div> <input type="text" placeholder="验证码" class="input-item yanzheng"> <i class="res-icon am-icon-mobile"></i> <button type="button">获取验证码</button> </div> <div> <input type="passWord" placeholder="密码" class="input-item mima"> <i class="res-icon am-icon-check-square-o"></i> </div> <div> <input type="passWord" placeholder="确认密码" class="input-item repeatmima"> <i class="res-icon am-icon-check-circle-o"></i> </div> <div> <button type="button" id="res-btn" class="am-btn am-btn-block">注册</button> </div> </div> |
利用css对样式进行调整；
利用JavaScript对功能进行实现。由效果图2.1可以知道，在这里主要用到的是60s倒计时。在注册页面时有获取验证码按钮，点击“获取验证码”后过60秒才能重新获取。点击后样式会发生改变，并且数字是递减的，到0时重新回到最初的状态。
var time=60; //倒计时时长 function roof(o){ if (time ==0) { o.removeAttribute("disabled"); o.innerHTML="输入验证码"; o.style.backgroundColor="#fe9900"; time =60; }else{ o.setAttribute("disabled", true); o.innerHTML=time+"秒后重新获取"; o.style.backgroundColor="#8f8b8b"; time --; setTimeout(function(){ roof (o) },1000) } } //最后点击按钮，调用roof方法： $(".getCode").click(function(){ roof (this); }); |
如下是整个图2.1验证码获取效果的完整的JavaScript代码，完整的HTML代码如上述（1）所示，css代码已省略。
<script> var times = 60;//倒计时时长 function roof(){ if(times == 0){ $('.yanzhengma').text('发送验证码('+times+'s)'); $('.yanzhengma').prop('disabled',false); $('.yanzhengma').text('发送验证码'); times = 60; return } $('.yanzhengma').text('发送验证码('+times+'s)'); times--;
setTimeout(roof,1000); } $('.yanzhengma').on('click',function(){
$(this).prop('disabled',true); roof();
}); $('#res-btn').on('click',function(){ var mobile = $('.mobile').val(); var yanzheng = $('.yanzheng').val(); var mima = $('.mima').val(); var repeatmima = $('.repeatmima').val(); if(!mobile){ $('.mobile').focus(); document.querySelector('.mobile').placeholder = '请填写手机号码'; return } if(!yanzheng){ $('.yanzheng').focus(); document.querySelector('.yanzheng').placeholder = '请填写验证码'; return } if(!mima){ $('.mima').focus(); document.querySelector('.mima').placeholder = '请填写密码'; return } if(!repeatmima){ $('.repeatmima').focus(); document.querySelector('.repeatmima').placeholder = '请填写重复密码'; return } if(repeatmima !== mima){ $('.repeatmima').focus(); document.querySelector('.repeatmima').value = ''; document.querySelector('.repeatmima').placeholder = '两次密码不一致'; return }
$(this).prop('disabled',true); alert('注册成功'); }) </script> |
