隨機數抽獎是網站中常見的一種游戲,也是一種很好的互動形式。在實現這種功能時,CSS可以發揮很大的作用。下面將介紹如何使用CSS實現隨機數抽獎功能。
/* 抽獎框的樣式 */ #lottery { width: 200px; height: 200px; border: 2px solid #ccc; position: relative; } /* 抽獎結果的樣式 */ #result { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; font-weight: bold; } /* 抽獎按鈕的樣式 */ #btn { display: block; width: 100px; height: 40px; margin: 20px auto; background-color: #f00; color: #fff; text-align: center; line-height: 40px; border-radius: 5px; } /* 使用JavaScript生成隨機數 */ function randomNum(min,max){ return Math.floor(Math.random()*(max-min+1)+min); } /* 點擊按鈕時觸發抽獎 */ document.getElementById('btn').addEventListener('click',function(){ var num = randomNum(1,100); document.getElementById('result').innerHTML = num; });
在上面的代碼中,我們使用了CSS來美化抽獎框和抽獎結果的樣式。抽獎按鈕的樣式也是通過CSS設置的。生成隨機數的函數是通過JavaScript編寫的。當點擊按鈕時,生成一個1-100之間的隨機數,并將結果顯示在抽獎框中。