Как правильно выставить задержку по времени?

@inquisitor · Регистрация: 22.12.2015

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

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
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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
<html>
<body> 
<style>
s1,
s2,
s3,
s4,
s5,
s6,
s7,
s8,
s9,
s10,
s11,
s12,
s13,
s14,
s15,
s16,
s17,
s18,
s19,
s20,
s21,
s22,
s23,
s24,
s25,
s26,
s27,
s28,
s29,
s30,
s31,
s32,
s33,
s34,
s35,
s36,
s37,
s38,
s39,
s40,
s41,
s42,
s43,
s44,
s45,
s46,
s47,
s48,
s49,
s50,
s51,
s52,
s53,
s54,
s55,
s56,
s57,
s58,
s59,
s60,
s61,
s62,
s63,
s64,
s65,
s66,
s67,
s68,
s69,
s70,
s71,
s72,
s73,
s74,
s75,
s76,
s77,
s78,
s79,
s80,
s81,
s82,
s83,
s84,
s85,
s86,
s87,
s88,
s89,
s90,
s91,
s92,
s93,
s94,
s95{
opacity:1;
}
 
 
span{
letter-spacing: -4px;
}
 
.floating-text-box a span{
  transition: opacity 1s;
}
a{margin-right:20px;
display:block;
text-decoration:none;
}
</style>
<div class="floating-text-box">
        <a  href="#">
        <span id="s1">Р</span>
        <span id="s2">е</span>
        <span id="s3">с</span>
        <span id="s4">т</span>
        <span id="s5">о</span>
        <span id="s6">р</span>
        <span id="s7">а</span>
        <span id="s8">н</span>
        <span id="s9">ы</span>
        </a>
        <a  href="#">
        <span id="s10">М</span>
        <span id="s11">у</span>
        <span id="s12">з</span>
        <span id="s13">е</span>
        <span id="s14">и</span>
        </a>
        <a  href="#">
        <span id="s15">Р</span>
        <span id="s16">а</span>
        <span id="s17">з</span>
        <span id="s18">в</span>
        <span id="s19">л</span>
        <span id="s20">е</span>
        <span id="s21">ч</span>
        <span id="s22">е</span>
        <span id="s23">н</span>
        <span id="s24">и</span>
        <span id="s25">я</span>
        </a>
        <a  href="#">
        <span id="s26">К</span>
        <span id="s27">л</span>
        <span id="s28">у</span>
        <span id="s29">б</span>
        <span id="s30">ы</span>
        </a>
        <a  href="#">
        <span id="s31">С</span>
        <span id="s32">о</span>
        <span id="s33">б</span>
        <span id="s34">о</span>
        <span id="s35">р</span>
        <span id="s36">ы</span>
        </a>
        <a i href="#">
        <span id="s37">О</span>
        <span id="s38">т</span>
        <span id="s39">е</span>
        <span id="s40">л</span>
        <span id="s41">и</span>
        </a>
        <a  href="#">
        <span id="s42">Д</span>
        <span id="s43">о</span>
        <span id="s44">с</span>
        <span id="s45">т</span>
        <span id="s46">о</span>
        <span id="s47">п</span>
        <span id="s48">р</span>
        <span id="s49">о</span>
        <span id="s50">м</span>
        <span id="s51">е</span>
        <span id="s52">ч</span>
        <span id="s53">а</span>
        <span id="s54">т</span>
        <span id="s55">е</span>
        <span id="s56">л</span>
        <span id="s57">ь</span>
        <span id="s58">н</span>
        <span id="s59">о</span>
        <span id="s60">с</span>
        <span id="s61">т</span>
        <span id="s62">и</span>
        </a>
        <a  href="#">
        <span id="s63">П</span>
        <span id="s64">а</span>
        <span id="s65">р</span>
        <span id="s66">к</span>
        <span id="s67">и</span>
        </a>
        <a  href="#">
        <span id="s68">С</span>
        <span id="s69">а</span>
        <span id="s70">у</span>
        <span id="s71">н</span>
        <span id="s72">ы</span>
        </a>
        <a  href="#">
        <span id="s73">П</span>
        <span id="s74">а</span>
        <span id="s75">б</span>
        <span id="s76">ы</span>
        </a>
        <a  href="#">
        <span id="s77">Д</span>
        <span id="s78">р</span>
        <span id="s79">е</span>
        <span id="s80">в</span>
        <span id="s81">н</span>
        <span id="s82">о</span>
        <span id="s83">с</span>
        <span id="s84">т</span>
        <span id="s85">и</span>
        </a>
        <a  href="#">
        <span id="s86">Л</span>
        <span id="s87">а</span>
        <span id="s88">у</span>
        <span id="s89">н</span>
        <span id="s90">ж</span>
        <span id="s91">-</span>
        <span id="s92">б</span>
        <span id="s93">а</span>
        <span id="s94">р</span>
        <span id="s95">ы</span>
        </a>        
