Изменение элемента const с текстовых символов на URL -адрес изображенияJavascript

Форум по Javascript
Ответить
Anonymous
 Изменение элемента const с текстовых символов на URL -адрес изображения

Сообщение Anonymous »

У меня есть этот кусочек JS, который в основном создает эффект игрового автомата. Он вращается между 1-12 и останавливается на одном из них случайным образом. Работает совершенно нормально. Но я бы предпочел изменить их на изображения, но я изо всех сил пытался выяснить это. Есть помощь? Я совсем не хорош в написании/редактировании jscript.
(function () {
const items = [
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
];
const doors = document.querySelectorAll('.door');

document.querySelector('#spinner').addEventListener('click', spin);
document.querySelector('#reseter').addEventListener('click', init);

function init(firstInit = true, groups = 1, duration = 1) {
for (const door of doors) {
if (firstInit) {
door.dataset.spinned = '0';
} else if (door.dataset.spinned === '1') {
return;
}

const boxes = door.querySelector('.boxes');
const boxesClone = boxes.cloneNode(false);
const pool = ['❓'];

if (!firstInit) {
const arr = [];
for (let n = 0; n < (groups > 0 ? groups : 1); n++) {
arr.push(...items);
}
pool.push(...shuffle(arr));

boxesClone.addEventListener(
'transitionstart',
function () {
door.dataset.spinned = '1';
this.querySelectorAll('.box').forEach((box) => {
box.style.filter = 'blur(1px)';
});
},
{ once: true }
);

boxesClone.addEventListener(
'transitionend',
function () {
this.querySelectorAll('.box').forEach((box, index) => {
box.style.filter = 'blur(0)';
if (index > 0) this.removeChild(box);
});
},
{ once: true }
);
}

for (let i = pool.length - 1; i >= 0; i--) {
const box = document.createElement('div');
box.classList.add('box');
box.style.width = door.clientWidth + 'px';
box.style.height = door.clientHeight + 'px';
box.textContent = pool;
boxesClone.appendChild(box);
}
boxesClone.style.transitionDuration = `${duration > 0 ? duration : 1}s`;
boxesClone.style.transform = `translateY(-${door.clientHeight * (pool.length - 1)}px)`;
door.replaceChild(boxesClone, boxes);
}
}

async function spin() {
init(false, 1, 2);

for (const door of doors) {
const boxes = door.querySelector('.boxes');
const duration = parseInt(boxes.style.transitionDuration);
boxes.style.transform = 'translateY(0)';
await new Promise((resolve) => setTimeout(resolve, duration * 100));
}
}

function shuffle([...arr]) {
let m = arr.length;
while (m) {
const i = Math.floor(Math.random() * m--);
[arr[m], arr] = [arr, arr[m]];
}
return arr;
}

init();
})();


Подробнее здесь: https://stackoverflow.com/questions/794 ... -image-url
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»