Come creare un timer per il conto alla rovescia circolare utilizzando HTML, CSS o JavaScript?

Question

Attualmente sto lavorando a un gioco a quiz e, per ogni domanda, desidero inserire un timer per il conto alla rovescia. Ho alcuni plugin, ma mi piacerebbe se potessi crearlo da solo. Quello che sto cercando di creare assomiglia a quello nell'immagine qui sotto. Per favore, dimmi come posso farlo?

C'è un modo per assegnare un bordo solo fino a una determinata percentuale del perimetro, in modo che io possa dare un bordo, prima per intero, e poi come ogni secondo avanza, posso continuare a diminuire/aumentarlo così che lo otterrei nel modo perfetto.

Il timer desidero creare dovrebbe apparire un po 'come questo (spero che tu capire come il suo bordo blu aumenta ogni secondo):

Answer 1

Qui è qualcosa stavo giocando intorno con qualche tempo fa. Usa una combinazione di SVG, transizioni css e javascript. Si dovrebbe essere in grado di strappare lo distingue e utilizzare come punto di partenza ...

var time = 10; /* how long the timer runs for */ 
 
var initialOffset = '440'; 
 
var i = 1 
 
var interval = setInterval(function() { 
 
    $('.circle_animation').css('stroke-dashoffset', initialOffset-(i*(initialOffset/time))); 
 
    $('h2').text(i); 
 
    if (i == time) { 
 
     clearInterval(interval); 
 
    } 
 
    i++; 
 
}, 1000);

.item { 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
.item h2 { 
 
    text-align:center; 
 
    position: absolute; 
 
    line-height: 125px; 
 
    width: 100%; 
 
} 
 

 
svg { 
 
    -webkit-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
} 
 

 
.circle_animation { 
 
    stroke-dasharray: 440; /* this value is the pixel circumference of the circle */ 
 
    stroke-dashoffset: 440; 
 
    transition: all 1s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="item html"> 
 
    <h2>0</h2> 
 
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg"> 
 
    <g> 
 
     <title>Layer 1</title> 
 
     <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/> 
 
    </g> 
 
    </svg> 
 
</div>

JSFiddle version

Answer 2

si dovrebbe guardare il plugin jQuery manopola https://github.com/aterrien/jQuery-Knob, generato tela circolare immettere e impostare il comportamento del timer come:

var time = 0, 
    maxTime = 60; 
$('#dial').knob({ 
    readOnly : true, 
    thickness : 0.1, 
    max : maxTime 
}); 


setInterval(function() { 
    if(time>maxTime) time = 0; 
    time++; 
    $('#dial') 
     .val(time) 
     .trigger('change'); 
}, 1000); 

Ho realizzato una codepen qui: http://codepen.io/pik_at/pen/azeYRg