JQuery练习题

最新推荐文章于 2024-06-27 10:30:00 发布

rong_code

最新推荐文章于 2024-06-27 10:30:00 发布

阅读量4.2k

点赞数 2

文章标签： JAVA框架

本文链接：https://blog.csdn.net/zhang__rong/article/details/84672964

版权

1.抽奖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.3.1.js"></script>
    <style>
        ul{ width:328px;}
        li {
            width: 100px;
            height: 100px;
            border: 1px #000 solid;
            float: left;
            margin-left: 5px;
            list-style: none;
        }
        .active{ background:red;}
    </style>
  <script>
      var timerId=0
      var index=0
      $(function () {
          $('input').click(function () {
              var step=25+(Math.floor(Math.random())*20)
              timerId=setInterval(function () {
                  $('li').addClass('active').eq(index%9).siblings().removeClass('active')
                  index++;
                  step--;
                  if(step==0){
                      clearInterval(timerId)
                      var text=$('.active').text()
                      $('div').text("恭喜您"+text)
                  }
              },200)
          })
      })


  </script>
</head>
<body>
<input type="button" value="抽奖">

<ul>
    <li>1等奖</li>
    <li>2等奖</li>
    <li>3等奖</li>
    <li>4等奖</li>
    <

最低0.47元/天解锁文章

rong_code

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JQuery练习题

1.抽奖&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="../jquery-3.3.1.js"&a
复制链接

扫一扫