</div>
 
<script>
function func5()
{
 
}
 
 
var arr = 
 ["Рестораны", "Музеи", "Развлечения",
 "Клубы", "Соборы", "Отели",
 "Достопромечательности", "Парки", "Сауны",
 "Пабы", "Древности", "Лаунж-бары"];
/*
alert( 'Кількість елементів .floating-text-box a на поточній сторінці: '+arr.length );
*/
var rand2 = Math.floor(Math.random() * arr.length);
/* alert( [rand2] );*/
 
 
if (rand2 ==1) {
  setTimeout(0, 3000);
  document.getElementById("s1").style.opacity = 0;
 setTimeout(func5, 3000);
  document.getElementById("s2").style.opacity = 0;
 setTimeout(func5, 3000);
  document.getElementById("s3").style.opacity = 0;
 setTimeout(func5, 3000);
  document.getElementById("s4").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s5").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s6").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s7").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s8").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s9").style.opacity = 0;
   setTimeout(func5, 3000);
 
}
 else if (rand2==2) {
   setTimeout(func5, 3000);
  document.getElementById("s10").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s11").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s12").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s13").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s14").style.opacity = 0;
  } 
 
 else if (rand2==3) {
   setTimeout(func5, 3000);
  document.getElementById("s15").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s16").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s17").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s18").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s19").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s20").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s21").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s22").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s23").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s24").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s25").style.opacity = 0;
  } 
  
  else if (rand2==4) {
  setTimeout(func5, 3000);
  document.getElementById("s26").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s27").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s28").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s29").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s30").style.opacity = 0;
 
  } 
  
  else if (rand2==5) {
  setTimeout(func5, 3000);
  document.getElementById("s31").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s32").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s33").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s34").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s35").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s36").style.opacity = 0;
  } 
  
  else if (rand2==6) {
 setTimeout(func5, 3000);
  document.getElementById("s37").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s38").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s39").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s40").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s41").style.opacity = 0;
  } 
  
  else if (rand2==7) {
 setTimeout(func5, 3000);
  document.getElementById("s42").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s43").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s44").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s45").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s46").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s47").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s48").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s49").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s50").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s51").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s52").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s53").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s54").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s55").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s56").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s57").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s58").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s59").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s60").style.opacity = 0;
 setTimeout(func5, 3000);
  document.getElementById("s31").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s32").style.opacity = 0;
   setTimeout(func5, 3000);
  document.getElementById("s31").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s62").style.opacity = 0;
  } 
  
  else if (rand2==8) {
   setTimeout(func5, 3000);
  document.getElementById("s63").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s64").style.opacity = 0;
     setTimeout(func5, 3000);
  document.getElementById("s35").style.opacity = 0;
  setTimeout(func5, 3000);
  document.getElementById("s66").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s67").style.opacity = 0;
  } 
  
  else if (rand2==9) {
  setTimeout(func5, 3000);
  document.getElementById("s68").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s69").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s70").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s71").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s72").style.opacity = 0;
  }
 
  else if (rand2==10) {
  setTimeout(func5, 3000);
  document.getElementById("s73").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s74").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s75").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s76").style.opacity = 0;
  } 
  
  else if (rand2==11) {
  setTimeout(func5, 3000);
  document.getElementById("s77").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s78").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s79").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s80").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s81").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s82").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s83").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s84").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s85").style.opacity = 0;
  } 
  
  else if (rand2==12) {
  setTimeout(func5, 3000);
  document.getElementById("s86").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s87").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s88").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s89").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s90").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s91").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s92").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s93").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s94").style.opacity = 0;
    setTimeout(func5, 3000);
  document.getElementById("s95").style.opacity = 0;
} 
 
else {
  alert( '000000000' );
}
 
 
 
</script>
</body> 
</html>

Добавлено через 19 минут
Нужно так,я бы с радостью сократил бы код
1.Выбираю рандомно слово и считаю длину его букв
2 стираю побквенно с задержкой в 3 секунды слева направо каждый символ(стерли символ установив прозрачность в ноль ждем три секунды)
3 жду 3 секунды/пауза
4 проявляю рандомное/стертое слово по буквам слева на право
5 выбираю следующее рандомное слово

@kalabuni · 27.06.2018, 08:53

Сообщение от scherbakovss201

Нужно так,я бы с радостью сократил бы код

