基于js的抽奖

抽奖活动的原理还是很简单的，通过代码一目了然，如果看不懂就私聊我，可以私下交流！

方法一：使用table写一个随机抽奖

这是html+js代码

    
    
    
    
    



    

        

            抽奖活动
        
        

            

                

                    
百度
                    
腾讯
                    
阿里
                    
京东
                    
华为
                
                

                    
滴滴
                    
蚂蚁金服
                    
乐视
                    
中国电网
                    
中石化
                
                

                    
美团
                    
乐视
                    
小米
                    
网易
                    
酷我
                
                

                    
爱奇艺
                    
盛大
                    
短文学
                    
浅墨诗韵
                    
浪子一秋
                
            
        
        

            
        
    

方法二：使用span标签写

html+js代码如下

    
    
    
    
    



    

        

            抽奖活动
        
        


        
        

            
        
    

两个页面的css代码

*{
    margin: 0;
    padding: 0;
}
body{
    display: block;
}
.content{
    width: 500px;
    margin: auto;
}
.top{
    text-align: center;
    height: 50px;
    color: red;
    font-size: 30px;

}
table{
    width: 100%;
    border: 1px solid red;
    border-spacing: 0;
}
th{
    border: 1px dashed rgb(189, 189, 86);
    height: 40px;
}
.bottom{
    height: 50px;
    margin-top: 20px;
    text-align: center;
}
.button{
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}


/* test2-1 */
.body{
    width: 512px;
    height: 260px;
    border: 1px solid red;
}
span{
    display: inline-block;
    width: 100px;
    height: 50px;
    border: 1px dashed #b1da1f;
    line-height: 50px;
    text-align: center;
}