Обмен готовыми решениями - JavaScript - Страница 4

@andyj · 20.12.2017, 07:13

div-кнопка с бортиками с управляемым углом освещения. ("проба пера")

HTML5
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
<!doctype html><html><head><title>Angle Light</title><meta charset='utf-8' />
<style type="text/css">
.button1{
    padding: 13px; margin: 13px;
    color:#000000;
    background: #eeeeee;
    border: 14px solid #888888;
}
</style>
</head>
<body>
 
<div class="button1" id="button1">text1</div>
<div class="button1" id="button2">text2</div>
<div class="button1" id="button3">text3</div>
    
<script>
    function angleColor(btn, angle){
        if(angle==null) angle=30;
        angle = angle*Math.PI/180;
        var t=(150+50*Math.sin(angle)).toFixed(0);
        var l=(150+50*Math.cos(angle)).toFixed(0);
        var r=(150-50*Math.cos(angle)).toFixed(0);
        var b=(150-50*Math.sin(angle)).toFixed(0);
        btn.style.borderTopColor = 'rgb('+t+', '+t+', '+t+')';
        btn.style.borderLeftColor = 'rgb('+l+', '+l+', '+l+')';
        btn.style.borderRightColor = 'rgb('+r+', '+r+', '+r+')';
        btn.style.borderBottomColor = 'rgb('+b+', '+b+', '+b+')';
    }
 
    var angle=0;
    function onTimer(){
        angleColor(document.getElementById("button1"), angle);
        angleColor(document.getElementById("button2"), angle);
        angleColor(document.getElementById("button3"), angle);
        angle=(angle+2)%360;
    }
    onTimer()
    setInterval(onTimer, 30);
</script>
 
</body></html>

@8Observer8 · 11.01.2018, 00:38

Предлагаю делиться проектами/примерами на Three.js и Babylon.js в этой теме: Проекты на Three.js и Babylon.js

@Eva Rosalene · 19.03.2018, 21:14

Хак transition для width/height: auto.
На backquote вместо нормальных кавычек внимания не обращайте, клавиатура приказала долго жить.

Перед изменением контента использовать .lockBounds, после - .fitContent(duration).
Настоятельная рекомендация вместо вызова конструктора использовать AutoBoundsTransition.for(element), либо упрощённую обёртку AutoBoundsWrapper(element, duration) с методом .resize(callback), передавая в callback функцию, которая и производит изменение размеров элемента.

Совместимость: ES6+.
Версия для ES5 после транспайла бабелем - под спойлером, требует babel-polyfill.

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
class AutoBoundsTransition {
  static for(node) {
    if (!this._context) this._context = new WeakMap();
    if (!this._context.has(node)) this._context.set(node, new this(node));
    
    return this._context.get(node);
  }
  
  pRequestAnimationFrame() {
    return new Promise(resolve => requestAnimationFrame(resolve));
  }
  
  constructor(node) {
    this.node = node;
  }
  
  lockBounds() {
    this.lockedWidth = this.node.getBoundingClientRect().width;
    this.lockedHeight = this.node.getBoundingClientRect().height;
    
    this.oldHeight = this.node.style.height;
    this.oldWidth = this.node.style.width;
    
    this.node.style.width = this.lockedWidth + `px`;
    this.node.style.height = this.lockedHeight + `px`;
  }
  
  waitTransitionFinish() {
    let resolve = null;
    let promise = new Promise(res => resolve = res);
    
    this.node.addEventListener(`transitionend`, function listener(event) {
      event.target.removeEventListener(`transitionend`, listener, true);
      resolve();
    }, true);
    return promise;
  }
  
  async fitContent(duration) {
    let oldTransition = this.node.style.transition;
    this.node.style.height = this.oldHeight;
    this.node.style.width = this.oldWidth;
    
    await this.pRequestAnimationFrame();
    let newWidth = this.node.getBoundingClientRect().width;
    let newHeight = this.node.getBoundingClientRect().height;
    
    this.node.style.width = this.lockedWidth + `px`;
    this.node.style.height = this.lockedHeight + `px`;
    
    await this.pRequestAnimationFrame();
    this.node.style.transition = `height ${duration}ms, width ${duration}ms`;
    this.node.style.height = newHeight + `px`;
    this.node.style.width = newWidth + `px`;
    
    await this.waitTransitionFinish();
    this.node.style.transition = null;
    this.node.style.height = this.oldHeight;
    this.node.style.width = this.oldWidth;
  }
}
 
class AutoBoundsWrapper {
  constructor(node, duration=500) {
    this.autoBoundsTransition = AutoBoundsTransition.for(node);
    this.duration = duration;
  }
  
  async resize(resizer) {
    this.autoBoundsTransition.lockBounds();
    resizer();
    await this.autoBoundsTransition.fitContent(this.duration);
  }
}

Демо: https://jsfiddle.net/bnhqcyz2/16/

ES5-совестимый код (Babel)

Внимание! Требуются полифиллы: https://babeljs.io/docs/usage/polyfill

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
"use strict";
 
function _asyncToGenerator(fn) {
  return function() {
    var gen = fn.apply(this, arguments);
    return new Promise(function(resolve, reject) {
      function step(key, arg) {
        try {
          var info = gen[key](arg);
          var value = info.value;
        } catch (error) {
          reject(error);
          return;
        }
        if (info.done) {
          resolve(value);
        } else {
          return Promise.resolve(value).then(
            function(value) {
              step("next", value);
            },
            function(err) {
              step("throw", err);
            }
          );
        }
      }
      return step("next");
    });
  };
}
 
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
 
var AutoBoundsTransition = (function() {
  AutoBoundsTransition.for = function _for(node) {
    if (!this._context) this._context = new WeakMap();
    if (!this._context.has(node)) this._context.set(node, new this(node));
 
    return this._context.get(node);
  };
 
  AutoBoundsTransition.prototype.pRequestAnimationFrame = function pRequestAnimationFrame() {
    return new Promise(function(resolve) {
      return requestAnimationFrame(resolve);
    });
  };
 
  function AutoBoundsTransition(node) {
    _classCallCheck(this, AutoBoundsTransition);
 
    this.node = node;
  }
 
  AutoBoundsTransition.prototype.lockBounds = function lockBounds() {
    this.lockedWidth = this.node.getBoundingClientRect().width;
    this.lockedHeight = this.node.getBoundingClientRect().height;
 
    this.oldHeight = this.node.style.height;
    this.oldWidth = this.node.style.width;
 
    this.node.style.width = this.lockedWidth + "px";
    this.node.style.height = this.lockedHeight + "px";
  };
 
  AutoBoundsTransition.prototype.waitTransitionFinish = function waitTransitionFinish() {
    var resolve = null;
    var promise = new Promise(function(res) {
      return (resolve = res);
    });
 
    this.node.addEventListener(
      "transitionend",
      function listener(event) {
        event.target.removeEventListener("transitionend", listener, true);
        resolve();
      },
      true
    );
    return promise;
  };
 
  AutoBoundsTransition.prototype.fitContent = (function() {
    var _ref = _asyncToGenerator(
      /*#__PURE__*/ regeneratorRuntime.mark(function _callee(duration) {
        var oldTransition, newWidth, newHeight;
        return regeneratorRuntime.wrap(
          function _callee$(_context) {
            while (1) {
              switch ((_context.prev = _context.next)) {
                case 0:
                  oldTransition = this.node.style.transition;
 
                  this.node.style.height = this.oldHeight;
                  this.node.style.width = this.oldWidth;
 
                  _context.next = 5;
                  return this.pRequestAnimationFrame();
 
                case 5:
                  newWidth = this.node.getBoundingClientRect().width;
                  newHeight = this.node.getBoundingClientRect().height;
 
                  this.node.style.width = this.lockedWidth + "px";
                  this.node.style.height = this.lockedHeight + "px";
 
                  _context.next = 11;
                  return this.pRequestAnimationFrame();
 
                case 11:
                  this.node.style.transition =
                    "height " + duration + "ms, width " + duration + "ms";
                  this.node.style.height = newHeight + "px";
                  this.node.style.width = newWidth + "px";
 
                  _context.next = 16;
                  return this.waitTransitionFinish();
 
                case 16:
                  this.node.style.transition = null;
                  this.node.style.height = this.oldHeight;
                  this.node.style.width = this.oldWidth;
 
                case 19:
                case "end":
                  return _context.stop();
              }
            }
          },
          _callee,
          this
        );
      })
    );
 
    function fitContent(_x) {
      return _ref.apply(this, arguments);
    }
 
    return fitContent;
  })();
 
  return AutoBoundsTransition;
})();
 
