Webサイトを弄り始めた最初期の頃は、HTML・CSSを本当に弄り倒してました。
JavaScriptも例外ではなく、HTML・CSSと同じく今考えるとしょーもない情熱の掛け方をWebサイトに向けていたような気がします。
1枚の画像からランダムに表示を切り替える（おみくじ風）JavaScript
1枚の長い画像を「のぞき窓」で見る仕組み
これに使用している画像は、5つの結果が縦に並んだ「長いフィルム」のような画像です。
ボタンを押すと、このフィルムを裏側で「0 / 64 / 128 / 192 / 256」ピクセル分だけシュッと上に動かして、窓から見える絵を切り替えています。
昔のゲーム機も、この「1枚の大きな画像から必要な部分だけを映し出す」という仕組みで動いていました。この方法なら、画像を何枚も用意する必要がなく、一瞬で表示を切り替えられるのがメリットです。
全てのコードを表示する（クリックで開閉）
<div class="centered-container">
<button class="circle-btn">ここをクリック</button>
<div class="viewer"></div>
</div>
<style>
.centered-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
margin-top: 50px;
}
.circle-btn {
width: 64px;
height: 64px;
border-radius: 50%;
border: none;
background-color: #007bff;
color: white;
font-size: 10px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.1s;
}
.circle-btn:active {
transform: scale(0.95);
}
.viewer {
width: 64px;
height: 64px;
border: 1px solid #ccc;
background-image: url('画像.png');
background-size: 64px 320px;
background-repeat: no-repeat;
}
</style>
<script>
const btn = document.querySelector('.circle-btn');
const display = document.querySelector('.viewer');
btn.addEventListener('click', () => {
const randomIndex = Math.floor(Math.random() * 5);
const offset = randomIndex * 64;
display.style.backgroundPosition = `0 -${offset}px`;
});
</script>
1〜30の中から重複せずに複数の数字を選ぶJavaScript
複数の数字をランダムに選ぶツール
1から30までの数字の中から、重複しないように6つの数字を自動で選び出すプログラムです。
当番決めや、グループ分けの番号選びなど、「公平に数字を決めたい時」に役立つ仕組みをシンプルに作っています。
選ばれた数字は見やすいように、自動的に小さい順に整列して表示されるようになっています。
今は1〜30にしていますが、数字を書き換えれば1〜100にもできます。
全てのコードを表示する（クリックで開閉）
<div class="centered-container2">
<button class="circle-btn2">ここをクリック</button>
<div class="result-area2"></div>
</div>
<style>
.centered-container2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
margin-top: 50px;
}
.circle-btn2 {
width: 64px;
height: 64px;
border-radius: 50%;
border: none;
background-color: #28a745;
color: white;
font-size: 10px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.1s;
}
.circle-btn2:active {
transform: scale(0.95);
}
.result-area2 {
margin-top: 10px;
font-size: 20px;
font-weight: bold;
letter-spacing: 5px;
color: #333;
min-height: 2.5em;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<script>
const actionBtn = document.querySelector('.circle-btn2');
const resultDisplay = document.querySelector('.result-area2');
actionBtn.addEventListener('click', () => {
const selectedNumbers = [];
// 1〜30の範囲に設定（ここを変えるだけでカスタマイズ可能）
const maxNumber = 30;
const numberPool = Array.from({length: maxNumber}, (_, i) => i + 1);
for (let i = 0; i < 6; i++) {
const randomIndex = Math.floor(Math.random() * numberPool.length);
selectedNumbers.push(numberPool.splice(randomIndex, 1));
}
selectedNumbers.sort((a, b) => a - b);
resultDisplay.textContent = selectedNumbers.join(' ');
});
</script>
1〜100の中からランダムに1つの数字を選ぶJavaScript
指定した範囲の中から、完全にランダムで1つの数字を選び出すプログラムです。
複雑な処理を省き、「ボタンを押すと数字が出る」という単機能に絞ることで、動作の軽さとコードの読みやすさを重視してます。
1から100という広い範囲に設定しているので、様々な場面での「ランダムな選択」にそのまま使えます。
全てのコードを表示する（クリックで開閉）
<div class="centered-container3">
<button class="circle-btn3">数字を選ぶ</button>
<div class="result-area3"></div>
</div>
<style>
.centered-container3 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
margin-top: 50px;
}
.circle-btn3 {
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: white;
font-size: 14px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.1s;
}
.circle-btn3:active {
transform: scale(0.95);
}
.result-area3 {
margin-top: 10px;
font-size: 32px;
font-weight: bold;
color: #333;
min-height: 2em;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<script>
const pickBtn = document.querySelector('.circle-btn3');
const pickDisplay = document.querySelector('.result-area3');
pickBtn.addEventListener('click', () => {
// 1から100の間でランダムに1つ選ぶ
const min = 1;
const max = 100;
const pickedNumber = Math.floor(Math.random() * (max - min + 1)) + min;
pickDisplay.textContent = pickedNumber;
});
</script>まとめ：JavaScriptを使った懐かしいギミック
これらのJavaScriptを使った仕組みを、昔はWebサイトの中で遊びの１つとして使っていました。
Webサイトの中でチャットが流行っていた時期がありましたが、ネトゲのチャットの様なものがWebサイトの中にコンテンツとしてあったのを覚えています。
その中で今回紹介したJavaScriptの仕組みをチャット利用者が使って遊んでいました。
その当時を振り返り、こんなのあったなと思い出し、ここに書き残します。
コメント