css抽奖特效

最新推荐文章于 2024-05-11 17:08:08 发布

m0_52434369

最新推荐文章于 2024-05-11 17:08:08 发布

阅读量714

点赞数

文章标签： js html css3 javascript

本文链接：https://blog.csdn.net/m0_52434369/article/details/118422689

版权

用css实现的抽奖特效，可以直接复制看效果哟，快来试试吧！



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
     button{color:red;
     font-size: 40px;
     margin-left: 50px;}
     #aa{
         width:316px;
         height: 316px;
         /* border: 1px solid red; */
     }
     #aa>div{
         width:100px;
         height: 100px;
          border: 1px solid rgb(252, 19, 19); 
         text-align:center;
         float: left;
         background-color: rgb(204, 200, 200);
         font-size: 50px;
     }
     div{
         line-height: 100px;
   
     }
     
     div:nth-child(5){
         background-color:rgb(241, 131, 6)
     }
 </style>
</head>
<body>
    <div id="aa">
        <div class="nn">1</div>
        <div class="nn">2</div>
        <div class="nn">3</div>
        <div class="nn">4</div>
        <div class="nn">5</div>
        <div class="nn">6</div>
        <div class="nn">7</div>
        <div class="nn">8</div>
        <div class="nn">9</div>
    </div>
    <br>
     <button>开始抽奖</button>
    
</body>
<script>
    var button=document.querySelector("button");
    var div=document.getElementsByClassName("nn")
    button.addEventListener("click",function(){
           var zhang=setInterval(function(){
               var color=['red','blue','yellow','gray','aqua','rebeccapurple',
               'salmon','royalblue','red'];
                var a=Math.round(Math.random()*(8-0)+0);
            for(var i=0;i<div.length;i++)
            {
                div[i].style.backgroundColor='rgb(204, 200, 200)';
            }
               div[a].style.backgroundColor=color[a];
            },100);  
            setTimeout(function(){
                clearInterval(zhang);
           },2000);
        
        })


</script>
</html>

m0_52434369

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css抽奖特效

用css实现的抽奖特效，可以直接复制看效果哟，快来试试吧！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&g
复制链接

扫一扫

css抽奖特效

“相关推荐”对你有帮助么？