如何使用HTML，CSS或JavaScript创建一个循环倒计时定时器？ [英] How to create a circular countdown timer using HTML, CSS or JavaScript?

问题描述

目前，我正在进行一个问答游戏，在每个问题，我想放置一个倒计时计时器。我有一些插件，但我希望，如果我可以自己创建。我想要创建的图像看起来像下面的图片。你能告诉我怎么做吗？

有一种方法来分配边框只有达到周界的指定百分比，这样我可以给一个边界，第一个完整，然后随着每一秒，我可以保持减少/增加它，使我会得到它的完美的方式。

我希望创建的计时器应该看起来像这样（希望你明白它的蓝色边框将每秒增加）：

解决方案

这是我在一段时间之前玩的东西。它使用SVG，CSS转换和javascript的组合。

  var time = 10; / * initial_offset ='440'; * / var initialOffset ='440'; var i = 1var interval = setInterval（function（）{$（'。circle_animation'）。css（'stroke-dashoffset'，initialOffset- （initialOffset / time）））; $（'h2'）.text（i）; if（i == time）{clearInterval（interval）;} i ++;}，1000）;  pre> 
  .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; / *这个值是圆的像素圆周* / 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 =160height =160xmlns =http://www.w3.org/2000/svg> < g> < title>第1层< / title> < circle id =circleclass =circle_animationr =69.85699cy =81cx =81stroke-width =8stroke =＃6fdb6ffill =none/> < / g> < / svg>< / div>  
 

JSFiddle版本

Currently, I am working on a quiz game and in that, for each question, I wish to place a countdown timer. I got some plugins, but I wish if I could create it myself. What I am trying to create looks like the one in the image below.Can you please tell me how I can do it?

Is there a way to assign a border to only up to a specified percentage of the perimeter, so that I could give a border, first in full, and then as each second advances, I can keep decreasing/increasing it so that I would get it in the perfect way.

The timer I wish to create should look somewhat like this (hope you understand how its blue border will increase every second):

解决方案

Here is something i was playing around with a while ago. It uses a combination of SVG, css transitions and javascript. You should be able to rip it apart and use as a starting point...

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

这篇关于如何使用HTML，CSS或JavaScript创建一个循环倒计时定时器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！