防止按钮重复点击组件

html：（按钮）

    <div id="toggle" class="toggle offRun">3秒后可再次点击</div>

css：

<style type="text/css">
    /*按钮点击延时期间的样式*/
    .onRun{
    background: green;
    }
    /*按钮平时的样式*/
    .offRun{
    background: red;
    }
    /*按钮的基本样式*/
    .toggle{
    width: 100%;
    height: 3em;
    text-align: center;
    line-height: 3em;
    }

    </style>

js：

/**
     * 防止按钮多次点击
     * @param {Object} obtn 被点击的按钮
     * @param {Object} time 不能二次点击的时间
     * @param {Object} start 开始点击函数
     * @param {Object} end 结束点击函数
     */

function preventClicks(obtn,time,start,end){
    var dis  = false;
obtn.οnclick=function(){
if(!dis){
dis = true;
start(obtn);
setTimeout(function(){
dis = false;
end(obtn);
},time*1000);
}
}

    }

使用

window.οnlοad=function(){
    var obtn = document.getElementById("toggle");
    preventClicks(obtn,3,function(o){
    o.className= "toggle onRun";
    },function(o){
    o.className= "toggle offRun";
    })
    }