Javascript.RU

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

progress bar идеи по оптимизации
Сделал progress bar , может есть идеи как сделать проще ? а то что то 2 цикла не очень нравиться ((
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="utf-8"> 
<style>
</style>
</head>
<body>

<canvas id="canvas" width="100" height="100"></canvas>
</body>
<script> 

var canvas = document.getElementById('canvas'),
	ctx    = canvas.getContext('2d');


function bar (mas){
var el = mas[mas.length-1];

for(var i = mas.length-2; i >= 0; i--) mas[i+1] = mas[i];
mas[0] = el;

for(var i = 0; i < mas.length; i++) {
	ctx.fillStyle = mas[i];
	ctx.fillRect(i * 20, 50, 10, 10);
}

setTimeout(function(){bar(mas)}, 100)

}

bar(['#B8B8B8', '#A8A8A8', '#989898', '#888888', '#787878'])
</script>
</body>
</html>

Последний раз редактировалось caetus, 29.01.2015 в 00:26.
Ответить с цитированием
  #2 (permalink)  
Старый 29.01.2015, 02:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

caetus,
строка 16 заменяет ваш 1 цикл , остальное просто для примера.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById('canvas'),
	ctx    = canvas.getContext('2d');
function bar (mas){
function draw() {
  mas.unshift(mas.pop());
  for (var i = 0; i < mas.length; i++){
    ctx.lineWidth = 10;
    ctx.strokeStyle = mas[i]  ;
    ctx.beginPath();
    ctx.moveTo(5+i*20,10);
    ctx.lineTo(5+i*20,20);
    ctx.stroke();
  }
 setTimeout(draw, 100)
}
draw()
}
bar(['#B8B8B8', '#A8A8A8', '#989898', '#888888', '#787878'])
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 29.01.2015, 02:14
Аспирант
Отправить личное сообщение для DeV1doR Посмотреть профиль Найти все сообщения от DeV1doR
 
Регистрация: 07.12.2014
Сообщений: 30

caetus,
посоветуй учебник по canvas. Спс.
Ответить с цитированием
  #4 (permalink)  
Старый 29.01.2015, 02:26
Профессор
Отправить личное сообщение для caetus Посмотреть профиль Найти все сообщения от caetus
 
Регистрация: 23.09.2014
Сообщений: 197

для canvas хватит справочника , ну для общего развития могу посоветовать Графика на JavaScript — Рафаэлло Чекко (создания игр canvas)
Ответить с цитированием
  #5 (permalink)  
Старый 29.01.2015, 02:34
Профессор
Отправить личное сообщение для caetus Посмотреть профиль Найти все сообщения от caetus
 
Регистрация: 23.09.2014
Сообщений: 197

Рони спасибо за помощь , еще интересует один вопрос! выбран ли правильный путь решения задачи ?
P.S программированием занимаюсь в свободно время (работаю по другой специальности ) вот и очень часто возникают вопросы в правильности решения задач (((
Ответить с цитированием
  #6 (permalink)  
Старый 29.01.2015, 02:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

caetus,
эту задачу лучше сделать на css
http://www.paulund.co.uk/playground/...ading-spinner/
http://blog.pexels.com/css-only-loaders/

Последний раз редактировалось рони, 29.01.2015 в 02:54.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
input и progress bar MrTemax Элементы интерфейса 1 14.11.2014 22:07
Progress bar двигаем мышкой. pifon Общие вопросы Javascript 1 27.08.2014 15:51
не работает sound.addEventListener("timeupdate", progress, false); Developer-av Общие вопросы Javascript 1 05.08.2012 18:16
Progress bar dima_zluka Элементы интерфейса 0 20.03.2011 02:05
progress bar для JS Dagger Общие вопросы Javascript 18 14.05.2009 14:02