jQuery实现简单的抽奖游戏

今天要写的是,利用jQuery写一个抽奖的案例,页面包含四个组件,两个按钮分别是开始和停止的按钮。两个box,分别盛放人员和奖品。当点击开始按钮时,人员不停地进行切换。抽奖的box中显示等待抽奖结果。当按下停止按钮时,两个盒子分别显示人员名,和所中的奖品。

成都创新互联公司是一家专业提供顺河企业网站建设,专注与网站设计制作、成都做网站H5网站设计、小程序制作等业务。10年已为顺河众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

页面的效果图如下:

jQuery实现简单的抽奖游戏

可能页面没有那么好看。我们主要实现的是功能

首先在body中定义组件





再进行样式设置:

css代码:



接下来就是写函数了。在这里我引用的是”http://libs.baidu.com/jquery/1.9.0/jquery.js“;的jQuery库。


这个案例比较简单,所以就不赘述了,下面附上最后的效果图:

这个是点击了开始按钮之后,人员名进行快速的切换中:

jQuery实现简单的抽奖游戏

下面这个是点击了停止按钮的最终中奖人员和对应的奖品

jQuery实现简单的抽奖游戏

jQuery实现简单的抽奖游戏

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


网站标题:jQuery实现简单的抽奖游戏
标题URL:http://bzwzjz.com/article/gjdohd.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 网站设计公司 成都网站设计 手机网站制作 成都网站建设公司 外贸营销网站建设 响应式网站设计方案 网站建设开发 成都网站建设 成都网站设计 营销型网站建设 响应式网站设计 上市集团网站建设 网站制作公司 成都响应式网站建设 成都商城网站制作 成都定制网站建设 营销型网站建设 企业网站设计 企业网站设计 高端网站设计推广 成都网站建设 成都网站建设