Начал изучать JS

@vrodnenok · Регистрация: 17.05.2012

Студворк — интернет-сервис помощи студентам

прочитал в книге спецификации CSS и вспомнил молодость, скроллер в стиле Amiga:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
 
<head>
<title>
My old school scroller
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<style type="text/css">
#draw-target { width:480px; height:220px; background-color:#000; position:relative;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
(function() {
var fastSin = function(steps) {
var table = [],
ang = 0,
angStep = (Math.PI * 2) / steps;
do {
table.push(Math.sin(ang));
ang += angStep;
} while (ang < Math.PI * 2);
return table;
};
var sinTable = fastSin(4096),
$drawTarget = $('#draw-target'),
divs = '',
i, $bars, x = 0;
 
var scrText = ' Gimme a job, gimme a job, why dont you gimme a job! Gimme a job, gimme a job, why dont you gimme a job! Gimme a job, gimme a job, why dont you gimme a job! ';
 
var scrArr = scrText.split('');
var scrl = scrArr.length;
//document.write(scrArr[scrl]);
 
 
var drawGraph = function(ang, freq, height, left) {
for (var i = 0; i < 48; i++) {
$bars[i].style.top =
160 - height + sinTable[(ang + (i * freq)) & 4095] * height + 'px';
$bars[i].style.left = (left+i*10) + 'px';
$bars[i].innerHTML=scrArr[i];
//$bars[i].style.color='#00'+i%10+10+'';
}
};
 
 
for (i = 0; i < scrl; i++) {
divs += '<div style="position:absolute; width:50px; height:10px; ' + 'color:#FFC; top:0px; left: ' + i*20+20 + 'px; font-family:courier;">'+scrArr[i]+'</div>';
}
 
//setFont();
 
$drawTarget.append(divs);
$bars = $drawTarget.children();
 
setInterval(function() {
drawGraph(x*32, 32 - (sinTable[(x * 16) & 4095] * 16), 50 - (sinTable[(x * 32) & 4095] * 20), (-x%10));
x++;
if (x%10==0){
scrArr[scrl-1] = scrArr[0];
for(var i = 1; i<scrl; i++)
{
scrArr[i-1]=scrArr[i];
}
}
}, 18);
})();
 
});
</script>
</head>
 
<body>
<p>here we go!.</p>
 
<div id="draw-target">
</div>
</body>
 
</html>

@crazymax · 27.06.2012, 22:02

Интересно получилось, только подтормаживает чуток :)

@vrodnenok · 27.06.2012, 23:46 **[ТС]**

да это я вчера пива лишнего хлебнул с друзьями. утром хотел удалить тему - но уже поздно было.

это не "получилось". я таких всяких эффектов с текстами много писал в школьные (80-е) годы на ZX-Spectrum. Я ведь учился на программиста и даже диплом есть университетский, но девелопером так и не стал. последнее время судоходная компания, где я оперировал флотом распалась и я остался без работы - вот и начал вспоминать давно забытые навыки.

Новые блоги и статьи Все статьи Все блоги /
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .

@crazymax 3 / 3 / 0 Регистрация: 17.06.2012 Сообщений: 26
	27.06.2012, 22:02
	Интересно получилось, только подтормаживает чуток :) 1

@vrodnenok 16 / 16 / 5 Регистрация: 17.05.2012 Сообщений: 124
	27.06.2012, 23:46 [ТС]
	да это я вчера пива лишнего хлебнул с друзьями. утром хотел удалить тему - но уже поздно было. это не "получилось". я таких всяких эффектов с текстами много писал в школьные (80-е) годы на ZX-Spectrum. Я ведь учился на программиста и даже диплом есть университетский, но девелопером так и не стал. последнее время судоходная компания, где я оперировал флотом распалась и я остался без работы - вот и начал вспоминать давно забытые навыки. 0