九宫格抽奖HTML+JS版

<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>

posted @ 2015-08-25 14:43 王翔(kingfly) 阅读(3976) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

九宫格抽奖HTML+JS版

最新随笔

积分与排名

随笔分类 (191)

最新评论