Mövzu - İşinə yarayan işlədər))

Şərhlər 6

Əməliyyatlar

[code=html]<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Access Code Keypad</title>
< src="https://cdn.tailwindcss.com"></>
<style>
body {
background-color: black;
}
.keypad {
width: 320px;
margin: 100px auto;
padding: 20px;
background-color: #333;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
text-align: center;
}
.display {
background-color: #0a0;
color: #0f0;
font-family: 'Courier New', Courier, monospace;
font-size: 1.5rem;
text-align: center;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
min-height: 40px;
}
.keypad button {
width: 60px;
height: 60px;
margin: 5px;
font-size: 1.5rem;
border-radius: 5px;
background: linear-gradient(to bottom, #666, #333);
color: #fff;
border: none;
box-shadow: 0 5px #222;
}
.keypad button:active {
box-shadow: 0 2px #222;
transform: translateY(3px);
}
.keypad .backspace {
background: linear-gradient(to bottom, #900, #600);
}
.keypad .ok {
background: linear-gradient(to bottom, #090, #060);
}
.paste {
background: linear-gradient(to bottom, #007acc, #005faa);
width: 100%;
height: 50px;
}
</style>
</head>
<body>
<div class="keypad">
<div class="display">
<p>Access code:</p>
<p id="code-display">xx-xx-xx-xx-xx-xx</p>
</div>
<button class="paste">????</button>
<div class="grid grid-cols-3 gap-2 mt-2">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="backspace">⌫</button>
<button>0</button>
<button class="ok">OK</button>
</div>
</div>
<>
const display = .getElementById('code-display');
const pasteButton = .querySelector('.paste');
const buttons = .querySelectorAll('.keypad button');
let codeArray = ['x', 'x', '-', 'x', 'x', '-', 'x', 'x', '-', 'x', 'x', '-', 'x', 'x', '-', 'x', 'x'];

function updateDisplay() {
display.textContent = codeArray.join('');
}

buttons.forEach(button => {
button.addEventListener('click', () => {
if (button.classList.contains('ok')) {
if (!codeArray.includes('x')) {
('Daxil edilən kod: ' + codeArray.join(''));
} else {
('Zəhmət olmasa, bütün rəqəmləri daxil edin.');
}
} else if (button.classList.contains('backspace')) {
for (let i = codeArray.length - 1; i >= 0; i--) {
if (!isNaN(codeArray[i])) {
codeArray[i] = 'x';
break;
}
}
} else if (!isNaN(button.textContent)) {
for (let i = 0; i < codeArray.length; i++) {
if (codeArray[i] === 'x') {
codeArray[i] = button.textContent;
break;
}
}
}
updateDisplay();
});
});

pasteButton.addEventListener('click', async () => {
try {
const text = await navigator.clipboard.readText();
const regex = /^d{2}-d{2}-d{2}-d{2}-d{2}-d{2}$/;

if (regex.test(text)) {
codeArray = text.split('');
updateDisplay();
} else {
('Clipboard-da düzgün formatda kod tapılmadı!');
}
} catch (err) {
('Clipboard-dan oxumağa icazə yoxdur.');
}
});

updateDisplay();
</>
</body>
</html>
//chadfdfdfdt.zip[/code]

22 Fev 2025, 11:55

Bağışlayın, sizin üçün şərh yazmaq əlçatan deyil

Geriyə

Onlayn istifadəçilər

Maraqlı bloqlar