根据标识不同状态来实现点击按钮倒计时且可点击触发不同动作方法

最新推荐文章于 2024-07-24 23:00:08 发布

Pengo·Mak

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量163

点赞数

分类专栏： JS 文章标签：前端 JavaScript Web

本文链接：https://blog.csdn.net/PengoMak/article/details/102294895

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div>
       <input type="button" onclick="butt(this)" value="Start">
   </div>
</body>
<script type="text/javascript">
    var count=60;
    var state=0;
    function butt(v){
        if(state==2){
            state=-1;
            alert("Stop:Perform stop operation");
            count=0;
        }else if(state==1 ||state==0){
            state=0;
            alert("Start:Perform start operation");
        }
        controlStyle(v);
    }
    function controlStyle(v){
        if(count==0){
            v.value="Start";
            v.style.backgroundColor="";
            if(state==-1){
                count==0;
            }else{
                count=60;
            }
            state=1;
        }else{
            v.style.backgroundColor="#34FFCA";
            v.value="Stop("+count+")";
            count--;
            state=2;
            setTimeout(function(){
                controlStyle(v)
            },1000)
        }
    }
</script>
</html>

Pengo·Mak

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据标识不同状态来实现点击按钮倒计时且可点击触发不同动作方法

@TOC在这里插入代码片欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设...
复制链接

扫一扫

专栏目录