|
Как 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, спасибо большое за такой разбор кода - теперь проще. Подключил, работает.
|
|
|
| |
|
