jquery.rotate.js怎么实现可选抽奖次数和中奖内容的转盘抽奖

这篇文章主要介绍了jquery.rotate.js怎么实现可选抽奖次数和中奖内容的转盘抽奖,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

公司专注于为企业提供网站制作、做网站、微信公众号开发、成都商城网站开发,成都小程序开发,软件定制网站设计等一站式互联网企业服务。凭借多年丰富的经验,我们会仔细了解各客户的需求而做出多方面的分析、设计、整合,为客户设计出具风格及创意性的商业解决方案,创新互联更提供一系列网站制作和网站推广的服务。

js有什么特点

1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。

需求:

最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路)。

效果如下:

jquery.rotate.js怎么实现可选抽奖次数和中奖内容的转盘抽奖

一、页面结构:


  
    
      

您已拥有次抽奖机会,点击立刻抽奖!~

                        
               
    
  

标签h3为提示内容,.playnum是剩余抽奖次数,.g-lottery-img是最外层的闪灯,.g-lottery-img是转动的内容,.playbtn是点击抽奖按钮。

这里用的是jquery.rotate.js,所以要引入jquery然后引入jquery.rotate.js,百度一下很简单的,没几个AIP。

jquery.rotate.js怎么实现可选抽奖次数和中奖内容的转盘抽奖

二、简单的样式:

样式就定一下高度,居中一下,显示一下背景图片

三、JS代码:

说到底就是用一个1~6的随机数,然后把对应的角度值传给jquery.rotate.js,它就会转到相应的地方,最后做一下对应剩余次数的判断和修改。

最后所有代码为:




  
  抽奖
  
  
  
  
  



  
    
      

您已拥有次抽奖机会,点击立刻抽奖!~

                                                

所需要的图片(这里好像上传不了压缩文件,所以不能整个打包上传了):

#复制下面的图片名称-鼠标移到图片上-右键-图片另存为-粘贴保存#

1.最外面的闪灯:ly-plate-c.gif

jquery.rotate.js怎么实现可选抽奖次数和中奖内容的转盘抽奖

2.六个中奖内容:bg-lottery.png

jquery.rotate.js怎么实现可选抽奖次数和中奖内容的转盘抽奖

3.点击抽奖按钮: playbtn.png

jquery.rotate.js怎么实现可选抽奖次数和中奖内容的转盘抽奖

感谢你能够认真阅读完这篇文章,希望小编分享的“jquery.rotate.js怎么实现可选抽奖次数和中奖内容的转盘抽奖”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


本文名称:jquery.rotate.js怎么实现可选抽奖次数和中奖内容的转盘抽奖
网站链接:http://bzwzjz.com/article/pohsih.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站制作 成都网站建设 响应式网站设计 成都网站设计 成都网站设计 品牌网站建设 成都商城网站建设 成都营销网站制作 成都企业网站设计 重庆企业网站建设 梓潼网站设计 重庆网站建设 成都网站建设 攀枝花网站设计 手机网站设计 成都模版网站建设 定制网站建设 重庆企业网站建设 成都企业网站制作 手机网站制作 定制级高端网站建设 成都网站建设