Как JS-скрипт запустить в нужный момент?
| |
GameDev2 | Дата: Суббота, 25 Ноября 2023, 23:29 | Сообщение # 1 |
почетный гость
Сейчас нет на сайте
| Допустим, у меня есть JS-скрипт "Падает снег", который подключался на постоянное воспроизведение:
<script src="scripts/snow.js"></script>
Как сделать, чтобы он не постоянно шёл, а запускался, например, когда выходит всплывающее окно, например.
Как-то нужно обрамить код с переменной? И как-то менять её - как?
|
|
| |
JackNazaryan | Дата: Воскресенье, 26 Ноября 2023, 06:23 | Сообщение # 2 |
старожил
Сейчас нет на сайте
| Ну вообще, в самом глупом варианте можно сделать alert('текст'), если речь про всплывающее текстовое окно. Если про другой сайт, window.open перед этим. Обрамить надо в <script> всего лишь.
Если хотите деталей или чего-то более сложного, нужны подробности, что хочется увидеть в результате и любые подробности.
|
|
| |
lvovand | Дата: Воскресенье, 26 Ноября 2023, 08:19 | Сообщение # 3 |
старожил
Сейчас нет на сайте
| можно не сразу в коде прописать подключение файла скрипта, а подключать динамически по нужному событию как-то так: функция_по_событию{ var script = document.createElement('script'); script.src = "scripts/snow.js"; document.head.appendChild(script); }
при необходимости можно и удаление скрипта также динамически прописать
Разработка и продвижение сайтов. Дизайн
|
|
| |
GameDev2 | Дата: Понедельник, 27 Ноября 2023, 21:38 | Сообщение # 4 |
почетный гость
Сейчас нет на сайте
| lvovand, несрабатывание так. И так тоже:
Код displayMessage() { //код вызывает сообщение + playFireworks(); }
playFireworks(){ //код эффекта }
Сообщение отредактировал GameDev2 - Понедельник, 27 Ноября 2023, 21:38 |
|
| |
lvovand | Дата: Вторник, 28 Ноября 2023, 10:24 | Сообщение # 5 |
старожил
Сейчас нет на сайте
| Цитата lvovand ( ) lvovand, несрабатывание так. И так тоже: напиши простую страницу без всякого кода, чисто html, head, body добавь событие, например загрузку страницы и функцию добавления скрипта по этому событию,
код то простой роде как, нечему не срабатывать, может событие у тебя не вызывается, может какие-то ошибки еще есть, скинь код минимальной страницы с подгрузкой скрипта, если уж не пойдет никак
Разработка и продвижение сайтов. Дизайн
Сообщение отредактировал lvovand - Вторник, 28 Ноября 2023, 10:24 |
|
| |
Serg1992 | Дата: Вторник, 28 Ноября 2023, 14:53 | Сообщение # 6 |
был не раз
Сейчас нет на сайте
| Самое простое скрыть снег стилями, а когда нужно навесить класс на body ._snow-visibility .snow{display:none} ._snow-visibility .snow{display:block}
|
|
| |
GameDev2 | Дата: Вторник, 28 Ноября 2023, 18:16 | Сообщение # 7 |
почетный гость
Сейчас нет на сайте
| Вот такой скрипт:
Код function write_fire(e) {var t,n,r;stars[e+"r"]=createDiv("|",12); boddie.appendChild(stars[e+"r"]); for(t=bits*e;t<bits+bits*e;t++){stars[t]=createDiv("*",13); boddie.appendChild(stars[t])}} function createDiv(e,t) {var n=document.createElement("div"); n.style.font=t+"px monospace"; n.style.position="absolute"; n.style.backgroundColor="transparent"; n.appendChild(document.createTextNode(e)); return n} function launch(e){colour[e]=Math.floor(Math.random()*colours.length);Xpos[e+"r"]=swide*.5;Ypos[e+"r"]=shigh-5;bangheight[e]=Math.round((.5+Math.random())*shigh*.4);dX[e+"r"]=(Math.random()-.5)*swide/bangheight[e];if(dX[e+"r"]>1.25)stars[e+"r"].firstChild.nodeValue="/"; else if(dX[e+"r"]<-1.25)stars[e+"r"].firstChild.nodeValue="\\"; else stars[e+"r"].firstChild.nodeValue="|";stars[e+"r"].style.color=colours[colour[e]]} function bang(e){var t,n,r=0;for(t=bits*e;t<bits+bits*e;t++){n=stars[t].style;n.left=Xpos[t]+"px";n.top=Ypos[t]+"px";if(decay[t])decay[t]--; else r++;if(decay[t]==15)n.fontSize="7px"; else if(decay[t]==7)n.fontSize="2px"; else if(decay[t]==1)n.visibility="hidden";Xpos[t]+=dX[t];Ypos[t]+=dY[t]+=1.25/intensity[e]} if(r!=bits)setTimeout("bang("+e+")",speed)} function stepthrough(e){var t,n,r;var i=Xpos[e+"r"]; var s=Ypos[e+"r"];Xpos[e+"r"]+=dX[e+"r"];Ypos[e+"r"]-=4; if(Ypos[e+"r"]<bangheight[e]){n=Math.floor(Math.random()*3*colours.length);intensity[e]=5+Math.random()*4; for(t=e*bits;t<bits+bits*e;t++){Xpos[t]=Xpos[e+"r"];Ypos[t]=Ypos[e+"r"];dY[t]=(Math.random()-.5)*intensity[e];dX[t]=(Math.random()-.5)*(intensity[e]-Math.abs(dY[t]))*1.25;decay[t]=16+Math.floor(Math.random()*16);r=stars[t];if(n<colours.length)r.style.color=colours[t%2?colour[e]:n]; else if(n<2*colours.length)r.style.color=colours[colour[e]]; else r.style.color=colours[t%colours.length];r.style.fontSize="13px";r.style.visibility="visible"}bang(e);launch(e)}stars[e+"r"].style.left=i+"px";stars[e+"r"].style.top=s+"px"} function set_width(){ var e=999999; var t=999999; if(document.documentElement&&document.documentElement.clientWidth) {if(document.documentElement.clientWidth>0)e=document.documentElement.clientWidth; if(document.documentElement.clientHeight>0)t=document.documentElement.clientHeight} if(typeof self.innerWidth!="undefined"&&self.innerWidth){if(self.innerWidth>0&&self.innerWidth<e)e=self.innerWidth; if(self.innerHeight>0&&self.innerHeight<t)t=self.innerHeight}if(document.body.clientWidth) {if(document.body.clientWidth>0&&document.body.clientWidth<e)e=document.body.clientWidth; if(document.body.clientHeight>0&&document.body.clientHeight<t)t=document.body.clientHeight} if(e==999999||t==999999){e=800;t=600}swide=e;shigh=t} var bits=80; var speed=32; var bangs=5; var colours=new Array("#03f","#f03","#0e0","#93f","#0cf","#f93","#f0c"); var bangheight=new Array; var intensity=new Array; var colour=new Array; var Xpos=new Array; var Ypos=new Array; var dX=new Array; var dY=new Array; var stars=new Array; var decay=new Array; var swide=800; var shigh=600; var boddie;window.onload=function() {if(document.getElementById){ var e;boddie=document.createElement("div");boddie.style.position="fixed";boddie.style.top="0px";boddie.style.left="0px";boddie.style.overflow="visible";boddie.style.width="1px";boddie.style.height="1px";boddie.style.backgroundColor="transparent";document.body.appendChild(boddie);set_width(); for(e=0;e<bangs;e++){write_fire(e);launch(e);setInterval("stepthrough("+e+")",speed)}}};window.onresize=set_width
Если его вставить в код, то он работает всегда.
Как его обрамить переменной и включать/выключать эту переменную, чтобы скрипт запускался или отключался в нужный момент?
Цитата Serg1992 ( ) Самое простое скрыть снег стилями, а когда нужно навесить класс на body ._snow-visibility .snow{display:none} ._snow-visibility .snow{display:block}
Скрипт же не привязан к элементу, не на каком-то определенном конвасе, он поверху всего.
Сообщение отредактировал GameDev2 - Вторник, 28 Ноября 2023, 18:18 |
|
| |
lvovand | Дата: Среда, 29 Ноября 2023, 07:43 | Сообщение # 8 |
старожил
Сейчас нет на сайте
| переписал совсем чутка snow.js
Код function write_fire(e) { var t, n, r; stars[e + "r"] = createDiv("|", 12); boddie.appendChild(stars[e + "r"]); for (t = bits * e; t < bits + bits * e; t++) { stars[t] = createDiv("*", 13); boddie.appendChild(stars[t]) } }
function createDiv(e, t) { var n = document.createElement("div"); n.style.font = t + "px monospace"; n.style.position = "absolute"; n.style.backgroundColor = "transparent"; n.appendChild(document.createTextNode(e)); return n }
function launch(e) { colour[e] = Math.floor(Math.random() * colours.length); Xpos[e + "r"] = swide * .5; Ypos[e + "r"] = shigh - 5; bangheight[e] = Math.round((.5 + Math.random()) * shigh * .4); dX[e + "r"] = (Math.random() - .5) * swide / bangheight[e]; if (dX[e + "r"] > 1.25) stars[e + "r"].firstChild.nodeValue = "/"; else if (dX[e + "r"] < -1.25) stars[e + "r"].firstChild.nodeValue = "\\"; else stars[e + "r"].firstChild.nodeValue = "|"; stars[e + "r"].style.color = colours[colour[e]] }
function bang(e) { var t, n, r = 0; for (t = bits * e; t < bits + bits * e; t++) { n = stars[t].style; n.left = Xpos[t] + "px"; n.top = Ypos[t] + "px"; if (decay[t]) decay[t]--; else r++; if (decay[t] == 15) n.fontSize = "7px"; else if (decay[t] == 7) n.fontSize = "2px"; else if (decay[t] == 1) n.visibility = "hidden"; Xpos[t] += dX[t]; Ypos[t] += dY[t] += 1.25 / intensity[e] } if (r != bits) setTimeout("bang(" + e + ")", speed) }
function stepthrough(e) { var t, n, r; var i = Xpos[e + "r"]; var s = Ypos[e + "r"]; Xpos[e + "r"] += dX[e + "r"]; Ypos[e + "r"] -= 4; if (Ypos[e + "r"] < bangheight[e]) { n = Math.floor(Math.random() * 3 * colours.length); intensity[e] = 5 + Math.random() * 4; for (t = e * bits; t < bits + bits * e; t++) { Xpos[t] = Xpos[e + "r"]; Ypos[t] = Ypos[e + "r"]; dY[t] = (Math.random() - .5) * intensity[e]; dX[t] = (Math.random() - .5) * (intensity[e] - Math.abs(dY[t])) * 1.25; decay[t] = 16 + Math.floor(Math.random() * 16); r = stars[t]; if (n < colours.length) r.style.color = colours[t % 2 ? colour[e] : n]; else if (n < 2 * colours.length) r.style.color = colours[colour[e]]; else r.style.color = colours[t % colours.length]; r.style.fontSize = "13px"; r.style.visibility = "visible" } bang(e); launch(e) } stars[e + "r"].style.left = i + "px"; stars[e + "r"].style.top = s + "px" }
function set_width() { var e = 999999; var t = 999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth > 0) e = document.documentElement.clientWidth; if (document.documentElement.clientHeight > 0) t = document.documentElement.clientHeight } if (typeof self.innerWidth != "undefined" && self.innerWidth) { if (self.innerWidth > 0 && self.innerWidth < e) e = self.innerWidth; if (self.innerHeight > 0 && self.innerHeight < t) t = self.innerHeight } if (document.body.clientWidth) { if (document.body.clientWidth > 0 && document.body.clientWidth < e) e = document.body.clientWidth; if (document.body.clientHeight > 0 && document.body.clientHeight < t) t = document.body.clientHeight } if (e == 999999 || t == 999999) { e = 800; t = 600 } swide = e; shigh = t } var bits = 80; var speed = 32; var bangs = 5; var colours = new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c"); var bangheight = new Array; var intensity = new Array; var colour = new Array; var Xpos = new Array; var Ypos = new Array; var dX = new Array; var dY = new Array; var stars = new Array; var decay = new Array; var swide = 800; var shigh = 600; var boddie; function run_snow() { console.log('run'); if (document.getElementById) { var e; boddie = document.createElement("div"); boddie.id = 'div_snow'; boddie.style.position = "fixed"; boddie.style.top = "0px"; boddie.style.left = "0px"; boddie.style.overflow = "visible"; boddie.style.width = "1px"; boddie.style.height = "1px"; boddie.style.backgroundColor = "transparent"; document.body.appendChild(boddie); set_width(); for (e = 0; e < bangs; e++) { write_fire(e); launch(e); setInterval("stepthrough(" + e + ")", speed) } } } window.onresize = set_width(); run_snow();
и в html пример загрузки скрипта и удаления
Код <html> <head> <title>snow</title> </head> <body> <script> function loadSnow(){ let script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'snow.js'; document.getElementsByTagName('body')[0].appendChild(script); } function unloadSnow(){ let body = document.getElementsByTagName('body')[0]; let script = document.querySelector('script[src="snow.js"]'); body.removeChild(script); let div_snow = document.getElementById('div_snow'); body.removeChild(div_snow); } </script> <button onclick='loadSnow()'>Let it snow</button> <button onclick='unloadSnow()'>Now snow</button> </body> </html>
Разработка и продвижение сайтов. Дизайн
Сообщение отредактировал lvovand - Среда, 29 Ноября 2023, 07:48 |
|
| |
GameDev2 | Дата: Среда, 29 Ноября 2023, 16:25 | Сообщение # 9 |
почетный гость
Сейчас нет на сайте
| lvovand, спасибо большое за такой разбор кода - теперь проще. Подключил, работает.
|
|
| |
|