var AutoBoundsWrapper = (function() {
  function AutoBoundsWrapper(node) {
    var duration =
      arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
 
    _classCallCheck(this, AutoBoundsWrapper);
 
    this.autoBoundsTransition = AutoBoundsTransition.for(node);
    this.duration = duration;
  }
 
  AutoBoundsWrapper.prototype.resize = (function() {
    var _ref2 = _asyncToGenerator(
      /*#__PURE__*/ regeneratorRuntime.mark(function _callee2(resizer) {
        return regeneratorRuntime.wrap(
          function _callee2$(_context2) {
            while (1) {
              switch ((_context2.prev = _context2.next)) {
                case 0:
                  this.autoBoundsTransition.lockBounds();
                  resizer();
                  _context2.next = 4;
                  return this.autoBoundsTransition.fitContent(this.duration);
 
                case 4:
                case "end":
                  return _context2.stop();
              }
            }
          },
          _callee2,
          this
        );
      })
    );
 
    function resize(_x3) {
      return _ref2.apply(this, arguments);
    }
 
    return resize;
  })();
 
  return AutoBoundsWrapper;
})();

@NX9000 · 26.08.2018, 21:53

Библиотека для работы с JSON данными включающими в себя логические ветвления.

https://www.npmjs.com/package/jsoncode

@Kraken73 · 26.10.2018, 09:07

написал плагин для выделения последней строки в тексте, т.к. в инете кривоватый был
принимаются идеи по улучшению кода\плагина
https://github.com/Kovich73/lastLine

@Опан · 27.11.2018, 15:30

Онлайн радиостанция без специального сервера и передающего ПО

Хочу предложить онлайн радиостанцию, организованную в обход традиционного подхода к созданию радио онлайн - без традиционного аудиострима, специальной серверной платформы, вещающих программ и многого другого.
В варианте, который я хочу предложить, достаточно обычного сайта на обычном сервере, даже без PHP, а радиовещание в автоматическом режиме отвечает элемент аудио. Может это так же можно назвать имитацией вещания, но результат имеет такой же эффект - на одновременно открытых страницах даже на разных компьютерах в одно и то же время звучит одно и тоже, как при прослушивании радио. Но любом случае реализазии онлайн радио звук всегда берётся из файлов, которые где-то "лежат". Кроме этого в этом примере выводится история раннее прослушанного в недалёком времени. Алгоритм автосоставления плейлиста таков: в течении одного цикла плейлиста композиции воспроизводятся в случайном порядке, но не повторяются.
Перед первым запуском кода нужно будет сделать кое-какую подготовку - прежде всего желательно загрузить все аудиофайлы на сервер. (они могут быть мультимедийными или содержащими рекламу) Так, как тут всё обходится без PHP и библиотек, в сроках с 68 по 70 нужно будет прописать соответственно пути к файлам, названия треков и их длительности в секундах, которые должны иметь точность более, чем в секунду, чем точнее, тем лучше. Этот пример рассчитан на 10 треков, но количество можно изменить.
Кроме этого нужно будет посчитать суммарную длительность треков в плейлисте и записать её в переводе на милисекунды в 75 строке. А так же посчитать, сколько раз плейлист успел бы воспроизвестись с 1 января 1970 г., и записать это число в 73 строке.

PHP/HTML
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<html>
<head>
    <title>Радио</title>
    <style>
    body{
        background: #ccc;
        font-family: arial;
    }
    button{
        width: 150px;
        border-radius: 7px;
        background: #033;
        color: white;
    }
    button:hover{
        background: #066;
        color: gold;
        cursor: pointer;
    }
    hr{
        width: 80%;
    }
    #myhistory{
        width: 50%;
        background: black;
        color: white;
        text-align: left;
        padding: 10px;
    }
    .mytime{
        background: black;
        color: #ccc;
    }
    .now_live{
        background: black;
        color: gold;
        width: 100%;
    }
    #mes1{
        background: #444;
        padding: 5px;
        width: 98%;
        display: block;
        border-radius: 5px;
    }
    #mes2{
        background: #444;
        padding: 5px;
        width: 98%;
        display: none;
        border-radius: 5px;
    }
    </style>
</head>
<body><center><h3>Радио</h3>
<button id=myplay onclick="listen()">Слушать</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="turn_off()">Выключить</button><hr>
<div id=myhistory>
    <span id=mes1> Сейчас в эфире: </span><br><span id=my_time class=mytime> время </span><span id=nowlive class=now_live> тут будет то,что сейчас </span><br><br>
    <span id=mes2> Раньше звучали: <br></span><br>
    <table id=mytable border=0 cellspacing=0></table>
</div>
</center></body>
<script>
var audio = new Audio();
    audioCat = "mp3/", // Путь к папке, где лежат МП3-файлы, если они в отдельной папке
//  audioCat = ""; // В противном случае присваиваем пустую строку
    mp3 = [
        ["track1.mp3", "track2.mp3", "track3.mp3", "track4.mp3", "track5.mp3", "track6.mp3", "track7.mp3", "track8.mp3", "track9.mp3", "track10.mp3"], // Пути к файлам
        ["Исполнитель1 - Трек1", "Исполнитель2 - Трек2", "Исполнитель3 - Трек3", "Исполнитель4 - Трек4", "Исполнитель5 - Трек5", "Исполнитель6 - Трек6", "Исполнитель7 - Трек7", "Исполнитель8 - Трек8", "Исполнитель9 - Трек9", "Исполнитель10 - Трек10"], // Названия
        [376.3232, 338.367275, 187.87585, 187.64075, 221.991775, 529.6244, 133.5047, 223.8597, 265.8839, 270.086] // Длительности треков
    ],
    numTr = mp3[0].length, // Количество треков в плейлисте
    a = 399300, // Количество раз воспроизведения плейлиста с момента 1 января 1970 г. на момент публикации скрипта на сайте - рассчитать самостоятельно и прописать один раз и на постоянно в момент публикации скрипта на сайте
    hst = [[], []], // История раннее прослушанного
    totalDuration = 3859627, // Сумарная длительность в милисекундах всех треков в плейлисте - рассчитать самостоятельно
    mymax = 7; // Максимальное количество треков в истории раннее прослушанного
