绵阳梓潼网站制作公司

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://myzitong.com/article/ppejjg.html

其他资讯