1、倒计时几秒后跳转页面 2、js发送验证码倒计时按钮

1、倒计时，几秒后回到主页

<div>
	<span id="counts">3</span>s 后回到
	<a href="javascript:gotocenter()" style="color:#20A0FF;text-decoration:underline"> 个人中心</a>
</div>

function gotocenter(){
	window.location.href = skipurl("/mobile/me/center.html?schid="+schid+"&type=2");
} 

在地址栏参数添加 &type=2 用来判断跳转到个人中心第二个页签。

var url = skipurl("/mobile/me/center.html?schid="+schid+"&type=2");
var count=document.getElementById("counts").innerHTML;
function countTimer(){
     count--;
     //获取显示秒数的元素，通过定时器来更改秒数。
     document.getElementById("counts").innerHTML=count;
     if(count<=0){
          window.location.href = url;
     }
}
setInterval("countTimer()",1000);

2、js发送短信验证码60s倒计时按钮

$('[data-role="resend"]').click(function(){
	settime(this);
	var _mobile = $('[data-role="mobile"]').val();
	sendPhoneCode(_mobile);
});

var countdown = 60;
function settime(obj) {
    if (countdown == 0) {
        obj.removeAttribute("disabled");
        obj.innerHTML = "重新发送";
        countdown = 60;
        return;
    } else {
        obj.setAttribute("disabled", true);
        obj.innerHTML = '重新发送('+ countdown +')';
        countdown--;
    }
    setTimeout(function () {
        settime(obj)
    }, 1000)
}

//发送验证码
function sendPhoneCode(phone) {
    var request = $.get('/mobile/classes/shortcutmobilecode?mobile='+phone );
    request.success(function(result){
        layer.msg(result.message);
    });
    request.error(function (jqXHR, textStatus) {
        if (textStatus == 'timeout')
            layer.msg('服务器没有响应');
        if (textStatus == 'error')
            layer.msg('错误');
    })
}

第二种

<input type="button" id="btn" value="获取验证码" onclick="settime(this)" /> 
var countdown=30; 
function settime(obj) { 
  if (countdown == 0) { 
      obj.removeAttribute("disabled");    
      obj.value="免费获取验证码"; 
      countdown = 30; 
      return;
  } else { 
      obj.setAttribute("disabled", true); 
      obj.value="重新发送(" + countdown + ")"; 
      countdown--; 
  } 
  setTimeout(function() { settime(obj) },1000) 
}

第三种 vue

<!-- html部分 -->
  <el-button type="primary" :disabled="isSend" @click="countDown">
          {{ codeName }}
        </el-button>
 
 
const state = reactive({
        isSend: false,
        codeName: '获取验证码',
        totalTime: 10, //一般是60
        timer: '', //定时器
      })
 
      const countDown = () => {
        if (state.isSend) return
        // getCode() // 获取验证码的接口
        state.isSend = true
        state.codeName = state.totalTime + 's后重新发送'
        state.timer = setInterval(() => {
          state.totalTime--
          state.codeName = state.totalTime + 's后重新发送'
          if (state.totalTime < 0) {
            clearInterval(state.timer)
            state.codeName = '重新发送验证码'
            state.totalTime = 10
            state.isSend = false
          }
        }, 1000)
      }