2021-02-11 11:54:45 +00:00
|
|
|
<!DOCTYPE html>
|
2018-06-27 01:00:55 +00:00
|
|
|
<style>
|
|
|
|
|
button {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#btn0 { right: 0px; top: 0; }
|
|
|
|
|
#btn1 { right: -10px; top: 25px; }
|
|
|
|
|
#btn2 { right: -20px; top: 50px; }
|
|
|
|
|
#btn3 { right: -30px; top: 75px; }
|
|
|
|
|
#btn4 { right: -40px; top: 100px; }
|
|
|
|
|
#btn5 { right: -50px; top: 125px; }
|
|
|
|
|
#btn6 { right: -60px; top: 150px; }
|
|
|
|
|
#btn7 { right: -70px; top: 175px; }
|
|
|
|
|
#btn8 { right: -80px; top: 200px; }
|
|
|
|
|
#btn9 { right: -90px; top: 225px; }
|
2018-07-12 04:04:36 +00:00
|
|
|
#btn10 { right: -100px; top: 250px; }
|
2021-09-15 20:56:50 +00:00
|
|
|
#btn11 { right: -99.999px; top: 275px; }
|
2018-06-27 01:00:55 +00:00
|
|
|
</style>
|
|
|
|
|
<button id=btn0>0</button>
|
|
|
|
|
<button id=btn1>1</button>
|
|
|
|
|
<button id=btn2>2</button>
|
|
|
|
|
<button id=btn3>3</button>
|
|
|
|
|
<button id=btn4>4</button>
|
|
|
|
|
<button id=btn5>5</button>
|
|
|
|
|
<button id=btn6>6</button>
|
|
|
|
|
<button id=btn7>7</button>
|
|
|
|
|
<button id=btn8>8</button>
|
|
|
|
|
<button id=btn9>9</button>
|
2018-07-12 04:04:36 +00:00
|
|
|
<button id=btn10>10</button>
|
2021-09-15 20:56:50 +00:00
|
|
|
<button id=btn11>11</button>
|
2018-06-27 01:00:55 +00:00
|
|
|
<script>
|
2021-02-11 11:54:45 +00:00
|
|
|
for (const button of document.querySelectorAll('button')) {
|
|
|
|
|
button.addEventListener('click', () => {
|
|
|
|
|
console.log(`button #${button.textContent} clicked`);
|
|
|
|
|
});
|
|
|
|
|
}
|
2018-06-27 01:00:55 +00:00
|
|
|
</script>
|