ну вот "ни в жисть" (с) не поверю, что именно так и нужно
неужто вас кто-то под угрозой расстрела обязал использовать совершенно ненужные для этой задачи идентификаторы id для спана каждой буковки?
и неужели этот же злой человек потребовал использовать именно ссылки без подчёркивания вместо любых иных инлайн-тегов, на которых можно обработать клик?
ну и понятие "селекторы" в CSS, как вижу, вам совершенно незнакомо: надо писать #s1...#s95
В общем, так:
1. в HTML-коде слова внутри ссылок вполне можно писать как обычно, без побуквенного их разбиения на спаны
2. и только после случайного выбора очередного слова скрипт обрамит каждую буковку в спан, не прописывая им идентификаторы -- обращаться к конкретному спану рациональнее будет по его порядковому индексу внутри ссылки
--------------
и уточните: а) скорость "стирания" и "восстановления" буковок должна быть одинакова?
и б) значение скорости "стирания" / "восстановления" буковок как-нить конкретно регламентируется, или же стандартно: "побыстрее, но плавно"?

PS. вам же несколько вариантов сделали в предыдущей вашей теме Посимвольная анимация
и нигде не было ни id у спанов, ни стилевых правил для них...

@inquisitor · 27.06.2018, 10:42 **[ТС]**

Сообщение от kalabuni

и уточните: а) скорость "стирания" и "восстановления" буковок должна быть одинакова?
и б) значение скорости "стирания" / "восстановления" буковок как-нить конкретно регламентируется, или же стандартно: "побыстрее, но плавно"?

Слова абсолютно любые,главное,что бы работало.Скорость стирания и восстановления регулируется переменной

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var timer = 3000;/*скорость */
function func5() {
 
var masP=document.querySelectorAll(".floating-text-box a");
var rand2 = Math.floor(Math.random() * masP.length);
/*Заносим рандомное слово в массив */
var lettermasP = masP[rand2].text;
for (var i = 0; i < lettermasP.length; i++) {
 lettermasP[i].opacity = 0; 
/* Дальше нужно,как то символ стирать и делать задержку по переменной  timer */
}
 
}
setTimeout(fun5,timer );/ *Ждет 3 секунды =  timer  и выполняет всю функцию,она не делает задержки на стирание символа*/

CSS
1
2
3
4
5
6
7
.floating-text-box a span{
  transition: opacity 1s;
}
a{margin-right:20px;
display:block;
text-decoration:none;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="floating-text-box">
        <a href="#" >Рестораны</a>
        <a href="#" >Музеи</a>
        <a href="#" >Развлечения</a>
        <a href="#" >Клубы</a>
        <a href="#">Соборы</a>
        <a href="#" >Отели</a>
        <a href="#">Достопромечательности</a>
        <a href="#" >Парки</a>
        <a href="#" >Сауны</a>
        <a href="#" >Пабы</a>
        <a href="#" >Древности</a>
        <a href="#" >Лаунж-бары</a>
</div>

@kalabuni · 27.06.2018, 18:12

scherbakovss201, вы не поняли моего вопроса
во-первых, я спрашивал не о вашем коде (неужто вы всерьёз верите, что хоть кто-то просмотрит до конца вашу "достопромечательную простыню"?), а об условии задачи
во-вторых, я спрашивал о скорости стирания / восстановления каждой отдельной буквы , а не о задержках при переходе от стирания к восстановлению текущего слова и от одного слова к другому слову (эти задержки у вас в условии озвучены: 3 секунды, а вот о времени, за которое каждая буква должна изменить opacity от 1 до нуля, и затем снова вернуться к единице, в вашем условии не написано НИЧЕГО)

@inquisitor · 27.06.2018, 20:23 **[ТС]**

Сообщение от kalabuni

о скорости стирания / восстановления каждой отдельной буквы

Моя задержка на стирание и востановление каждой буквы равна как раз 3 секунды,все остальные паузы тоже 3 секуныды для перехода к следующему слову.

@kalabuni · 27.06.2018, 22:07

итак, прикинем:
всего букв 95, каждая 3 секунды "мутнеет" и 3 секунды "проявляется", итого 95 х 6 = 570 секунд

всего слов 12, в каждом из них делаем 3-хсекундную паузу между окончанием помутнения" и началом "проявления", это составит 12 х 3 = 36 секунд

кроме того, надо 11 раз выждать по 3 секунды при переходах между словами, на что потребуется 33 секунды
Подбиваем бабки: 570 + 36 + 33 = 639 секунд или 10 минут и 39 секунд
scherbakovss201, вы лично знаете человека, который будет пялиться на вашу "анимацию" более десяти с половиной минут?

есть бизнес-предложение: предложите страницу с этим вашим "анимационным меню" какому-нить рекрутинговому агенству в качестве теста, который обязательно должны проходить кандидаты на должность "охранник видеонаблюдения"

@inquisitor · 27.06.2018, 22:25 **[ТС]**

Сообщение от kalabuni

кроме того, надо 11 раз выждать по 3 секунды при переходах между словами, на что потребуется 33 секунды
Подбиваем бабки: 570 + 36 + 33 = 639 секунд или 10 минут и 39 секунд
scherbakovss201, вы лично знаете человека, который будет пялиться на вашу "анимацию" более десяти с половиной минут?

Вот есть исходник
в нем рандомно выбираеться слово и побуквенно стираеться и так пока все слов не сотруться.
Мне же нужно стерев одно рандомное слово по этому исходнику,перейти к его же проявлению.Только после этого перейти к выбору следующего рандомного слова.Что подправить?

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
var p = document.querySelectorAll('.floating-text-box a');debugger
p =  shuffle( Array.prototype.slice.call(p))
var spans =[];
p.forEach( function(item){
    var newtxt='';
    var lettersArr = item.innerHTML.split('');
    lettersArr.forEach(function(letter){
    newtxt +='<span>' + letter +'</span>' 
  });
  item.innerHTML = newtxt;
});
 
p.forEach(
function(spansCol){
  spansCol.querySelectorAll('span').forEach(function(eachSpan){
  spans.push(eachSpan)
});
})
function fun(){
spans.forEach(function(eachSpan, i){
  timer = setTimeout(function(){eachSpan.style.opacity=0;},100*i);
  
  })
setTimeout(fun2, 100*(spans.length -1))
 
}
function fun2(){
spans.forEach(function(eachSpan, i){
  setTimeout(function(){eachSpan.style.opacity=1;},100*i);
  })
    setTimeout(fun, 100*(spans.length -1));
}
fun();
function shuffle(array) {
    let counter = array.length;
 
    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        let index = Math.floor(Math.random() * counter);
 
        // Decrease counter by 1
        counter--;
 
        // And swap the last element with it
        let temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }
 
    return array;
}

