隨機抽獎頁面js

時間  2020-06-22
標籤 隨機 抽獎 頁面 欄目 JavaScript 简体版
原文   原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>html

<meta charset="UTF-8">
<title>年會抽獎</title>
<style>
    ul,li{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .luckbox{
        width: 540px;
    }
    .luckbox ul{
        overflow: hidden;
    }
    .luckbox .item{
        width: 50px;
        height: 50px;
        background: red;
        margin: 5px;
        float: left;
    }
    .luckbox .item.active{
        background: green;
    }
</style>
 <script src="js/jquery-1.9.1.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>jquery

<div class="luckbox" id="luckbox">
    <ul id="name">
        <li class="item active" ></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

<script>
    var times = 0;
    var cle = null;
    $(function(){
        document.onkeydown = function()
        {
            times = times+1;
            //console.log(times);
            //奇數
            time();
        };
    /**
     * 改變樣式
     */
    function add()
    {
        var num = $("#name").find('li').length;
        var nu = Math.floor(Math.random()*num);
        $(".item").removeClass('active');
        $("#name li").eq(nu).addClass('active');
    }

    /**
     * 遞歸判斷
     */
    function time()
    {
        //奇數
        if((times%2==0))
        {
            clearTimeout(cle); //清楚定時器
            //這裏去獲取隨機選中的值
            console.log('helo');
            alert('helo');
            return false;
        }
        add();
        cle = setTimeout(time,100)
    }
    });
</script>
<!-- <script src="js/js.js"></script> -->

</body>
</html>app

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程