Question

我需要一个时间来评估并显示这方面的进展:

enter image description here

在中部和中部将有一个两分钟的柜台。我怎么能够这样做呢?

Answer 1

you could implement it on modern browser using canvas. I took a look at https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes under "Arcs" section and I came to this solution (a fiddle is linked below)

HTML5

<!DOCTYPE HTML>
<html>  
    <head>  
      <title>Canvas circular timer</title>  
    </head>
    <body>  
        <div>
            <canvas id="timer" width="100" height="100"></canvas>
            <span id="counter">20</span>
        </div>
    </body>  
</html>

<>CSS

canvas {
   -webkit-transform : rotate(-90deg);  
   -moz-transform : rotate(-90deg);
}

div { position: relative; z-index: 1; height: 100px; width: 100px; }
div span {
    position   : absolute;
    z-index    : 1;
    top        : 50%;
    margin-top : -0.6em;
    display    : block;
    width      : 100%;
    text-align : center;
    height     : 1.5em;
    color      : #0e0;
    font       : 1.5em Arial;
}

http://www.ohchr.org。

window.onload = function() {
    var canvas  = document.getElementById( timer ),
        seconds = document.getElementById( counter ),
        ctx     = canvas.getContext( 2d ),
        sec     = seconds.innerHTML | 0,
        countdown = sec;

    ctx.lineWidth = 6;
    ctx.strokeStyle = "#00EE00";

    var
    startAngle = 0,
    time       = 0,
    intv       = setInterval(function(){

        var endAngle = (Math.PI * time * 2 / sec);
        ctx.arc(50, 50, 35, startAngle , endAngle, false);   
        startAngle = endAngle;
        ctx.stroke();

        seconds.innerHTML = countdown--;

        if (++time > sec) { clearInterval(intv); }

    }, 1000);

}

http://jsfiddle.net/2qyEv/“rel=“nofollow” http://jsfiddle.net/2qyEv/。 (与Catherine和Webkit合任)

注:其余二字不是在信封内写的,而是放在一个<条码>和代号;中,放在信封上。这样做——执行退步逻辑——不支持信道的老浏览器至少可以显示减员。如果你不需要这种优化,那么这种偏差只能用于文字和图象:。 http://jsfiddle.net/9L48R/。

我请你用 j树取代 j字。

友情链接