@kalabuni · 27.06.2018, 22:40

Сообщение от scherbakovss201

Вот есть исходник
в нем рандомно выбираеться слово и побуквенно стираеться и так пока все слов не сотруться.
Мне же нужно стерев одно рандомное слово по этому исходнику,перейти к его же проявлению.Только после этого перейти к выбору следующего рандомного слова.Что подправить?

извините, не люблю копаться в чужих кодах, легче написать свой
подождите кого-нить
пока ждёте, посетите эту ссылочку

@kalabuni · 30.06.2018, 07:13

scherbakovss201, как вижу, никто помочь вам не вызвался
полагаю, что кого-нить другого ждать будете вечно, потому как никому неинтересно заниматься такой бессмысленной задачей, окромя меня, ибо мне вас жаль

а бессмысленная она потому, что:
либо браузер заснёт (подвиснет), предварительно выбросив предупреждение: "скрипт на данной странице замедляет браузер... остановить или подождать?"
либо пользователь заснёт, что я вам выше уже пытался объяснить... но вы, похоже, этого не поняли

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
<style>
a {text-decoration: none; font-weight: bold; color: black;}
</style>
<script>
onload = function ()
{
for (var lnks = document.querySelector ('.floating-text-box').querySelectorAll ('a'), wrds = [], j = 0, lenW = lnks.length; j < lenW; j++)
   {
   lnks [j].innerHTML = '<span style="opacity: 1;">' +
   lnks [j].innerHTML.split ('').join ('</span><span style="opacity: 1;">') + '</span>';
   wrds [j] = lnks [j];
   }
wrds.sort (function (x, y) {return (Math.random () > .5)});
var IW = 0; // ... Index of Words
var IL = 0; // ... Index of Letters 
var S = .01; // ... Subtrahend (вычитаемое)... используется именно вычитание,
// чтобы не задействовать parseInt () для style.opacity
 
 
myAnim ();
 
function myAnim ()
{
var D; // ... Delay ( задержка)
var spn = wrds [IW].querySelectorAll ('span') [IL];
var op = spn.style.opacity -= S;
if (op > 0 && op < 1) D = 30;
if (op == 0)
   {
   if (IL < wrds [IW].querySelectorAll ('span').length) IL++;
if (IL == wrds [IW].querySelectorAll ('span').length)
      {
      IL = 0;
      S *= -1;
      D = 3000;
      }
   }
if (op == 1)
   {
   if (IL < wrds [IW].querySelectorAll ('span').length - 2) IL++;
   else if (IL == wrds [IW].querySelectorAll ('span').length - 1)
      {
      if (IW < lenW)
         {
         IW++;
         IL = 0;
         S *= -1;
         D = 3000;
         }
      else if (IW == lenW - 1)
         {
         clearTimeout (TMR);
         return;
         }
      }
   }
TMR = setTimeout (myAnim, D);
}
 
}
</script>
<div class="floating-text-box">
        <a href="#" >Рестораны</a>
        <a href="#" >Музеи</a>
        <a href="#" >Развлечения</a>
        <a href="#" >Клубы</a>
        <a href="#">Соборы</a>
        <a href="#" >Отели</a>
        <a href="#">Достопромечательности</a>
        <a href="#" >Парки</a>
        <a href="#" >Сауны</a>
        <a href="#" >Пабы</a>
        <a href="#" >Древности</a>
        <a href="#" >Лаунж-бары</a>