function getTrack(){ // Получение данных о текущем воспроизводящемся треке, его временной позиции воспроизведения и времени начала воспроизведения
    randArray = []; // Случайные номера треков
    var tek = new Date().getTime();
    var numCycles = Math.floor(tek / totalDuration); // Количество раз воспроизведения плейлиста с момента 1 января 1970 г.
    var ind = 0;
    for(i = 1; i < numTr + 1; i ++){
        for(j = 0; j < numCycles - a; j ++){
            ind ++;
            if(ind == numTr)ind = 0;
            while(randArray[ind]){
                ind ++;
                if(ind == numTr)ind = 0;
            }
        }
        randArray[ind] = i;
    }
    var newCycle = numCycles * totalDuration; // Время начала нового цикла воспроизведения плейлиста
    var mytime = (tek - newCycle)/1000; // Временная позиция воспроизведения всего плейлиста
    var s = 0;
    turn = 0;
    while(s < mytime){
        s += mp3[2][randArray[turn] - 1];
        turn ++;
    }
    turn --;
    index = randArray[turn] - 1; // Индекс (номер) текущего воспроизводимого трека
    var s1 = s - mp3[2][index];
    hour_min = hourmin(newCycle + s1 * 1000);
    curTime = mytime - s1;
}
function listen(){ // Слушаем
    getTrack();
    my_time.innerHTML = "&nbsp;" + hour_min + "&nbsp;&nbsp;&nbsp;";
    nowlive.innerHTML = mp3[1][index];
    audio.src = audioCat + mp3[0][index];
    audio.currentTime = curTime;
    audio.volume = 0.3;
    audio.play();
}
function turn_off(){ // Выключим
    myplay.disabled = true;
    var myInterval = setInterval(function(){
        audio.volume -= 0.03;
        if(audio.volume <= 0.02){
            clearInterval(myInterval);
            audio.pause();
            myplay.disabled = false;
        }
    }, 100);
}
audio.onended = function(){ // Переход на следующий трек
    mes2.style.display = "block";
    if(hst[0].length >= mymax){
        hst[0].shift();
        hst[1].shift();
    }
    hst[0].push(hour_min);
    hst[1].push(index);
    mytable.innerHTML = "";
    for(j = 0; j < hst[0].length; j ++){
        var mytr = document.createElement("tr");
            var mytd = document.createElement("td");
                mytd.className = "mytime";
                mytd.innerHTML = "&nbsp;" + hst[0][hst[0].length - 1 - j] + "&nbsp;&nbsp;&nbsp;";
            mytr.appendChild(mytd);
            var mytd = document.createElement("td");
                mytd.className = "now_live";
                mytd.innerHTML = mp3[1][hst[1][hst[0].length-1-j]];
            mytr.appendChild(mytd);
        mytable.appendChild(mytr);
    }
    getTrack();
    audio.src = audioCat + mp3[0][index];
    audio.play();
    my_time.innerHTML = "&nbsp;" + hourmin() + "&nbsp;&nbsp;&nbsp;";
    nowlive.innerHTML = mp3[1][index];
}
function hourmin(e){
    var newDate = new Date();
    if(e)newDate.setTime(e);
    var ndArray = newDate.toLocaleTimeString().split(":");
    return ndArray[0] + ":" + ndArray[1];
}
getTrack();
my_time.innerHTML = "&nbsp;" + hour_min + "&nbsp;&nbsp;&nbsp;";
nowlive.innerHTML = mp3[1][index];
</script>
</html>

@Опан · 20.03.2020, 18:08

Имитатор АМ-радиоприёмника на базе онлайн-радиопотоков

Хочу предложить имитатор АМ-радиоприёмника с использование обычных аудиостримов. Настройка на станции происходит плавно с помощью <input type=range> и стрелок вправо и влево. При этом имитируются некоторые звуковые эффекты, привычные для АМ-приёмников - помехи, плавные перепады частотной характеристики вещания в зависимости от точности настройки на станцию.
Этот пример рассчитан на 20 станций, но их может быть любое количество. От этого будет зависить только шаг между станциями, обнаруживаемыми во время настройки.

PHP/HTML
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
<html>
<head>
    <title>имитатор АМ-радиоприёмника</title>
</head>
<body bgcolor=#ccc><center>
<h3>Имитатор АМ-радиоприёмника</h3>
<input id=myrange type=range value=0 max=1000 style="background: red; width: 500px" /><br /><br />
<button onclick="startRadio()"> включить </button>
<button onclick="stopRadio()"> выключить </button>
</body>
<script>
var selectivity = 1.8, // избирательность радиоприёмника
rm = myrange.max,
noise = 3, // после которой по счёту станции имитируется приём помехи
filters = ["highpass", "bandpass"], st,
stations = [
    "http://radiostream1", // пропишите
    "http://radiostream2", // URL-ы
    "http://radiostream3", // всех
        //  ...
    "http://radiostream20" // радиопотоков
];
var m = 0;
for(i = 0; i < stations.length; i ++){
    var audio = new Audio();
    audio.src = stations[i];
    audio.id = "a" + i;
    audio.volume = 0;
    audio.setAttribute("crossorigin", "anonymous");
    audio.onpaused = function(){audio.play()};
    document.body.appendChild(audio);
}
var all = document.getElementsByTagName("audio"),
mystep = rm  / all.length;
function startRadio(){
    myrange.focus();
    var context = new AudioContext();
    var filter = context.createBiquadFilter();
    filter.frequency.value = 1000;
    var gainNode = context.createGain();
    gainNode.gain.setValueAtTime(0, context.currentTime);
    oscillator = context.createOscillator();
    oscillator.frequency.value = 500;
    oscillator.connect(gainNode);
    gainNode.connect(context.destination);
    oscillator.start(0);
    for(i = 0; i < all.length; i ++){
        all["a" + i].play();
        var source = context.createMediaElementSource(document.getElementById("a" + i));
        source.connect(filter);
        filter.connect(context.destination);
    }
    setInterval(function(){
        st = 0;
        for(i = 0; i < all.length; i ++){
            if(i != noise){
                document.getElementById("a" + st).volume = 1 - Math.min(Math.abs(myrange.value - i * mystep - mystep / 2) / (mystep / selectivity), 1);
                st ++;
            }
        }
        filter.frequency.value = Math.min(Math.abs(myrange.value - mystep * Math.floor(myrange.value / mystep) - mystep / 2) * selectivity / 2, mystep / 2) * 300 + 300;
        var noiseVolume = 1 - Math.min(Math.abs(myrange.value - noise * mystep - mystep / 2) / (mystep / selectivity * 1.2), 1);
        gainNode.gain.setValueAtTime(noiseVolume, context.currentTime);
        var filterIndex = Math.floor(myrange.value / mystep) & 1,
        indexFilter = myrange.value / mystep > noise ? filterIndex : 1 - filterIndex;
        filter.type = filters[indexFilter];
    }, 100);
    setInterval(function(){
        oscillator.detune.setValueAtTime(Math.sin(m * 5) * 500, context.currentTime);
        m ++;
    }, 30);
}
document.onkeydown = function(e){myrange.focus()};
function stopRadio(){for(i = 0; i < all.length; i ++) all["a" + i].pause(); oscillator.stop()};
</script>
</center></body>
</html>

К сожалению, не все адреса радиопотоков поддаются обработке с помощью WebAudio Api, поэтому остаётся искать подходящие.

@Опан · 11.03.2022, 12:13

Трёхмерная анимированная заставка на canvas

Хочу предложить простую 3д-заставку из случайных линий разного цвета, соединённых друг с другом.

