九宮格抽獎HTML+JS版

時間 2019-11-06

標籤九宮抽獎 html+js html 欄目 HTML 简体版

原文原文鏈接

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div{
    margin: 100px auto 0px; // 居中
    width:500px;
    height:250px;
    border:3px solid black; // 邊框
}
li{ 
    width:129px;
    height:59px; 
    border:3px solid  black; 
    float:left;   // 向左浮動
    margin:8px 0 0 8px; // 設置圖片間的間距
    list-style:none;
}
.btn{
     border:3px solid blue;  // 設置爲紅色邊框
    cursor:pointer;        // 設置光標類型爲指針  
}
.cur{
     border:3px solid red;  // 設置爲紅色邊框
}
</style>
<title>zhuanpan</title>
</head>
<body>
    <div>
        <ul>
            <li id="c1">1</li>
            <li id="c2">2</li>
            <li id="c3">3</li>
            <li id="c8">謝謝參與</li>
            <li class="btn" onclick="run();">點擊抽獎</li>
            <li id="c4">1</li>
            <li id="c7">2</li>
            <li id="c61">3</li>
            <li id="c51">謝謝參與</li>
        </ul>
    </div>
</body>
</html>

<script type="text/javascript" src="http://www.jiurong.com/public/2014_2/js/jquery.min.js?v=1.5.5.8.27"></script>
<script type="text/javascript">
// 整個轉動過程所需的步驟

var step = [
['c1',0],    // 第一個元素特殊設置
['c1', 500],
['c2', 100],
['c3', 300],
['c4', 200],
['c5', 200],
['c6', 200],
['c7', 200],
['c8', 200],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 200],
['c3', 300],
['c4', 300],
['c5', 300],
['c6', 300],
['c7', 300],
['c8', 300],
['c1', 400],
['c2', 400],
['c3', 400],
['c4', 400],
['c5', 400],
['c6', 400],
['c7', 400],
['c8', 400]
];

// 記錄當前步數，即step數組的下標
var current = 1;

// 設置樣式和從新設置定時器
function run(){
    // 刪除以前設置的cur類
    $('#'+step[current-1][0]).removeClass('cur');
    // 爲當前元素設置cur類
    $('#'+step[current][0]).addClass('cur');

    // 判斷step數組全部步驟是否已經走完
    if(current == step.length - 1){  

        alert(step[current][0]);
        window.location.reload();
    }else{
        // 從新設置定時器
        setTimeout('run()', step[current][1]);
        current++;
    }
}
</script>

1. 九宮格抽獎
2. JS九宮格抽獎
3. Android 九宮格抽獎
4. jq九宮格抽獎
5. 抽獎九宮格Demo
6. JS筆記：實現九宮格抽獎
7. jquery——九宮格大轉盤抽獎
8. 【javascript】九宮格抽獎組件設計
9. vue抽獎組件之九宮格
10. JavaScript實現基本九宮格抽獎
更多相關文章...
• MySQL的版本以及版本號 - MySQL教程
• jQuery Mobile 表格 - jQuery Mobile 教程
• RxJava操作符（九）Connectable Observable Operators
• IntelliJ IDEA代碼格式化設置

相關標籤/搜索

每日一句

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