it-swarm.com.de

Wie erstelle ich einen kreisförmigen Countdown mit HTML, CSS oder JavaScript?

Momentan arbeite ich an einem Quizspiel und möchte für jede Frage einen Countdown-Timer einstellen. Ich habe ein paar Plugins, aber ich wünschte, ich könnte es selbst erstellen. Was ich versuche zu erstellen, sieht wie das im Bild unten aus. Können Sie mir bitte sagen, wie ich es schaffen kann?

Gibt es eine Möglichkeit, einen Rand nur bis zu einem bestimmten Prozentsatz des Umfangs zuzuweisen, so dass ich einen Rand zuerst vollständig geben kann, und dann, wenn jede Sekunde vorrückt, ich ihn weiter verkleinern/vergrößern kann, so dass ich ihn bekommen würde es in perfekter Weise.

Der Timer, den ich erstellen möchte, sollte in etwa so aussehen (ich hoffe, Sie verstehen, wie der blaue Rand von Sekunde zu Sekunde zunimmt):

enter image description here

18
Arun Sivaraj

Hier ist etwas, mit dem ich vor einiger Zeit herumgespielt habe. Es verwendet eine Kombination aus SVG, CSS-Übergängen und Javascript. Sie sollten in der Lage sein, es zu zerreißen und als Ausgangspunkt zu verwenden.

/**
* The setTimeout({},0) is a workaround for what appears to be a bug in StackSnippets.
* It should not be required. See JSFiddle version.
*/

setTimeout(function() { 

  var time = 10; /* how long the timer will run (seconds) */
  var initialOffset = '440';
  var i = 1

  /* Need initial run as interval hasn't yet occured... */
  $('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));

  var interval = setInterval(function() {
      $('h2').text(i);
      if (i == time) {  	
        clearInterval(interval);
        return;
      }
      $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
      i++;  
  }, 1000);

}, 0)
.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

53
Turnip

sie sollten sich den Jquery-Plugin Knob https://github.com/aterrien/jQuery-Knob anschauen, die Zeicheneingabe für die Zeichenfläche erzeugen und das Timerverhalten wie folgt einstellen:

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 ein Codepen gemacht: http://codepen.io/pik_at/pen/azeYRg

0
Pik_at