Jak utworzyć okrągły zegar odliczający za pomocą HTML, CSS lub JavaScript?

Obecnie pracuję nad grą quizową, w której, dla każdego pytania, chciałbym umieścić zegar odliczający. Mam kilka wtyczek, ale żałuję, że sam nie mogę tego zrobić. To, co próbuję stworzyć, wygląda jak na poniższym obrazku. Czy możesz mi powiedzieć, jak mogę to zrobić?Jak utworzyć okrągły zegar odliczający za pomocą HTML, CSS lub JavaScript?

Czy istnieje sposób przypisania obramowania tylko do określonego procentu obwodu, tak żebym mógł podać granicę, najpierw w całości, a następnie, gdy każda sekunda posuwa się naprzód, mogę nadal zmniejszać/zwiększać ją tak, aby że dostanę to w doskonały sposób.

Timer chcę utworzyć powinien wyglądać mniej więcej tak (mam nadzieję, że rozumiesz, jak jego niebieskie obramowanie wzrośnie co drugi):

enter image description here

Źródło

2015-04-15 Arun Sivaraj

Nie jesteśmy tutaj, aby napisać kod. Co próbujesz? Jesteśmy tutaj, aby pomóc/pomóc w problemach z kodowaniem, ale nie wszystko działa dla ciebie. Opublikuj, co dotychczas próbowałeś. – dowomenfart

Nigdy nie prosiłem cię o napisanie całego kodu dla mojego brata. Chciałem tylko wiedzieć, czy jest jakikolwiek sposób na nadanie okrągłej granicy tylko do określonej szerokości. Dziękuję. –

prawie to samo pytanie tutaj: http://stackoverflow.com/questions/18835477/drawing-animated-arc-with-pure-css – cdm

Oto coś Grałem około z jakiś czas temu. Używa kombinacji SVG, przejść css i javascript. Powinieneś być w stanie zgrać go od siebie i wykorzystać jako punkt wyjścia ...

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

Źródło

2015-04-15 12:18:11 Turnip

Dlaczego między 0 a 1 nie ma ruchu? ;) –

Cóż, powiedziałem ".. jako punkt wyjścia" :) – Turnip

:) Wiem! Świetne wykorzystanie technologii internetowych przy okazji, awans! –

należy szukać w jQuery plugin Gałka https://github.com/aterrien/jQuery-Knob, generowany płótno okrągły wprowadzania i ustawiania timera jak:

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

Utworzono kodek tutaj: http://codepen.io/pik_at/pen/azeYRg

Źródło

2015-04-15 12:26:24

Jak utworzyć okrągły zegar odliczający za pomocą HTML, CSS lub JavaScript?

Odpowiedz

Powiązane problemy