Wie erstellt man einen kreisförmigen Countdown-Timer mit HTML, CSS oder JavaScript?

Derzeit arbeite ich an einem Quiz-Spiel und für jede Frage möchte ich einen Countdown-Timer setzen. Ich habe ein paar Plugins, aber ich wünschte, ich könnte es selbst erstellen. Was ich versuche zu erstellen, sieht so aus wie auf dem Bild unten. Kannst du mir bitte sagen, wie ich es schaffen kann?Wie erstellt man einen kreisförmigen Countdown-Timer mit HTML, CSS oder JavaScript?

Gibt es eine Möglichkeit, einen Rahmen nur bis zu einem bestimmten Prozentsatz des Umfangs zuzuweisen, so dass ich einen Rahmen zuerst vollständig geben konnte, und dann wie jede Sekunde fortschreitet, kann ich ihn so weiter verkleinern/vergrößern dass ich es auf die perfekte Weise bekommen würde.

Der Timer Ich wünschte, sollte so aussehen etwas zu schaffen (hoffen, dass Sie verstehen, wie seine blauen Rand jeder Sekunde erhöhen):

enter image description here

Quelle

2015-04-15 Arun Sivaraj

Wir sind nicht hier, um die Codierung für Sie zu tun. Was hast du probiert? Wir sind hier, um Ihnen bei Ihren Codierungsproblemen zu helfen und Ihnen zu helfen. Bitte posten Sie, was Sie bisher versucht haben. – dowomenfart

Ich habe dich nie gebeten, die ganze Kodierung für mich Bruder zu machen. Ich wollte nur wissen, ob es eine Möglichkeit gibt, kreisförmigen Rand nur bis zu einer bestimmten Breite zu geben. Danke. –

fast die gleiche Frage hier: http://stackoverflow.com/questions/18835477/drawing-animated-arc-with-pure-css – cdm

Hier ist etwas, das ich spielte herum mit vor einer Weile. Es verwendet eine Kombination aus SVG, CSS-Übergängen und Javascript. Sie sollten es zerreißen können, und als Ausgangspunkt verwenden ...

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

Quelle

2015-04-15 12:18:11 Turnip

Warum zwischen 0 und 1 gibt es keine Bewegung? ;) –

Nun ich habe gesagt ".. als Ausgangspunkt" :) – Turnip

:) Ich weiß! Großer Einsatz von Web-Technologien BTW, upvoted !! –

Sie auf dem jQuery-Plugin Knob https://github.com/aterrien/jQuery-Knob, erzeugt Leinwand Kreis aussehen sollte Eingabe und Zeitverhalten einstellen wie:

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);

Ich habe hier einen Codepen gemacht: http://codepen.io/pik_at/pen/azeYRg

Quelle

2015-04-15 12:26:24

Wie erstellt man einen kreisförmigen Countdown-Timer mit HTML, CSS oder JavaScript?

Antwort

Verwandte Themen