</div>

@inquisitor · 30.06.2018, 11:11 **[ТС]**

Сообщение от kalabuni

а бессмысленная она потому, что:
либо браузер заснёт (подвиснет), предварительно выбросив предупреждение: "скрипт на данной странице замедляет браузер... остановить или подождать?"
либо пользователь заснёт, что я вам выше уже пытался объяснить... но вы, похоже, этого не поняли

код не выбирает рандомного слова,а начинает со слова достопромечательности.Его очень медленно стер.Потом очень медленно до последней буквы прояви.Последнею буквы не проявил.Ставил D =0 не влияет на скорость.

Скорость должна быть,как здесь,только нужно,что бы слово рандомно выбиралось,выбилось не из id а с класса

JavaScript
1
2
3
4
 onload=()=>
f_.innerHTML=[...f_.innerText].map(a=>'<span>'+a+'</span>').join('');
i=s=0;
setInterval(()=>(s||(f_.childNodes[i].style.opacity='0'),s&&(f_.childNodes[i].style.opacity='1'),++i==f_.childNodes.length&&(i=0,s=!s)),100);

CSS
1
2
3
4
5
6
7
8
a {
text-decoration: none;
margin-right:20px;
display:block;
}
 span{ 
transition: 3000ms;
        }

HTML5
1
<div id="f_">Как посимвольно изменить прозрачность рандомного слова? </div>

Нужно,что бы работала с этого

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="floating-text-box">
        <a href="#" >Рестораны</a>
        <a href="#" >Музеи</a>
        <a href="#" >Развлечения</a>
        <a href="#" >Клубы</a>
        <a href="#">Соборы</a>
        <a href="#" >Отели</a>
        <a href="#">Достопромечательности</a>
        <a href="#" >Парки</a>
        <a href="#" >Сауны</a>
        <a href="#" >Пабы</a>
        <a href="#" >Древности</a>
        <a href="#" >Лаунж-бары</a>
</div>

@kalabuni · 30.06.2018, 15:06

Сообщение от scherbakovss201

код не выбирает рандомного слова,а начинает со слова достопромечательности.

а что, слово "достопромечательности" в принципе не может быть первым случайным?
и почему?
потому что вы его с ошибкой написали?
в каком-то казино на стене золотыми буквами написано: "в этом зале на рулетке 22 раза подряд выпало красное -- это мировой рекорд, зафиксированный в книге рекордов Гиннесса"
так что проверяйте минимум 23 раза... и вот если все 23 раза скрипт начнёт с вашего "достопромечательности", то только тогда можете предъявлять претензии ... или фиксировать новый мировой рекорд

Сообщение от scherbakovss201

Его очень медленно стер.Потом очень медленно до последней буквы прояви.

ну а здесь я умываю руки ... выше я долго-долго расспрашивал вас о скорости стирания/проявления буквы... и вы мне ответили:

Сообщение от scherbakovss201

Моя задержка на стирание и востановление каждой буквы равна как раз 3 секунды

Сообщение от scherbakovss201

Последнею буквы не проявил.

перечитайте свои сообщения -- в них вы регулярно не дописываете последнюю букву слов ... вот и я пошутил

в строке #40 моего кода удалите -2 из условия, т.е. должно быть так:
if (IL < wrds [IW].querySelectorAll ('span').length)

и перестаньте, наконец, тупить: работа любого скрипта никак не зависит от того, каким образом (через id или через className) обращаться к элементу, а то придётся "вызвать санитаров сделать в голову укол" (с)

@inquisitor · 30.06.2018, 15:45 **[ТС]**

Сообщение от kalabuni

-- это мировой рекорд, зафиксированный в книге рекордов Гиннесса"
так что проверяйте минимум 23 раза... и вот если все 23 раза скрипт начнёт с вашего "достопромечательности", то только тогда можете предъявлять претензии ... или фиксировать новый мировой рекорд

Это не претензия))

@kalabuni · 01.07.2018, 00:15

scherbakovss201, 3 секунды в веб-анимации для любого процесса, и для любой паузы -- это ну оооочень долго
я изначально предлагал вам стирать и восстанавливать каждую букву "побыстрее, но плавно" (см самое первое моё сообщение в этой теме)

