<button class
="button" style
="vertical-align:middle" id
="min5" onclick
="fun()"><span
>5 min </span
></button
>
<script
>
window
.onload
= function() {
document
.getElementById(
"min5")
.onclick
= function fun() {
var min = 4;
var sec
= 59;
var refreshId
= setInterval(function(){
document
.getElementById(
"min5")
.innerHTML
= min +" : " + sec ;
sec
--;
if(sec
==0){
if(
min>0){
min--;
sec
=59;
}
else{
clearInterval(refreshId);
setTimeout(function() {
document
.getElementById(
"min5")
.innerHTML
= 0 +" : " + 0 ;
},
1000);
}
}
},
1000);
}
}
body {
background
-color:
#eaebe2;
}
button {
display:
inline-block;
border
-radius:
4px;
border:
none;
color:
#FFFFFF;
text
-align: center;
font
-size:
16px;
padding:
10px;
width:
140px;
transition:
all 0.5s;
cursor: pointer;
margin:
5px;
outline:
none;
}
.button span {
cursor: pointer;
display:
inline-block;
position: relative;
transition:
0.5s;
}
.button span:after {
content:
'»';
position: absolute;
opacity:
0;
top:
0;
right:
-20px;
transition:
0.5s;
}
.button:hover span {
padding
-right:
25px;
}
.button:hover span:after {
opacity:
1;
right:
0;
}
#min5 {
background
-color:
#2887a5;
}
#min5:hover{
background:
#399bb8;
}
#min5:active{
background:
#2887a5;
}
转载请注明原文地址: https://ju.6miu.com/read-971964.html
