欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)抽獎(jiǎng)器效果

 更新時(shí)間：2021年10月26日 10:58:03   作者：wait......  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)抽獎(jiǎng)器效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)抽獎(jiǎng)器效果的具體代碼，供大家參考，具體內(nèi)容如下

這次實(shí)現(xiàn)的效果如下圖：

所實(shí)現(xiàn)的功能是：當(dāng)每次點(diǎn)擊中間的抽獎(jiǎng)按鈕時(shí)，會(huì)隨機(jī)選擇一個(gè)盒子作為抽獎(jiǎng)的結(jié)果。

那我們要如何實(shí)現(xiàn)抽獎(jiǎng)的功能呢？

其實(shí)很簡(jiǎn)單，首先用html和css做出整體的框架，然后用js在中間按鈕的onclick函數(shù)中設(shè)置定時(shí)器+隨機(jī)改變某一盒子的背景顏色就可以了。 下面我們來(lái)討論一下細(xì)節(jié)的方面：

1、設(shè)計(jì)整體框架時(shí)，我們需要為每個(gè)盒子設(shè)置邊框，這時(shí)會(huì)發(fā)現(xiàn)邊框會(huì)出現(xiàn)重疊問(wèn)題，導(dǎo)致邊框變厚，解決的方法是：設(shè)置margin-right和margin-bottom為負(fù)值（值等于邊框值）。

2、.在js中設(shè)置抽獎(jiǎng)功能時(shí)，我們可以通過(guò)設(shè)置一個(gè)定時(shí)器A，在其中隨機(jī)改變某一盒子的background-color代表選中。為使抽獎(jiǎng)可以在某一時(shí)刻暫停，我們可以設(shè)置定時(shí)器B，在某一時(shí)刻將定時(shí)器A關(guān)閉。

3、隨機(jī)改變是怎么做到的呢？ 首先調(diào)用document.getElementsByTagName獲取所有盒子，然后利用Math.random()*盒子的數(shù)目，獲取某一盒子下標(biāo)，改變其背景顏色。

很顯然定時(shí)器A是setInterval，定時(shí)器B是setTimeout。

而且在A中改變某一盒子背景顏色時(shí)，要將上一個(gè)被改變顏色的盒子還原為原來(lái)的顏色，我們需要記錄上次被改變背景顏色的盒子。

具體見(jiàn)下面代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .container{
            width: 400px;
            height: 400px;
            margin:50px auto;
        }
        span,#main{
            display: block;
            width: 100px;
            height: 100px;
            border:2px pink solid;
            float:left;
            margin-left:-2px;
            margin-bottom:-2px;
            text-align: center;
            line-height: 100px;
            border-radius: 16px;
            box-shadow: 2px 2px 3px rgba(226, 86, 109, 0.459);
        }
        #main{
            background-color: rgba(243, 97, 126, 0.651);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <span>可視化</span>
            <span>圖形學(xué)</span>
            <span>操作系統(tǒng)</span>
        </div>
        <div>
            <span>樂(lè)事</span>
            <div id="main">抽獎(jiǎng)</div>
            <span>大白兔</span>
        </div>
        <div>
            <span>檸檬水</span>
            <span>黑咖啡</span>
            <span>芋泥奶茶</span>
        </div>
    </div>
    <script>
        let main=document.getElementById("main");
        let box=document.getElementsByTagName("span");
        var num=null;
        main.onclick=function(){
            let tem=setInterval(() => {
                if(num!==null){
                    box[num].style.backgroundColor="white";
                }
                num=parseInt(Math.random()*8);
                box[num].style.backgroundColor="rgba(243, 97, 126, 0.651)";
                console.log(num);
            }, 120);

            setTimeout(() => {
                clearInterval(tem)
            }, 3000);
        }
    </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論