Ändern des Const -Elements von Textzeichen zu Bild -URL
Posted: 24 Feb 2025, 03:18
Ich habe dieses Stück JS, das im Grunde genommen einen Spielautomateneffekt erzeugt. Es dreht sich zwischen 1-12 und stoppt zufällig auf einem von ihnen. Funktioniert vollkommen in Ordnung. Aber ich würde es vorziehen, diese in Bilder zu ändern, aber ich habe mich bemüht, das herauszufinden. Irgendwelche Hilfe? Ich bin überhaupt nicht gut darin, Jscript zu schreiben/zu bearbeiten.
Code: Select all
(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[i];
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[i]] = [arr[i], arr[m]];
}
return arr;
}
init();
})();