vue倒计时

ゞ 浴缸里的玫瑰 2022-06-01 07:20 364阅读 0赞 
  1. <style type="text/css">
  2.     button {
  3.         width: 100px;
  4.         height: 50px:
  5.     }
  6. </style>
  7. <div id="example">
  8.     <button @click="Times">
  9.       <span v-if="sendMsgDisabled">{
  10.    {time+'秒后获取'}}</span>
  11.       <span v-if="!sendMsgDisabled">发送验证码</span>
  12.     </button>
  13. </div>
  14. <script type="text/javascript">
  15.     var vm = new Vue({
  16.         el: '#example',
  17.         data() {
  18.           return {
  19.             time: 60, // 发送验证码倒计时
  20.             sendMsgDisabled: false
  21.           }
  22.         },
  23.         methods: {
  24.             Times() {
  25.                 var lett = this;
  26.                 if(!lett.sendMsgDisabled){//这里的作用是防止倒计时过程中用户连续点击按钮
  27.                   var interval = window.setInterval(function() {
  28.                     if ((lett.time--) <= 0) {
  29.                       lett.time = 60;
  30.                       lett.sendMsgDisabled = false;
  31.                       window.clearInterval(interval);
  32.                     }
  33.                   }, 1000);
  34.                 }
  35.                 lett.sendMsgDisabled = true;
  36.             }
  37.         }
  38.       })
  39. </script>

demo演示： https://jsfiddle.net/bright2017/uky7k6vb/

发表评论

表情：
评论列表 （有 0 条评论，364人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue-倒计时控件

    好久木有来更新了，最近几个月把精力都花费在了加班上~ 最近用vue整前端有个倒计时控件的需求，用element-ui满足不了需求，便模仿常见的倒计时效果，写了一个控件，有需要

    素颜马尾好姑娘i素颜马尾好姑娘i/ 0 赞/ 629 阅读