网站建设资讯

NEWS

网站建设资讯

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://cdweb.net/article/ppejjg.html