Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.10.2013, 11:37
Новичок на форуме
Отправить личное сообщение для make_it Посмотреть профиль Найти все сообщения от make_it
 
Регистрация: 23.10.2013
Сообщений: 1

Таймер отсчета в виде круга
есть ли какие нибудь примеры реализации таймера обратного отсчета, в виде круга... к примеру
https://www.dropbox.com/s/ye3hq5k8l3...1%8C%D1%83.PNG

Есть скидка, которая со временем "тает" так сказать
Ответить с цитированием
  #2 (permalink)  
Старый 23.10.2013, 17:30
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

make_it,
используйте canvas.
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #3 (permalink)  
Старый 23.10.2013, 19:01
Аватар для a_l
a_l a_l вне форума
Кандидат Javascript-наук
Отправить личное сообщение для a_l Посмотреть профиль Найти все сообщения от a_l
 
Регистрация: 15.09.2011
Сообщений: 143

В принципе, canvas не обязателен. Обычный круг же, можно через border-radius сделать. Вообще, погуглите "css pie timer" - много реализаций.
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2013, 22:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Круговой таймер на канвас
make_it,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
</head>
<body>
<canvas id="myCanvas" ></canvas>
<script>
  var myCanvas = document.getElementById("myCanvas"),
    context = myCanvas.getContext("2d"),
    timeLimit = 15E3,
    timeStart = (new Date).getTime(),
    canvasSize = 200,
    lineWidth = 24,
    drawX = drawY = radius = canvasSize / 2;
    radius -= lineWidth / 2;
    myCanvas.width = canvasSize;
    myCanvas.height = canvasSize;

function go() {
    context.beginPath();
    context.lineWidth = lineWidth;
    context.lineCap = "round";
    context.strokeStyle = "rgb(0, 255, 0)";
    var a = ((new Date).getTime() - timeStart) / timeLimit;
    context.clearRect(0, 0, canvasSize, canvasSize);
    context.font = '24px "Tahoma"';
    context.fillText((100 - a*100)|0, radius, drawY);
    context.arc(drawX, drawY, radius, -Math.PI / 2 + 2 * Math.PI * a, -Math.PI / 2, !1);
    context.stroke();
    1 < a && (timeStart = (new Date).getTime());
    timer = window.setTimeout(go, 50)
}
go();
</script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Таймер обратного отсчета на 6 дней akella1900 Общие вопросы Javascript 25 17.06.2016 13:04
Таймер отсчета 24 часов. ShoKKK Общие вопросы Javascript 4 27.09.2013 00:12
Таймер обратного отсчета на Alert moorzilla Общие вопросы Javascript 2 27.05.2012 22:14
Графический таймер обратного отсчета bobri4 Элементы интерфейса 4 24.08.2009 22:50
таймер обратного отсчета Mignon Общие вопросы Javascript 1 07.06.2008 17:16