Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.89/273: Рейтинг темы: голосов - 273, средняя оценка - 4.89
andyj
109 / 55 / 10
Регистрация: 16.03.2017
Сообщений: 692
20.12.2017, 07:13 61
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>
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.12.2017, 07:13
Ответы с готовыми решениями:

Обмен между фреймами
ситуация такова есть страница, на ней два фрейма в левом фрейме страница левого сайта с формой...

Как организовать обмен сообщениями
В общем, суть такова. Как лучше всего проверять новые записи в БД? Чат типо ICQ или как в ВК...

обмен файлами без фактической передачи
на хосте лежит искомый файл и рассчёт числа ПИ до миллиардного знака. программа сравнивает...

Обмен данными между двумя сервисами
Здравствуйте. Стоит перед до мной одна задача. В системе amocrm создать виджет. Сам он пишет на JS....

Обмен готовыми решениями
Привет, мир! Предлагаю здесь обмениваться готовыми решениями, исключительно html + css. Итак,...

65
8Observer8
2320 / 1480 / 245
Регистрация: 05.10.2013
Сообщений: 4,625
Записей в блоге: 58
11.01.2018, 00:38 62
Предлагаю делиться проектами/примерами на Three.js и Babylon.js в этой теме: Проекты на Three.js и Babylon.js
0
Eva Rosalene
T for Trans-
4051 / 1590 / 303
Регистрация: 06.01.2013
Сообщений: 4,182
Завершенные тесты: 2
19.03.2018, 21:14 63
Хак 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;
})();
0
NX9000
0 / 0 / 1
Регистрация: 22.06.2015
Сообщений: 9
26.08.2018, 21:53 64
Библиотека для работы с JSON данными включающими в себя логические ветвления.

https://www.npmjs.com/package/jsoncode
0
Kraken73
104 / 92 / 50
Регистрация: 17.09.2015
Сообщений: 594
26.10.2018, 09:07 65
написал плагин для выделения последней строки в тексте, т.к. в инете кривоватый был
принимаются идеи по улучшению кода\плагина
https://github.com/Kovich73/lastLine
0
Опан
Юзер с абсолютным слухом
578 / 389 / 158
Регистрация: 17.12.2010
Сообщений: 1,164
27.11.2018, 15:30 66
Онлайн радиостанция без специального сервера и передающего ПО

Хочу предложить онлайн радиостанцию, организованную в обход традиционного подхода к созданию радио онлайн - без традиционного аудиострима, специальной серверной платформы, вещающих программ и многого другого.
В варианте, который я хочу предложить, достаточно обычного сайта на обычном сервере, даже без PHP, а радиовещание в автоматическом режиме отвечает элемент аудио. Может это так же можно назвать имитацией вещания, но результат имеет такой же эффект - на одновременно открытых страницах даже на разных компьютерах в одно и то же время звучит одно и тоже, как при прослушивании радио. Но любом случае реализазии онлайн радио звук всегда берётся из файлов, которые где-то "лежат". Кроме этого в этом примере выводится история раннее прослушанного в недалёком времени. Алгоритм автосоставления плейлиста таков: в течении одного цикла плейлиста композиции воспроизводятся в случайном порядке, но не повторяются.
Перед первым запуском кода нужно будет сделать кое-какую подготовку - прежде всего желательно загрузить все аудиофайлы на сервер. (они могут быть мультимедийными или содержащими рекламу) Так, как тут всё обходится без PHP и библиотек, в сроках с 68 по 70 нужно будет прописать соответственно пути к файлам, названия треков и их длительности в секундах, которые должны иметь точность более, чем в секунду, чем точнее, тем лучше. Этот пример рассчитан на 10 треков, но количество можно изменить.
Кроме этого нужно будет посчитать суммарную длительность треков в плейлисте и записать её в переводе на милисекунды в 75 строке. А так же посчитать, сколько раз плейлист успел бы воспроизвестись с 1 января 1970 г., и записать это число в 73 строке.
PHPHTML
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>
1
27.11.2018, 15:30
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.11.2018, 15:30

Обмен готовыми решениями
&lt;?PHP echo getfilesize($_GET); // Функция для определения размера function...

Обсуждение класса постраничной навигации из темы "Обмен готовыми решениями"
Выделено из темы: http://www.cyberforum.ru/php/thread158262-page2.html Para bellum, может стоит...

Как запускать браузер с готовыми настройками?
пишу этот код, но всё равно выдаёт ошибку: InvalidOperationException не обработано пользовательским...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
66
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru