web-dev-qa-db-ja.com

HTML、CSS、またはJavaScriptを使用して循環カウントダウンタイマーを作成する方法

現在、私はクイズゲームに取り組んでおり、その中で、質問ごとにカウントダウンタイマーを配置したいと思っています。いくつかのプラグインを入手しましたが、自分で作成できるといいのですが。私が作成しようとしているものは、下の画像のように見えます。どうすればできるか教えてください。

境界線を指定された割合までのみに割り当てる方法はありますか？最初に完全に境界線を与え、次に毎秒進むごとに境界線を減少/増加させ続けることができます完璧な方法で。

作成したいタイマーは、次のようになります（青い境界線が毎秒増加する方法を理解してください）。

enter image description here

javascripthtmlcsstimer
19
Arun Sivaraj

ここに私がしばらく前に遊んでいたものがあります。 SVG、CSSトランジション、およびJavaScriptの組み合わせを使用します。あなたはそれをバラバラにして出発点として使用できるはずです...

/**
* 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バージョン

54
Turnip

jqueryプラグインノブ https://github.com/aterrien/jQuery-Knob を見て、生成されたキャンバス循環入力を確認し、タイマーの動作を次のように設定する必要があります。

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

ここでコードペンを作成しました： http://codepen.io/pik_at/pen/azeYRg

0
Pik_at