Понедельник, 11 Ноября 2024, 07:03

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Как 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, спасибо большое за такой разбор кода - теперь проще. Подключил, работает.
  • Страница 1 из 1
  • 1
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг