js实现抽奖的两种方法

本文实例为大家分享了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; 
 border: none;
 color: white;
 padding: 15px 32px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
}
 
 

.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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。