но вы же упёртый и бестолковый, как не знаю кто... в итоге и получили то, что вам, естественно, не понравилось

в общем, возьмите мой последний код и внесите в него несколько изменений, а именно:
1) везде D = 30; замени́те на D = 5;

2) и везде D = 3000; замени́те на D = 100;

3) строчку var D; // ... Delay ( задержка) удали́те из функции myAnim () и пропиши́те её перед вызовом этой функции, т.е. перед строкой myAnim ();

удачи!

@inquisitor · 01.07.2018, 08:59 **[ТС]**

Сообщение от kalabuni

scherbakovss201, 3 секунды в веб-анимации для любого процесса, и для любой паузы -- это ну оооочень долго
я изначально предлагал вам стирать и восстанавливать каждую букву "побыстрее, но плавно" (см самое первое моё сообщение в этой теме)
но вы же упёртый и бестолковый, как не знаю кто... в итоге и получили то, что вам, естественно, не понравилось
в общем, возьмите мой последний код и внесите в него несколько изменений, а именно:
1) везде D = 30; замени́те на D = 5;
2) и везде D = 3000; замени́те на D = 100;
3) строчку var D; // ... Delay ( задержка) удали́те из функции myAnim () и пропиши́те её перед вызовом этой функции, т.е. перед строкой myAnim ();

1)Рандомный выбор так и не заработал,все началось и закончилось на слове"Достопромечательности".
Изменил ваш код по вашим рекомендациям.Результат стирает быстрее,в слове"Достопромечательности" стер до последнего слога и сразу начал проявлять,проявил до половины и стер последний слог,потом проявил остальную половину слова.Это глюк.
Сначала полное стирание,потом полное проявление.

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
onload = function ()
{
for (var lnks = document.querySelector ('.floating-text-box').querySelectorAll ('a'), wrds = [], j = 0, lenW = lnks.length; j < lenW; j++)
   {
   lnks [j].innerHTML = '<span style="opacity: 1;">' +
   lnks [j].innerHTML.split ('').join ('</span><span style="opacity: 1;">') + '</span>';
   wrds [j] = lnks [j];
   }
wrds.sort (function (x, y) {return (Math.random () > .5)});
var IW = 0; // ... Index of Words
var IL = 0; // ... Index of Letters 
var S = .01; // ... Subtrahend (вычитаемое)... используется именно вычитание,
// чтобы не задействовать parseInt () для style.opacity
 
 
myAnim ();
 var D; // ... Delay ( задержка)
function myAnim ()
{
 
var spn = wrds [IW].querySelectorAll ('span') [IL];
var op = spn.style.opacity -= S;
if (op > 0 && op < 1) D = 5;
if (op == 0)
   {
if (IL < wrds [IW].querySelectorAll ('span').length) IL++;
if (IL == wrds [IW].querySelectorAll ('span').length)
      {
      IL = 0;
      S *= -1;
      D = 100;
      }
   }
if (op == 1)
   {
  if (IL < wrds [IW].querySelectorAll ('span').length ) IL++;
   else if (IL == wrds [IW].querySelectorAll ('span').length-1 )
      {
      if (IW < lenW)
         {
         IW++;
         IL = 0;
         S *= -1;
         D = 100;
         }
      else if (IW == lenW - 1)
         {
         clearTimeout (TMR);
         return;
         }
      }
   }
TMR = setTimeout (myAnim, D);
}
 
}

@inquisitor · 01.07.2018, 09:55 **[ТС]**

Разместил в шапке сайта и чего- то не работает в header.php
Поменял местами и скрипт теперь у меня на ПК делает рандомный выбор слова,стирает и проявляет его,а вот на сайте не хочет.

header.rar

@inquisitor · 01.07.2018, 12:25 **[ТС]**

Вставил между <head>
<script>
alert("Привет ");
</script>
</head>
и ничего,сайт на wordpress

@kalabuni · 01.07.2018, 14:29

scherbakovss201, утомили, чесслово

наслаждайтесь

@inquisitor · 02.07.2018, 15:37 **[ТС]**

Сообщение от kalabuni

scherbakovss201, утомили, чесслово
наслаждайтесь

А,что заменить,что бы вместо прозрачности посимвольно буквы ставали красными,а потом назад в свой цвет?
Только одна первая буква стала красной в рандомном слове и все

JavaScript
1
2
/*var op = spn.style.opacity -= S;*/
var op = spn.style.color = "#f00";

@kalabuni · 02.07.2018, 15:46

Сообщение от scherbakovss201

что бы вместо прозрачности посимвольно буквы ставали красными

