Cách tạo bộ đếm thời gian đếm ngược bằng cách sử dụng HTML, CSS hoặc JavaScript?

Question

Hiện tại, tôi đang làm việc trên một trò chơi đố và trong đó, đối với mỗi câu hỏi, tôi muốn đặt một đồng hồ đếm ngược. Tôi có một số plugin, nhưng tôi ước nếu tôi có thể tự tạo ra nó. Những gì tôi đang cố gắng để tạo ra trông giống như một trong hình dưới đây. Bạn có thể cho tôi biết làm thế nào tôi có thể làm điều đó?

Có cách nào chỉ định đường viền cho tới một tỷ lệ nhất định của chu vi, để tôi có thể tạo đường viền, trước hết, và sau đó là mỗi lần tăng thứ hai, tôi có thể tiếp tục giảm/tăng tôi sẽ làm theo cách hoàn hảo.

Các bộ đếm thời gian tôi muốn tạo nên nhìn hơi như thế này (hy vọng bạn hiểu cách đường viền màu xanh của nó sẽ tăng lên mỗi giây):

Answer 1

Dưới đây là một cái gì đó tôi đã chơi xung quanh với một thời gian trước đây. Nó sử dụng một sự kết hợp của SVG, chuyển tiếp css và javascript. Bạn sẽ có thể rip nó ra và sử dụng như là một điểm khởi đầu ...

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

bạn nên nhìn vào jquery cắm Knob https://github.com/aterrien/jQuery-Knob, tạo vải tròn đầu vào và đặt hành vi hẹn giờ như:

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

Tôi đã tạo một mã nhỏ ở đây: http://codepen.io/pik_at/pen/azeYRg