使用vue 写一个简单的60s倒计时
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用vue 写一个简单的60s倒计时相关的知识，希望对你有一定的参考价值。
参考技术A 在项目开发里，我们经常会遇到发送验证码、点击了之后有60秒倒计时的按钮,下面就看一下代码如何写？如图所示：
用JavaScript写一个简单的倒计时，可以应用在发送短信验证码的“59秒后重新发送验证短信”
倒计时——从10倒数到0，点击按钮会还原倒计时
<body>
<!-- 将textvalue值设为10，从10倒数 -->
<input type="text" value="10" id="txt">
<input type="button" value="重新开始" id="btn">
</body>
<script>
var oT = document.getElementById("txt");
var oB = document.getElementById("btn");
var timer;
//封装一个开始倒数的函数
function start()
//开启计时器，每秒text框中的数值自减1
timer = setInterval(function()
oT.value--;
//当text框中的数值为0时，停止计时器
if(oT.value<=0)
clearInterval(timer);
,1000)
//封装一个清楚延时器的函数
function stop()
clearTimeout(timer);
//当网页加载完毕时的行为如下
window.onload = function()
//只要text里面的数值还未到0，则不停地以每秒减一的速度进行着
if(oT.value>0)
start();
//一旦清零，就停止
else
stop();
//当点击按钮时的行为
oB.onclick = function()
//此处要设清除计时器，否则中断text倒数后的重新倒数将会加速，甚至会递减到负值
clearInterval(timer);
//点击按钮后，无论text中的数值时多少，都变为10
oT.value = 10;
//重复上面函数的行为
if(oT.value>0)
start();
else
stop();
</script>
以上是关于使用vue 写一个简单的60s倒计时的主要内容，如果未能解决你的问题，请参考以下文章