снова попрошу уточнить:
1) изменение цвета каждой отдельной буквы с чёрного на красный -- оно мгновенно должно происходить, или как-то иначе?
если иначе, то объясните подробнее: как именно?

@inquisitor · 02.07.2018, 15:47 **[ТС]**

Сообщение от kalabuni

снова попрошу уточнить:
1) изменение цвета с чёрного на красный -- оно мгновенно должно происходить, или как-то иначе?
если иначе, то объясните подробнее: как именно?
__________________

Условия аналогичные

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
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
<div class="floating-text-box">
        <a href="/ru/top-10-restoranov-kieva/" style="top: 9px; left: 0px;">рестораны</a>
        <a href="/ru/top-10-klubov-kieva/" style="top: 24px; left: 210px;">клубы</a>
        <a href="/ru/top-10-dostoprimechatelnostey-kieva/" style="top: -16px; left: 237px;">достопримечательности</a>
        <a href="/ru/top-10-launzh-barov-kieva/" style="top: 10px; left: 510px;">лаунж-бары</a>
        <a href="/ru/top-10-muzeev-kieva/" style="top: 50px; left: 85px;">музеи</a>
        <a href="/ru/top-10-soborov-kieva/" style="top: 65px; left: 210px;">соборы</a>
        <a href="/ru/top-10-parkov-kieva/" style="top: 40px; left: 338px;">парки</a>
        <a href="/ru/top-10-drevnostey-kieva/ " style="top: 53px; left: 431px;">древности</a>
        <a href="/ru/top-10-razvlecheniy-kieva/" style="top: 110px;">развлечения</a>
        <a href="/ru/hotels-kieva-top-10/" style="top: 100px; left: 250px;">отели</a>
        <a href="/ru/top-10-saunyi-kieva/" style="top: 99px; left: 404px;">сауны</a>
        <a href="/ru/top-10-pabov-kieva/" style="top: 78px; left: 530px;">пабы</a>
    <script>
 
onload = function ()
{
for (var lnks = document.querySelector ('.floating-text-box').querySelectorAll ('a'), wrds = [], j = 0, lenW = lnks.length; j < lenW; j++)
   {
   lnks [j].innerHTML = '<span style="opacity: 1;">' +
   lnks [j].innerHTML.split ('').join ('</span><span style="opacity: 1;">') + '</span>';
   wrds [j] = lnks [j];
   }
wrds.sort (function (x, y) {return (Math.random () > wrds.length)});
var IW = 0; // ... Index of Words
var IL = 0; // ... Index of Letters 
 var S = .01; // ... Subtrahend (вычитаемое)... используется именно вычитание, 
// чтобы не задействовать parseInt () для style.opacity
 
 var D; // ... Delay ( задержка)
myAnim ();
 
function myAnim ()
{
 
var spn = wrds [IW].querySelectorAll ('span') [IL];
var op = spn.style.opacity -= S;
if (op > 0 && op < 1) D = 5;
if (op == 0)
   {
   if (IL < wrds [IW].querySelectorAll ('span').length) IL++;
if (IL == wrds [IW].querySelectorAll ('span').length)
      {
      IL = 0;
      S *= -1;
      D = 50;
      }
   }
if (op == 1)
   {
   if (IL < wrds [IW].querySelectorAll ('span').length - 1) IL++;
   else if (IL == wrds [IW].querySelectorAll ('span').length - 1)
      {
      if (IW < lenW)
         {
         IW++;
         IL = 0;
         S *= -1;
         D = 50;
         }
      else if (IW == lenW - 1)
         {
         clearTimeout (TMR);
         return;
         }
      }
   }
TMR = setTimeout (myAnim, D);
}
}
</script>   
</div>
<style>
a {
text-decoration: none;
margin-right:20px;
display:block;
}
 span{ 
transition: 3000ms;
}
</style>

