Countdown 1mn

by toubia95

HTML

<a class="launch" href="#">Start</a>

<span id="timer">10</span>
<br><br>
<div class="pulse"></div>

CSS

.launch {
    background:silver;
    padding: 5px;
    border-radius: 5px;
    text-decoration: none;
}

.pulse {
    width: 100px;
    height: 100px;
    background: white;
    border-color: silver; 
    border-style: solid; 
    border-width: 50px; 
    border-radius: 100%;
    position: relative;
}
.pulse:before {
    content:"";
    display:block;
    width: 100px;
    height: 100px;
    background: white;
    border-color: #3E94D1; 
    border-style: solid; 
    border-width: 20px; 
    border-radius: 100%;
    position:absolute;
    top:-50px;
    left:-50px;
}

JavaScript

var count = 10;

$(".launch").click(function () {
    var counter = setInterval(timer, 1000); //1000 will run it every 1 second
});

function timer() {
    count = count - 1;
    if (count <= -1) {
        clearInterval(counter);
        //counter ended, do something here
        return;
    }
    //Do code for showing the number of seconds here
    document.getElementById("timer").innerHTML = count; // watch for spelling
}