twobomb

У вас там что то страшное. Нужно типа так?

Можно так

Закоменти условие и норм.

Ну всего скорее потому что setTimeout это асинхронный вызов функции через 100мс. В нем идет обращение к локальной переменной i, которая к этому моменту уже состовляет 10. Думаю этот цикл выполняется около 1мс, поэтому к моменту обращения к переменной i она уже равна 10. Чтобы выводило от 0 до 10 можно сделать так

for(var i=0; i<10; i++) {
  (function(i){setTimeout(function() {
    alert(i);
  }, 100);})(i);
}

но будет выводить не по порядку, так как это асинхронная функция. Короче говоря говоря цикл выполнится быстрее чем произойдет первый вызов функции.
P.S. Ну и напоследок можно попробовать приостанавливать цикл на каждой итерации и посмотреть что будет

(async function(){
for(var i=0; i<10; i++) {
  setTimeout(function() {
    alert(i);
  }, 100);
  await sleep(100);
}
})();
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

Довольно просто, типа так. Только естественно нужен соответствующий плеер без рамок и т.п., а не плеер youtube. При наведении запускаешь видео, при выходе за границы - стоп. Ну и при наведении анимация увеличения. В какой-то момент момент точка невозврата, тоесть даже при выходе за границы видео не возвращает, а идет анимация увелечения до размеров окна и плавное убирание border-radius чтобы были квадратные рамки

Поменяй

<div class="home-fotka" style="background-image:url(fotke/F22B2D63-1B3D-46FA-B32C-CA0DBF6DDEF2.gif); font-family: Verdana, Geneva, sans-serif;">

на

<div class="home-fotka" style="background-image:url(fotke/F22B2D63-1B3D-46FA-B32C-CA0DBF6DDEF2.gif);font-family: Verdana, Geneva, sans-serif;opacity: .5;">

Вы посмотрите что вам возвращает buffer
console.log(buffer) он вам возвращает описание самой функции, можно сказать ссылку на функцию. Чтобы работал вам метод, он должен возвращать объект у которого есть свойство clear в котором уже лежит ссылка на функцию clear

Можно так

Можно так . Код

Смысл обучения если это делает за тебя кто-то другой? Так ты ничему не научишься, учись решать трудности сам.

function compression(str){
	var out = "";
  var cnt = 1;
	for(var i = 0; i < str.length; i++)
  	if(str[i] == str[i+1] && i < str.length)
    	cnt++;
    else{
    	out+= str[i]+ (cnt > 1?cnt:"");
      cnt = 1;
      }
  return out;
}
function uncompression(str){
	var out = "";
	for(var i = 0; i < str.length; i++){
  	if(!isNaN(parseInt(str[i])))
    	continue;
  	if(i < str.length && !isNaN(parseInt(str[i+1])))
    	for(var j = 0; j < str[i+1];j++)
      	out+= str[i];
    else
    	out+=str[i];
    }
  return out;
}
alert(compression("aabcccabb"));//a2bc3ab2
alert(uncompression("a2bc3ab2"));//aabcccabb

Вот пример для дивов

<div class="def" data-firstclass="начальный класс" data-secondclass="класс на который поменять" data-px="на какой высоте скролла поменять в px"></div>

window.getComputedStyle(document.querySelector("#textColor")).color

Вообщем вот написал на основе квадратичной кривой безье.
Но в идеале нужно еще написать сглаживание. Атрибут canvas data-offset задает насколько сильное скругление , data-url ссылка на изображение .
Ну и самая главная проблема, чтобы работал с изображениями
раскоментируй строку //ctx.drawImage(img,0,0,ctxW,ctxH - offset); и закоментируй
ctx.fillRect(0,0,ctxW,ctxH - offset);
Ссылка которая будет в data-url должна быть на том же хосте что и скрипт! Тоесть если ссылка на сайт localhost/page.php то и ссылка на изображение localhost/.../name.jpg
Или ссылка должна быть на сервере с параметром Access-Control-Allow-Origin "*" иначе сработает защита и выкинет исключение

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Вот пример деформации

$('#typeProject').click(function(){
						if(!$(".typeProject").attr("data-numcolor"))
           	 	$(".typeProject").attr("data-numcolor",0);
            var colors = ['green', 'red', 'blue', 'yellow'];
            var num = $(".typeProject").attr("data-numcolor");
            $('.typeProject').css('background-color', colors[num++]);
            num %= colors.length;
            	$(".typeProject").attr("data-numcolor",num);
        });

JS

document.querySelector("#hideFrame").addEventListener("click",function(){
	document.querySelectorAll("iframe").forEach(function(el){
  	el.style.display =  window.getComputedStyle(el).display == "block"?"none":"block"; 
  });
},false);

CSS

iframe{
      display:block;
    }