PHP/HTML
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
<canvas id=canvas width=400 height=400></canvas>
<script>
let linecount = 64; // количество линий
document.bgColor = "black";
var ctx = document.getElementById("canvas").getContext("2d");
var mas = [], cv = canvas.width, cw = canvas.width / 2;
for(i = 0; i <= linecount; i ++){
    mas[i] = [];
    mas[i][0] = Math.random() * cv - cw;
    mas[i][1] = Math.random() * cv - cw;
    mas[i][2] = Math.random() * cv - cw;
    var r = Math.floor(Math.random() * 256),
    g = Math.floor(Math.random() * 256),
    b = Math.floor(Math.random() * 256);
    mas[i][3] = "rgb(" + r + "," + g + "," + b + ")";
}
var t = 0;
setInterval(function(){
    ctx.clearRect(0, 0, 400, 400);
    for(i = 1; i < linecount; i ++){
        ctx.beginPath();
        xy(0);
        ctx.moveTo(cw + x, cw + y);
        xy(1);
        ctx.lineTo(cw + x, cw + y);
        ctx.strokeStyle = mas[i][3];
        ctx.stroke();
    }
    t += 0.01;
}, 20000);
function xy(a){
    x = mas[i + a][0] * Math.sin(t) + mas[i + a][2] * Math.cos(t);
    y = mas[i + a][1] * Math.cos(t) + mas[i + a][2] * Math.sin(t);
}
</script>

@mr_dramm · 15.03.2023, 12:26

Плавная прокрутка всегда пригодится в хозяйстве на любом сайте, комментируем не стесняемся отвечу всем!

@diadiavova · 01.12.2024, 06:14

Часы "Ностальжи на Эс Ви Джи"

