js实现抽奖的两种方法

本文实例为大家分享了js实现抽奖的具体代码，供大家参考，具体内容如下

专注于为中小企业提供成都网站设计、成都网站制作、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业武川免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

方法一：使用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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

名称栏目：js实现抽奖的两种方法
文章地址：http://cqcxhl.com/article/ppejjg.html

重庆分公司，新征程启航

js实现抽奖的两种方法

其他资讯