按钮显示倒计时JS

2022-07-25 15:37:57 阅读：131 来源： 互联网

标签：function totalTime JS 倒计时 remainingTime 按钮 var fontId 1000

test.html

<script type="text/javascript" src="test.js"></script>

<input type="button" id="fontId" value="send sms" onclick="clickBtn();" />

test.js

var totalTime = 5 * 1000;//总时间
var remainingTime = totalTime;//初始化剩余时间

function clickBtn(){
    //设置触发事件的时间间隔
    var interval = setInterval(function(){
        myEvent();
    },1000);
    
    //设置多长时间后触发事件。
    setTimeout(function(){
        remainingTime = totalTime;//初始化剩余时间
        document.getElementById("fontId").value = "send sms";
        clearTimeout(interval);//清除或关闭括号里的任务对象。
    },totalTime);
}

//我的事件
function myEvent(){
    remainingTime = remainingTime - 1000;
    var remainingSecond = remainingTime / 1000;
    
    document.getElementById("fontId").value = remainingSecond;
}

标签：function,totalTime,JS,倒计时,remainingTime,按钮,var,fontId,1000
来源： https://www.cnblogs.com/jinzhiming/p/16517477.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

按钮显示倒计时JS