PHP/HTML
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
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="218" height="218" viewBox="0 0 218 218" version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg"
  xmlns:svg="http://www.w3.org/2000/svg">
  <defs id="defs1" />
  <g id="layer1">
    <rect style="opacity:0.994;fill:#0000ff;fill-opacity:1;stroke:none;paint-order:stroke fill markers" id="rect231"
      width="930" height="1230" x="-367" y="-615" transform="matrix(0.227,0,0,0.178,83.6,109)" />
    <path id="path131" class="clockface"
      style="fill: #ffffff; opacity: 0.994; stroke-miterlimit: 29.4; paint-order: stroke fill markers"
      d="M 103.9 3.6 C 103.9 3.8 103.9 4.1 103.4 4.4 L 102 5.8 C 101.5 6.1 101.2 6.4 100.7 6.6 C 100.7 6.6 100.4 6.6 100.4 6.8 L 100.4 7.1 L 100.4 7.3 C 100.4 7.5 100.7 7.6 100.7 7.6 C 101.2 7.6 101.5 7.5 102 7.3 L 102 15.6 C 102 15.8 102 16 101.5 16 C 101.5 16.1 101.2 16.2 101 16.2 L 101 16.7 C 101 16.9 101.2 17.1 101.2 17.1 C 101.2 17.2 101.5 17.2 101.5 17.2 L 105.2 17.2 C 105.5 17.2 105.5 17.1 105.5 17 L 105.5 16.3 C 105.5 16.2 105.5 16.1 105.2 16 C 105.2 16 105 15.8 105 15.7 L 105 3.6 L 104.2 3.6 Z M 110.6 3.6 C 109.5 3.6 108.7 4 108.2 4.7 C 107.6 5.2 107.1 5.9 107.1 6.8 C 107.1 7.3 107.4 7.7 107.4 7.9 C 107.6 8.2 107.9 8.4 108.2 8.4 C 108.7 8.4 109 8.3 109.2 8 C 109.5 7.7 109.5 7.3 109.5 6.8 L 109.5 6 L 109.5 5.5 C 109.5 5.3 109.8 5.1 109.8 5 C 109.8 4.8 110 4.7 110.3 4.7 C 110.8 4.7 111.1 4.8 111.1 5.2 C 111.4 5.6 111.4 6.2 111.4 7.1 C 111.4 8.1 111.4 9 110.8 9.7 C 110.8 10.4 110.3 11.3 109.2 12.3 C 108.4 13.4 107.9 14 107.6 14.2 C 107.1 14.6 106.8 15 106.8 15.2 L 106.8 17.2 L 113.5 17.2 C 113.7 17.2 114 17.2 114 17.1 L 114 16.4 C 114.3 15.9 114.3 15.4 114.3 14.8 C 114.5 14.2 114.5 13.8 114.5 13.7 L 114.5 13.5 C 114.5 13.4 114.5 13.3 114 13.3 C 114 13.3 113.7 13.3 113.7 13.4 C 113.7 13.4 113.5 13.5 113.5 13.7 C 113.5 14.1 113.5 14.3 113.2 14.5 C 113.2 14.6 113 14.7 112.7 14.7 L 108.7 14.7 C 109.2 14.1 110 13.4 111.1 12.5 C 112.2 11.8 112.7 11.2 113 10.8 C 113.5 10.4 114 9.8 114 9.3 C 114.5 8.7 114.5 8.1 114.5 7.6 C 114.5 6.4 114.3 5.4 113.5 4.7 C 113 4 111.9 3.6 110.6 3.6 Z M 152.3 15.5 C 152.3 15.7 152.1 16 151.8 16.3 L 150.5 17.6 C 149.9 18 149.4 18.3 149.1 18.4 C 148.9 18.4 148.9 18.5 148.9 18.7 L 148.9 19 L 148.9 19.2 C 148.9 19.4 148.9 19.5 149.1 19.5 C 149.4 19.5 149.9 19.4 150.5 19.2 L 150.5 27.5 C 150.5 27.7 150.2 27.9 149.9 27.9 C 149.7 28 149.7 28.1 149.4 28.1 L 149.4 28.6 C 149.4 28.8 149.4 28.9 149.7 29 C 149.7 29.1 149.7 29.1 149.9 29.1 L 153.6 29.1 C 153.9 29.1 153.9 29 153.9 28.9 L 153.9 28.2 C 153.9 28.1 153.9 28 153.6 27.9 C 153.4 27.9 153.4 27.8 153.4 27.6 L 153.4 15.5 L 152.6 15.5 Z M 53.4 16.8 C 53.4 17 53.4 17.3 52.8 17.6 L 51.5 18.9 C 51 19.3 50.7 19.6 50.2 19.7 C 50.2 19.7 49.9 19.8 49.9 20 L 49.9 20.3 L 49.9 20.5 C 49.9 20.7 50.2 20.8 50.2 20.8 C 50.7 20.8 51 20.7 51.5 20.5 L 51.5 28.8 C 51.5 29 51.5 29.2 51 29.2 C 51 29.3 50.7 29.3 50.4 29.4 L 50.4 29.9 C 50.4 30.1 50.7 30.3 50.7 30.3 C 50.7 30.4 51 30.4 51 30.4 L 54.7 30.4 C 55 30.4 55 30.3 55 30.2 L 55 29.5 C 55 29.4 55 29.3 54.7 29.2 C 54.7 29.2 54.4 29.1 54.4 28.9 L 54.4 16.8 L 53.6 16.8 Z M 59.8 16.8 C 59.8 17 59.8 17.3 59.2 17.6 L 57.9 18.9 C 57.4 19.3 57.1 19.6 56.6 19.7 C 56.6 19.7 56.3 19.8 56.3 20 L 56.3 20.3 L 56.3 20.5 C 56.3 20.7 56.6 20.8 56.6 20.8 C 57.1 20.8 57.4 20.7 57.9 20.5 L 57.9 28.8 C 57.9 29 57.9 29.2 57.4 29.2 C 57.4 29.3 57.1 29.3 56.8 29.4 L 56.8 29.9 C 56.8 30.1 57.1 30.3 57.1 30.3 C 57.1 30.4 57.4 30.4 57.4 30.4 L 61.1 30.4 C 61.3 30.4 61.3 30.3 61.3 30.2 L 61.3 29.5 C 61.3 29.4 61.3 29.3 61.1 29.2 C 61.1 29.2 60.8 29.1 60.8 28.9 L 60.8 16.8 L 60 16.8 Z M 104.4 21.1 C 56 21.6 16.9 61.1 17.5 109.5 C 17.7 158 57.1 197.1 105.5 196.8 C 153.9 196.8 193.3 157.4 193 109 L 193 108 C 192.8 59.5 152.8 20.6 104.4 21.1 Z M 103.9 25.1 L 103.6 43.3 L 105.2 43.3 L 105.5 25.1 C 107.9 25.1 110.3 25.2 112.7 25.4 L 111.9 32.7 L 113.5 32.9 L 114.3 25.6 C 116.9 25.9 119.3 26.2 121.7 26.7 L 119.9 34.1 L 121.5 34.4 L 123.1 27 C 125.7 27.6 128.1 28.2 130.2 28.9 L 127.8 36.1 L 129.2 36.6 L 131.8 29.4 C 134.2 30.2 136.4 31 138.5 32 L 135.3 38.8 L 136.6 39.5 L 139.8 32.6 C 141.9 33.5 143.8 34.5 145.9 35.6 L 136.4 51.6 L 137.7 52.4 L 147.3 36.4 C 149.4 37.6 151.5 38.9 153.4 40.3 L 148.9 46.5 L 150.2 47.3 L 154.7 41.3 C 156.8 42.7 158.7 44.1 160.6 45.7 L 155 51.6 L 156.3 52.6 L 161.6 47 C 163.5 48.6 165.4 50.2 166.9 52.1 L 160.8 57.4 L 161.9 58.5 L 168 53.4 C 169.6 55.3 171.2 57.1 172.5 59 L 166.2 63.5 L 166.9 64.6 L 173.3 60.1 C 174.7 61.9 176 63.8 177.1 65.9 L 161.1 75 L 161.9 76.3 L 177.9 67.3 C 179.2 69.4 180.2 71.5 181.3 73.6 L 174.4 76.8 L 174.9 78.2 L 182.1 75.2 C 182.9 77.4 183.7 79.8 184.5 81.9 L 177.1 84.3 L 177.6 85.9 L 185 83.5 C 185.8 85.9 186.6 88.3 187.2 90.7 L 179.4 92.3 L 179.4 93.6 L 187.4 92.3 C 188 94.7 188.2 97 188.5 99.4 L 180.8 100 L 180.8 101.6 L 188.5 100.8 C 188.8 103.2 189 105.6 189 108 L 170.1 107.7 L 170.1 109.3 L 189.3 109.5 C 189.3 111.9 189 114.6 189 117 L 180.8 115.9 L 180.5 117.5 L 188.8 118.6 C 188.5 121 188 123.4 187.7 125.8 L 179.4 123.9 L 179.2 125.5 L 187.2 127.4 C 186.6 129.8 186.1 132.2 185.3 134.6 L 177.3 131.9 L 176.8 133.2 L 184.8 136.1 C 184 138.5 183.2 140.7 182.1 142.8 L 174.7 139.3 L 173.9 140.7 L 181.6 144.1 C 180.5 146.3 179.4 148.4 178.4 150.2 L 161.6 140.1 L 160.8 141.7 L 177.6 151.6 L 173.6 158 L 166.7 152.6 L 165.9 154 L 172.5 159.3 C 171.2 161.2 169.6 163 168 164.9 L 161.6 158.8 L 160.6 160.1 L 166.9 166.2 C 165.1 167.8 163.2 169.7 161.4 171.3 L 155.8 164.9 L 154.7 165.7 L 160.3 172.3 C 158.4 173.9 156.6 175.5 154.4 176.8 L 149.7 169.9 L 148.6 170.7 L 153.4 177.9 C 151.5 179 149.7 180.3 147.5 181.4 L 138 164.6 L 136.6 165.4 L 146.2 182.2 C 144.1 183.5 141.7 184.6 139.6 185.6 L 136.1 177.9 L 134.8 178.4 L 138 186.2 C 135.8 187.2 133.4 188 131 188.8 L 128.6 180.6 L 127 181.1 L 129.4 189.3 C 127 189.9 124.7 190.7 122.3 191.2 L 120.7 183 L 119.3 183 L 120.7 191.5 C 118.3 191.7 115.9 192.3 113.5 192.5 L 113 184.3 L 111.4 184.3 L 112.2 192.5 C 110 192.8 107.9 192.8 105.8 192.8 L 106 173.7 L 104.4 173.7 L 104.2 192.8 C 101.5 192.8 99.1 192.5 96.7 192.3 L 97.8 184.3 L 96.2 184 L 95.1 192.3 C 92.7 192 90.3 191.5 87.9 190.9 L 89.8 183 L 88.2 182.4 L 86.3 190.7 C 83.7 190.1 81.3 189.3 78.9 188.5 L 81.8 180.8 L 80.5 180.3 L 77.6 188.3 C 75.2 187.5 73 186.4 70.9 185.6 L 74.4 178.2 L 73 177.4 L 69.3 184.8 C 67.5 184 65.3 182.7 63.5 181.6 L 73 165.1 L 71.7 164.3 L 61.9 180.8 C 59.8 179.5 57.9 178.2 55.8 176.8 L 60.8 170.2 L 59.5 169.4 L 54.4 175.8 C 52.6 174.2 50.7 172.9 48.8 171 L 54.4 165.1 L 53.4 164.1 L 47.8 169.9 C 45.9 168.3 44.1 166.5 42.5 164.6 L 48.6 159.3 L 47.8 158.2 L 41.4 163.3 C 39.8 161.7 38.5 159.6 36.9 157.7 L 43.5 153.2 L 42.7 152.1 L 36.1 156.6 C 35 154.8 33.7 152.9 32.6 151 L 49.6 141.5 L 48.8 140.1 L 31.8 149.7 C 30.8 147.6 29.7 145.2 28.6 143.1 L 36.3 139.6 L 35.5 138.3 L 27.8 141.5 C 27 139.3 26.2 136.9 25.4 134.6 L 33.4 132.2 L 32.9 130.6 L 24.9 133 C 24.1 130.6 23.6 128.2 23 125.8 L 31.3 124.2 L 31 122.8 L 22.8 124.2 C 22.5 121.8 22 119.4 21.7 117 L 30 116.5 L 29.7 114.9 L 21.7 115.7 C 21.4 113.5 21.4 111.7 21.4 109.5 L 21.4 109.3 L 40.9 109.5 L 40.9 108 L 21.4 107.7 C 21.4 105 21.7 102.6 22 100.2 L 30.2 101.3 L 30.5 99.7 L 22 98.6 C 22.2 96 22.8 93.6 23.3 91.2 L 31.6 93.3 L 31.8 91.7 L 23.6 89.6 C 24.1 87.2 24.9 84.8 25.7 82.4 L 33.7 85.3 L 34.2 84 L 26.2 80.8 C 27 78.7 27.8 76.3 28.9 74.2 L 36.3 77.9 L 37.1 76.6 L 29.4 72.8 C 30.2 71 31.3 69.4 32.4 67.5 L 49.1 77.6 L 49.9 76.3 L 32.9 66.2 C 34.2 64.1 35.5 61.9 37.1 60.1 L 44.1 65.1 L 45.1 64.1 L 38.2 58.7 C 39.5 56.6 41.1 54.8 42.7 52.9 L 49.4 59 L 50.4 57.9 L 43.8 51.8 C 45.7 50 47.5 48.1 49.4 46.5 L 55 53.2 L 56 52.4 L 50.4 45.4 C 52.3 43.8 54.2 42.3 56.3 40.9 L 61.1 48.1 L 62.4 47.3 L 57.4 40 C 59 38.9 60.8 37.8 62.7 36.7 L 72.3 53.7 L 73.6 52.9 L 64 35.9 C 66.1 34.7 68.3 33.6 70.7 32.5 L 74.1 40.5 L 75.4 39.8 L 72 31.9 C 74.4 30.9 76.8 30 78.9 29.3 L 81.6 37.7 L 83.2 37.2 L 80.5 28.8 C 82.9 28 85.3 27.4 87.9 26.9 L 89.5 35.5 L 90.9 35.3 L 89.5 26.6 C 91.9 26.2 94.3 25.8 96.7 25.5 L 97.3 34.1 L 98.9 34 L 98.1 25.4 C 99.9 25.3 102 25.1 103.9 25.1 Z M 188.8 51 C 187.7 51 186.9 51.3 186.4 52.1 C 185.8 52.6 185.3 53.4 185.3 54.2 C 185.3 54.8 185.6 55 185.6 55.3 C 185.8 55.5 186.1 55.8 186.4 55.8 C 186.9 55.8 187.2 55.5 187.4 55.3 C 187.7 55 187.7 54.8 187.7 54.2 L 187.7 53.4 L 187.7 52.9 C 187.7 52.6 188 52.6 188 52.4 C 188 52.1 188.2 52.1 188.5 52.1 C 189 52.1 189.3 52.4 189.3 52.6 C 189.6 52.9 189.6 53.7 189.6 54.5 C 189.6 55.5 189.6 56.3 189 57.1 C 189 57.7 188.5 58.7 187.4 59.8 C 186.6 60.9 186.1 61.4 185.8 61.7 C 185.3 61.9 185 62.5 185 62.7 L 185 64.6 L 191.7 64.6 L 192.2 64.6 L 192.2 63.8 C 192.5 63.3 192.5 62.7 192.5 62.2 C 192.8 61.7 192.8 61.1 192.8 61.1 L 192.8 60.9 C 192.8 60.9 192.8 60.6 192.2 60.6 C 192.2 60.6 192 60.6 192 60.9 C 192 60.9 191.7 60.9 191.7 61.1 C 191.7 61.4 191.7 61.7 191.4 61.9 C 191.4 61.9 191.2 62.2 190.9 62.2 L 186.9 62.2 C 187.4 61.4 188.2 60.9 189.3 59.8 C 190.4 59.3 190.9 58.7 191.2 58.2 C 191.7 57.7 192.2 57.1 192.2 56.6 C 192.8 56.1 192.8 55.5 192.8 55 C 192.8 53.7 192.5 52.9 191.7 52.1 C 191.2 51.3 190.1 51 188.8 51 Z M 15.3 53.2 C 15.3 53.4 15.1 53.7 14.8 54 L 13.5 55.3 C 12.9 55.5 12.4 55.8 12.1 56.1 L 11.9 56.3 L 11.9 56.6 L 11.9 56.9 L 12.1 57.1 C 12.4 57.1 12.9 57.1 13.5 56.9 L 13.5 65.1 C 13.5 65.4 13.2 65.4 12.9 65.7 L 12.4 65.7 L 12.4 66.2 L 12.7 66.7 L 12.9 66.7 L 16.7 66.7 C 16.7 66.7 16.9 66.7 16.9 66.5 L 16.9 65.9 C 16.9 65.7 16.7 65.7 16.7 65.7 L 16.4 65.1 L 16.4 53.2 L 15.6 53.2 Z M 22.2 53.2 C 21.2 53.2 20.1 53.7 19.3 55 C 18.5 56.1 18.3 57.7 18.3 60.1 C 18.3 62.5 18.5 64.1 19.6 65.1 C 20.1 66.2 20.9 66.7 22 66.7 C 23 66.7 24.1 66.2 24.9 65.1 C 25.4 63.8 26 62.2 26 59.8 C 26 58.5 25.7 57.4 25.4 56.3 C 25.2 55.5 24.6 54.8 24.1 54.2 C 23.6 53.4 22.8 53.2 22.2 53.2 Z M 22.2 54.2 C 22.2 54.2 22.5 54.2 22.5 54.5 C 22.5 54.8 22.8 55 22.8 55.3 L 22.8 64.9 C 22.8 65.1 22.5 65.4 22.5 65.7 L 22 65.7 C 21.4 65.7 21.4 65.4 21.4 64.9 L 21.4 55.3 C 21.4 54.5 21.7 54.2 22.2 54.2 Z M 9.2 101.3 C 8.1 101.3 7.3 101.6 6.8 102.4 C 6.3 102.9 6 103.4 5.8 104.2 C 5.5 105 5.2 105.8 5.2 106.6 C 5.2 108.2 5.5 109.3 6 110.1 C 6.5 110.9 7.3 111.1 8.1 111.1 C 8.7 111.1 9.2 110.9 9.7 110.3 L 9.7 110.9 C 9.7 111.7 9.7 112.2 9.5 112.5 C 9.2 113 8.9 113.3 8.4 113.3 C 7.9 113.5 7.3 113.8 6.5 113.8 L 6.3 113.8 L 6.3 114.6 L 6.3 114.9 L 6.8 114.9 C 8.9 114.9 10.3 114.3 11.3 113.3 C 12.4 112.2 12.9 110.3 12.9 107.7 C 12.9 105.3 12.7 103.7 11.9 102.9 C 11.3 101.8 10.3 101.3 9.2 101.3 Z M 201.3 102.1 C 200.2 102.1 199.4 102.4 198.9 102.9 C 198.3 103.4 198.1 104.2 198.1 105 C 198.1 105.6 198.3 105.8 198.3 106.1 C 198.6 106.4 198.9 106.6 199.1 106.6 C 199.7 106.6 199.9 106.6 199.9 106.4 C 200.2 106.1 200.2 105.8 200.2 105.6 L 200.2 104.5 L 200.2 104 L 200.2 103.4 C 200.5 103.4 200.7 103.2 201 103.2 C 201.3 103.2 201.5 103.4 201.5 103.7 C 201.8 104.2 201.8 104.8 201.8 105.8 C 201.8 106.6 201.8 107.2 201.5 107.4 L 201 108 L 199.7 108 C 199.7 108 199.4 108.2 199.4 108.5 L 199.4 108.5 L 199.4 109 L 199.7 109.3 L 199.9 109.3 L 200.7 109.3 C 201.3 109.3 201.5 109.3 201.5 109.5 C 201.8 109.8 201.8 110.1 201.8 110.3 L 201.8 112.5 L 202.1 113 C 202.1 113.5 202.1 114.1 201.8 114.3 C 201.8 114.6 201.5 114.9 201 114.9 C 200.7 114.9 200.5 114.9 200.2 114.6 C 200.2 114.3 199.9 114.3 199.9 114.1 C 199.9 113.8 200.2 113.8 200.2 113.5 L 200.2 112.7 C 200.2 112.5 200.2 112.2 199.9 111.9 C 199.9 111.7 199.7 111.4 199.1 111.4 C 198.9 111.4 198.6 111.7 198.1 111.9 C 198.1 112.2 197.8 112.5 197.8 113 C 197.8 113.8 198.3 114.3 198.9 115.1 C 199.4 115.7 200.2 115.9 201 115.9 C 201.8 115.9 202.6 115.7 203.1 115.4 C 203.9 115.1 204.5 114.6 204.7 114.1 C 205.3 113.5 205.3 112.7 205.3 111.9 C 205.3 110.3 204.5 109 202.3 108.5 L 202.3 108.5 C 203.4 108.2 203.9 108 204.2 107.4 C 204.7 106.9 205 106.4 205 105.6 C 205 104.8 204.7 104 203.9 103.2 C 203.4 102.6 202.6 102.1 201.3 102.1 Z M 9.2 102.4 C 9.7 102.4 9.7 102.6 9.7 103.2 L 9.7 109 L 9.5 109.5 L 8.9 109.8 L 8.7 109.5 C 8.7 109.5 8.4 109.3 8.4 109 L 8.4 103.2 C 8.4 102.6 8.7 102.4 9.2 102.4 Z M 21.2 152.1 C 20.1 152.1 19.3 152.6 18.5 153.2 C 17.7 153.7 17.5 154.5 17.5 155.6 C 17.5 156.9 18 158.2 19.1 159 C 17.7 159.8 17.2 160.9 17.2 162.2 C 17.2 163.3 17.5 164.1 18.3 164.9 C 19.1 165.7 19.9 165.9 20.9 165.9 C 22 165.9 22.8 165.4 23.6 164.9 C 24.4 164.1 24.9 163 24.9 161.7 C 24.9 160.9 24.6 160.4 24.4 159.8 C 24.1 159 23.6 158.5 23 158 C 24.1 157.4 24.6 156.4 24.6 155.3 C 24.6 154.5 24.4 153.7 23.6 153.2 C 23 152.6 22.2 152.1 21.2 152.1 Z M 191.4 153.2 C 190.9 153.2 190.6 153.4 190.6 153.4 L 190.4 153.7 L 185.8 161.2 C 185.3 161.4 185.3 161.7 185.3 161.7 L 185.3 161.9 L 185.3 163 L 185.3 163.3 L 185.8 163.3 L 189 163.3 L 189 165.1 C 189 165.4 188.8 165.7 188.8 165.7 C 188.5 165.7 188.5 165.9 188.5 166.2 L 188.5 166.7 L 188.8 166.7 L 192.2 166.7 L 192.5 166.7 C 192.5 166.7 192.8 166.7 192.8 166.5 L 192.8 166.2 C 192.8 165.9 192.5 165.7 192.5 165.7 C 192 165.4 192 165.1 192 164.9 L 192 163.3 L 192.8 163.3 L 193 163.3 L 193 163 L 193 162.5 L 193 161.9 L 192.8 161.9 L 192 161.9 L 192 153.7 L 192 153.4 C 191.7 153.4 191.4 153.2 191.4 153.2 Z M 21.2 153.2 C 22.2 153.2 22.8 154 22.8 155.3 C 22.8 156.4 22.5 156.9 22 157.4 C 21.2 156.9 20.6 156.4 20.4 155.8 C 20.1 155.6 19.9 155.3 19.9 154.8 C 19.9 154.5 19.9 154.2 20.1 153.7 C 20.4 153.4 20.9 153.2 21.2 153.2 Z M 189 158 L 189 161.9 L 186.4 161.9 Z M 19.9 159.8 L 21.2 160.6 L 22.2 161.7 C 22.5 162.2 22.8 162.5 22.8 163 C 22.8 163.5 22.5 164.1 22.2 164.3 C 22 164.6 21.4 164.6 20.9 164.6 C 20.4 164.6 19.9 164.6 19.6 164.1 C 19.3 163.5 19.3 163 19.3 161.9 L 19.3 160.6 C 19.6 160.1 19.6 159.8 19.9 159.8 Z M 53.4 188.5 L 53.4 189.1 L 53.1 192 C 53.1 192 53.1 192.3 53.4 192.3 C 53.9 192.3 54.2 192 54.2 192 L 54.4 191.7 C 54.4 191.2 54.7 191.2 55 191.2 L 58.4 191.2 L 57.1 193.3 C 56.6 194.7 56 195.7 55.8 197.1 C 55.2 198.1 55.2 199.2 55.2 200 L 55.2 200.5 L 55 200.5 L 54.7 200.8 L 54.7 201.3 L 54.7 201.6 L 55 201.8 L 58.4 201.8 C 58.4 201.8 58.7 201.8 58.7 201.6 C 58.7 201.6 59 201.6 59 201.3 C 59 201.1 58.7 200.8 58.7 200.8 L 58.4 200.3 C 58.2 200.3 58.2 199.7 58.2 198.9 C 58.2 196.8 58.4 195.2 59 193.3 C 59.5 191.7 59.8 190.4 60.3 189.9 C 60.3 189.3 60.5 189.1 60.5 189.1 L 60.5 188.8 L 60.5 188.5 L 60.3 188.5 L 53.9 188.5 Z M 155.8 189.3 L 155.5 189.6 L 155.2 189.6 L 151.3 189.6 L 150.7 196.3 L 150.7 196.5 C 150.7 196.5 150.7 196.8 151 196.8 L 151.3 196.8 C 151.3 196.8 151.5 196.5 151.8 196.5 L 151.8 196.3 C 152.1 195.5 152.6 195.2 153.1 195.2 C 153.4 195.2 153.6 195.2 153.9 195.7 C 153.9 196.3 154.2 197.1 154.2 198.1 L 154.2 199.5 L 154.2 201.1 C 154.2 201.3 153.9 201.6 153.9 201.6 C 153.6 201.8 153.4 201.8 153.1 201.8 C 152.8 201.8 152.6 201.8 152.6 201.6 L 152.3 201.1 L 152.3 200.5 C 152.3 200.3 152.6 200 152.6 199.7 C 152.6 199.5 152.3 199.2 152.1 198.9 C 151.8 198.7 151.5 198.7 151.3 198.7 C 150.7 198.7 150.5 198.7 150.5 198.9 C 150.2 199.2 150.2 199.7 150.2 200 C 150.2 200.8 150.5 201.3 151 202.1 C 151.5 202.6 152.3 202.9 153.4 202.9 C 154.4 202.9 155.2 202.4 156.3 201.6 C 156.8 200.8 157.4 199.7 157.4 198.4 C 157.4 197.1 156.8 196 156.3 195.2 C 155.8 194.4 154.7 193.9 153.6 193.9 C 153.1 193.9 152.6 194.1 152.1 194.4 L 152.1 192 L 156 192 L 156.3 192 L 156.3 191.7 L 156.6 189.9 L 156.6 189.6 L 156.6 189.3 L 156 189.3 Z M 106.6 201.3 C 105.5 201.3 104.4 201.6 103.4 202.1 C 102.6 202.6 101.8 203.4 101.2 204.5 C 100.7 205.6 100.4 206.9 100.4 208.8 C 100.4 210.1 100.7 211.4 101 212.2 C 101.5 213.3 101.8 213.8 102.3 214.3 C 102.8 214.6 103.6 214.9 104.4 214.9 C 105.5 214.9 106.6 214.3 107.1 213.3 C 107.9 212.5 108.2 211.2 108.2 209.6 C 108.2 208 107.9 206.9 107.4 206.1 C 106.8 205.3 106.3 205 105.2 205 C 104.7 205 104.2 205.3 103.6 205.8 C 103.6 204.8 103.9 204.2 103.9 204 C 104.4 203.4 104.7 202.9 105.2 202.9 C 105.8 202.6 106.3 202.6 106.8 202.6 C 107.1 202.6 107.1 202.4 107.1 202.4 L 107.1 201.6 C 107.1 201.3 106.8 201.3 106.6 201.3 Z M 104.4 206.4 L 104.7 206.6 C 105 206.6 105 206.9 105 206.9 L 105 212.5 C 105 213 105 213.6 104.7 213.6 L 104.4 213.8 L 103.9 213.8 C 103.9 213.6 103.6 213.6 103.6 213.3 L 103.6 207.4 C 103.6 206.6 103.9 206.4 104.4 206.4 Z" />
    <path
      style="fill: none; stroke: none; stroke-width: 1.4; stroke-dasharray: none; opacity: 0.994; paint-order: stroke fill markers; stroke-miterlimit: 29.4"
      id="path223" class="centermarker"
      d="M 106.3 108.6 C 106.3 109.5 105.6 110.2 104.7 110.2 C 103.8 110.2 103.1 109.5 103.1 108.6 C 103.1 107.7 103.8 107 104.7 107 C 105.6 107 106.3 107.7 106.3 108.6" />
    <path style="fill: #ffffff" d="M 103.7 64.5 L 100.5 119.1 L 107.4 119.1 L 105.5 64.5 Z" id="path230"
      class="hourarrow" />
    <path d="M 104.2 44.1 L 101.3 118.9 L 106.6 118.9 L 105.5 44.1 Z" id="path225" class="minutearrow"
      style="fill: #ffffff; display: inline; fill-opacity: 1" />
    <path style="fill: #ffffff; display: inline; fill-opacity: 1"
      d="M 103.7 27.4 L 103.7 118.7 L 106.3 118.7 L 105.8 27.4 Z" id="path228" class="secondarrow" />
  </g>
  <script>
    let svg = document.documentElement;
        let [centermarker, hourarrow, minutearrow, secondarrow] = ".centermarker,.hourarrow,.minutearrow,.secondarrow".split(",")
            .map(c => svg.querySelector(c));
        let crect = centermarker.getBBox();
        let cx = crect.x + crect.width / 2;
        let cy = crect.y + crect.height / 2;
        let hourTransform = svg.createSVGTransform();
        let minuteTransform = svg.createSVGTransform();
        let secondTransform = svg.createSVGTransform();
        hourarrow.transform.baseVal.initialize(hourTransform);
        minutearrow.transform.baseVal.initialize(minuteTransform);
        secondarrow.transform.baseVal.initialize(secondTransform);
        let timer = setInterval(function ()
        {
            let date = new Date();
            hourTransform.setRotate(date.getHours() * 30 + date.getMinutes() / 2, cx, cy);
            minuteTransform.setRotate(date.getMinutes() * 6, cx, cy);
            secondTransform.setRotate(date.getSeconds() * 6, cx, cy);
        }, 100);
  </script>