Новые блоги и статьи Все статьи Все блоги /
Мастер-класс по микросервисам на Node.js Reangularity 21.06.2025 Node. js стал одной из самых популярных платформ для микросервисной архитектуры не случайно. Его неблокирующая однопоточная модель и событийно-ориентированный подход делают его идеальным для. . .	Управление Arduino из WPF приложения Wired 21.06.2025 Зачем вообще связывать Arduino с WPF-приложением? Казалось бы, у Arduino есть собственная среда разработки, своя экосистема, свои способы управления. Однако при создании серьезных проектов. . .	Звёздная пыль kumehtar 20.06.2025 Я просто это себе представляю: как создавался этот мир. Как энергия слипалась в маленькие частички. Как они собирались в первые звёзды, как во вселенной впервые появился Свет. Как эти звёзды. . .	Создание нейросети с PyTorch AI_Generated 19.06.2025 Ключевое преимущество PyTorch — его питоновская натура. В отличие от TensorFlow, который изначально был построен как статический вычислительный граф, PyTorch предлагает динамический подход. Это. . .	JWT аутентификация в ASP.NET Core UnmanagedCoder 18.06.2025 Разрабатывая веб-приложения, я постоянно сталкиваюсь с дилеммой: как обеспечить надежную аутентификацию пользователей без ущерба для производительности и масштабируемости? Классические подходы на. . .
Краткий курс по С# aaLeXAA 18.06.2025 Здесь вы найдете все необходимые функции чтоб написать програму на C# Задание 1: КЛАСС FORM 1 public partial class Form1 : Form { Spisok listin = new Spisok(); . . .	50 самых полезных примеров кода Python для частых задач py-thonny 17.06.2025 Эффективность работы разработчика часто измеряется не количеством написаных строк, а скоростью решения задач. Готовые сниппеты значительно ускоряют разработку, помогают избежать типичных ошибок и. . .	C# и продвинутые приемы работы с БД stackOverflow 17.06.2025 Каждый . NET разработчик рано или поздно сталкивается с ситуацией, когда привычные методы работы с базами данных превращаются в источник бессонных ночей. Я сам неоднократно попадал в такие ситуации,. . .	Angular: Вопросы и ответы на собеседовании Reangularity 15.06.2025 Готовишься к техническому интервью по Angular? Я собрал самые распространенные вопросы, с которыми сталкиваются разработчики на собеседованиях в этом году. От базовых концепций до продвинутых. . .	Архитектура Onion в ASP.NET Core MVC stackOverflow 15.06.2025 Что такое эта "луковая" архитектура? Термин предложил Джеффри Палермо (Jeffrey Palermo) в 2008 году, и с тех пор подход только набирал обороты. Суть проста - представьте себе лук с его. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	27.06.2018, 18:12
	scherbakovss201, вы не поняли моего вопроса во-первых, я спрашивал не о вашем коде (неужто вы всерьёз верите, что хоть кто-то просмотрит до конца вашу "достопромечательную простыню"?), а об условии задачи во-вторых, я спрашивал о скорости стирания / восстановления каждой отдельной буквы , а не о задержках при переходе от стирания к восстановлению текущего слова и от одного слова к другому слову (эти задержки у вас в условии озвучены: 3 секунды, а вот о времени, за которое каждая буква должна изменить opacity от 1 до нуля, и затем снова вернуться к единице, в вашем условии не написано НИЧЕГО) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	27.06.2018, 22:07
	итак, прикинем: всего букв 95, каждая 3 секунды "мутнеет" и 3 секунды "проявляется", итого 95 х 6 = 570 секунд всего слов 12, в каждом из них делаем 3-хсекундную паузу между окончанием помутнения" и началом "проявления", это составит 12 х 3 = 36 секунд кроме того, надо 11 раз выждать по 3 секунды при переходах между словами, на что потребуется 33 секунды Подбиваем бабки: 570 + 36 + 33 = 639 секунд или 10 минут и 39 секунд scherbakovss201, вы лично знаете человека, который будет пялиться на вашу "анимацию" более десяти с половиной минут? есть бизнес-предложение: предложите страницу с этим вашим "анимационным меню" какому-нить рекрутинговому агенству в качестве теста, который обязательно должны проходить кандидаты на должность "охранник видеонаблюдения" 2

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	01.07.2018, 00:15
	scherbakovss201, 3 секунды в веб-анимации для любого процесса, и для любой паузы -- это ну оооочень долго я изначально предлагал вам стирать и восстанавливать каждую букву "побыстрее, но плавно" (см самое первое моё сообщение в этой теме) но вы же упёртый и бестолковый, как не знаю кто... в итоге и получили то, что вам, естественно, не понравилось в общем, возьмите мой последний код и внесите в него несколько изменений, а именно: 1) везде D = 30; замени́те на D = 5; 2) и везде D = 3000; замени́те на D = 100; 3) строчку var D; // ... Delay ( задержка) удали́те из функции myAnim () и пропиши́те её перед вызовом этой функции, т.е. перед строкой myAnim (); удачи! 0

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	01.07.2018, 09:55 [ТС]
	Разместил в шапке сайта и чего- то не работает в header.php Поменял местами и скрипт теперь у меня на ПК делает рандомный выбор слова,стирает и проявляет его,а вот на сайте не хочет. header.rar 0

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	01.07.2018, 12:25 [ТС]
	Вставил между <head> <script> alert("Привет "); </script> </head> и ничего,сайт на wordpress 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	01.07.2018, 14:29
	Сообщение было отмечено scherbakovss201 как решение Решение scherbakovss201, утомили, чесслово наслаждайтесь 0

Как правильно выставить задержку по времени?

Решение