實例之輪盤抽獎

時間 2019-11-18

標籤實例輪盤抽獎简体版

原文原文鏈接

如今學習到了過渡效果了，已經開始有作動畫效果的意識了，會實現一些比較炫的小玩意，css

一個網頁加入過渡動畫效果，會讓人看起來頗有美觀，不僵硬，有看頭，動畫是一個網頁html

美觀的主要體現之一，下面作個使用個過渡效果實現的抽獎例子。dom

先來效果圖：函數

這個的實現須要使用到一些js代碼。佈局

所需圖片：學習

這張圖是pointer.png的位置的。動畫

turntable-bg.jpg這張是背景圖，在背景位置。

這張是turntable.png位置的。

須要這三張圖片，若是要實現一下，直接另存這三圖片引入進去便可。若是不會請修改爲對應的圖片名字，放到同一個文件下。url

代碼：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽獎</title>
    <!-- 這裏是css部分 -->
    <style>
        #bg{
            width: 650px;
            height: 600px;
            margin: 0 auto;
            background: url(turntable-bg.jpg) no-repeat;
            position: relative;
        }
        img[src^="pointer"]{
            position: absolute;
            z-index: 10;
            top: 155px;
            left: 247px;
        }
        img[src^="turntable"]{
            position: absolute;
            z-index: 5;
            top: 60px;
            left: 116px;
            transition: all 4s;
        }
        
    </style>
</head>
<body>
<!-- 這裏是HTML結構部分 -->
    <div id="bg">
        <img src="pointer.png" alt="pointer">
        <img src="turntable.png" alt="turntable">
    </div>
    <!-- 這裏是js部分 -->
    <script>
        var oPointer=document.getElementsByTagName("img")[0];
        var oTurntable=document.getElementsByTagName("img")[1];
        var cat=51.4;
        var num=0;
        var offOn=true;
        document.title="";
        
        oPointer.onclick=function(){
            if(offOn){
            oTurntable.style.transform="rotate(0deg)";
            offOn=!offOn;
            ratating();
            }
        }

        function ratating(){
            var timer=null;
            var rdm=0;
            clearInterval(timer);
            timer=setInterval(function(){
                if(Math.floor(rdm/360)<3){
                    rdm=Math.floor(Math.random()*3600);    
                }else{
                    oTurntable.style.transform="rotate("+rdm+"deg)";
                    clearInterval(timer);
                    setTimeout(function(){
                        offOn=!offOn;
                        num=rdm%360;
                        if(num<=cat*1){
                        alert("4999元");
                        }else if(num<=cat*2){
                            alert("條50元");
                            }else if(num<=cat*3){
                            alert("10元");
                            }else if(num<=cat*4){
                            alert("5元");
                            }else if(num<=cat*5){
                            alert("免息服務");
                            }else if(num<=cat*6){
                            alert("提交白金");
                            }else if(num<=cat*7){
                            alert("未中獎");
                            }
                    },4000);
                }    
            },30);    
        }
    </script>
</body>
</html>

css和HTML代碼很少，主要是爲了實現過渡設置，還有爲了實現層疊而使用position定位，讓元素脫離文檔流，js代碼在於獲取元素和指針

事件的點擊，點擊指針會旋轉，因此要給指針加個點擊事件，而後是判斷旋轉是否中止，若是沒有就點擊也不能調用函數ratating()，這個

函數執行轉盤的旋轉和判斷指針停在什麼位置，而後彈出相應的內容，而函數裏實現旋轉的過程，是獲取轉盤的元素，而後使用js控制css

的屬性-transform：rotate()，咱們不是使用過這個屬性在css裏直接使它實現旋轉的效果嗎？就是和僞類選擇器:hover及過渡屬性一塊兒使

用去實現的，那麼由於css實現不了數字的運算和鼠標點擊，因此讓js去實現且控制css屬性，實現到點擊旋轉這個功能，然而定時器的使用

暫時不說，思路就是使用js實現數字的運算和鼠標的點擊及css屬性的控制達到旋轉的效果。

Math.random()是隨機數的生成，Math.floor()向下取整。

再來個今天某人說過的例子：

純css下拉菜單：

效果圖

這個的實現很簡單，主要是:hover和過渡屬性transition的使用。

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        *{
            margin: 0;
            padding:0;
            font-size: 16px;
            font-family: "微軟雅黑";
        }
        #container{
            width: 100px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }
        #container ul{
            list-style: none;
        }
        #container span{
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
        #container ul{
            height: 0;
            width: 100px;
            overflow: hidden;
            transition: all 1s;
            position: absolute;
            top: 30px;
            left: 0px;
        }
        #container:hover ul{
            height: 330px;
        } 
        #container ul li{
            background: #eee;
            margin-top: 3px;
            cursor: pointer;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div id="container">
        <span>移動</span>
        <ul>
            <li>這裏有1</li>
            <li>這裏有2</li>
            <li>這裏有3</li>
            <li>這裏有4</li>
            <li>這裏有5</li>
            <li>這裏有6</li>
            <li>這裏有7</li>
            <li>這裏有8</li>
            <li>這裏有9</li>
            <li>這裏有10</li>
        </ul>
    </div>
</body>
</html>

由於ul是個伸縮對象，因此要讓它脫離文檔流，不是在實用時會影響到佈局，給它一個絕對定位便可。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。