</svg>

@barabar · 01.12.2024, 08:38

diadiavova, Uncaught TypeError: svg.createSVGTransform is not a function

@diadiavova · 01.12.2024, 09:11

barabar, это SVG документ, надо сохранить с расширением .svg

@barabar · 01.12.2024, 09:19

Ну понятно. Запускать в браузере, как я понял. Надо было пояснять. Ок.

@diadiavova · 01.12.2024, 09:20

barabar, если нужно вставить это в HTML, просто первую строчку скрипта нужно поменять на

JavaScript
1
let svg = document.getElementById("svg1");

Просто document.documentElement в SVG-документе - это элемент svg, а в HTML- документе - html. У последнего, разумеется, нет такого метода.

Новые блоги и статьи Все статьи Все блоги /
Свет внутри себя kumehtar 07.06.2026 Пусть это будет здесь lIs4oanZS9Y	Программа для com-порта Uhbif79 05.06.2026 Всем привет, давно хотел изучить Qt, начинал, бросал, потом снова начинал. И сейчас вот смог написать свою первую программу. До этого имел опыт программирования микроконтроллеров, писал прошивки на. . .	Транскрипция 55-минутного видео через Whisper: WhisperDesktop облажался, спас Google Colab[ anaschu 01.06.2026 Понадобилось получить текст из свежезагруженного видео на YouTube. Казалось бы, задача на пять минут. Заняла полтора часа. Делюсь опытом — может кому пригодится последовательность решений. . . .	21 мат мед. Планы на развитие модели здравоСохранения anaschu 01.06.2026 AnyLogic: план развития симуляционной модели рабочего коллектива — динамический абсентеизм, реальные данные, три сценария сравнения Продолжаю серию постов о дискретно-событийной модели рабочего. . .
20. Мат мед. Абсентеизм как отдельный тип простоя anaschu 29.05.2026 Апдейт модели: исправленные баги, абсентеизм и новые механизмы Продолжаю развивать ранее описанную модель рабочего коллектива на AnyLogic. За последние несколько дней был проведён серьёзный. . .	19. здоровье, усталость и психотип работника влияют на производительность предприятия, и наоборот, производительность на здоровье, усталось и психотип anaschu 28.05.2026 Дискретно-событийная модель рабочего коллектива на AnyLogic: здоровье, выгорание, психотипы и микростимуляция Привет, коллеги. Хочу поделиться итогами нескольких недель работы над симуляционной. . .	"Прокси" для последовательного порта Eddy_Em 28.05.2026 Эту штуку написал я достаточно давно. Но сейчас вот понадобилось настроить датчик грозы, но при этом не отключать его от "метеодемона". Соответственно, надо запустить этот "прокси": метеодемон будет. . .	Рефакторинг программы уравнивания. Massaraksh7 26.05.2026 Пример по предыдущей записи в блоге. Но, надо заметить, что, во-первых, там оптимизация не только математики, но и работы с базой данных, и с графами, а во-вторых, это ещё не всё.

@8Observer8 9949 / 2950 / 497 Регистрация: 05.10.2013 Сообщений: 8,030 Записей в блоге: 242
	11.01.2018, 00:38
	Предлагаю делиться проектами/примерами на Three.js и Babylon.js в этой теме: Проекты на Three.js и Babylon.js 0

@NX9000 0 / 0 / 1 Регистрация: 22.06.2015 Сообщений: 9
	26.08.2018, 21:53
	Библиотека для работы с JSON данными включающими в себя логические ветвления. https://www.npmjs.com/package/jsoncode 0

@Kraken73 105 / 93 / 50 Регистрация: 17.09.2015 Сообщений: 612
	26.10.2018, 09:07
	написал плагин для выделения последней строки в тексте, т.к. в инете кривоватый был принимаются идеи по улучшению кода\плагина https://github.com/Kovich73/lastLine 0

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	15.03.2023, 12:26
	Плавная прокрутка всегда пригодится в хозяйстве на любом сайте, комментируем не стесняемся отвечу всем! 0

@barabar Заблокирован
	01.12.2024, 08:38
	diadiavova, Uncaught TypeError: svg.createSVGTransform is not a function 1

@diadiavova 7261 / 2608 / 745 Регистрация: 11.04.2015 Сообщений: 4,155 Записей в блоге: 43
	01.12.2024, 09:11
	barabar, это SVG документ, надо сохранить с расширением `.svg` 1

@barabar Заблокирован
	01.12.2024, 09:19
	Ну понятно. Запускать в браузере, как я понял. Надо было пояснять. Ок. 0