html5转盘抽奖源码_html5抽奖转盘代码,h5抽奖页面源码资源-CSDN文库

共37个文件

png：17个

js：4个

xml：4个

需积分: 50 81 浏览量 2017-06-21 14:44:20 上传评论收藏 452KB ZIP 举报

HTML5是下一代网页标准，它提供了许多增强网页交互性和表现力的新特性，使得开发者能够创建出更加生动、富有动态效果的网页应用。在这个"html5 转盘抽奖源码"项目中，开发者利用HTML5的特性，结合jQuery库，构建了一个互动式的转盘抽奖功能，适用于手机端，为用户带来独特的参与体验。让我们了解一下HTML5在其中发挥的作用。HTML5引入了新的元素，如`<canvas>`，它是一个画布元素，允许通过JavaScript进行图形绘制。在这个转盘抽奖中，`<canvas>`可能被用来绘制转盘的背景、指针、奖品区域等，通过JavaScript控制转盘的旋转和停止，模拟真实的抽奖过程。此外，HTML5还支持离线存储（localStorage或sessionStorage），可以用来保存用户的抽奖记录或者设置，使得用户在离线状态下也能查看或参与抽奖。接下来是jQuery，这是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画效果和Ajax交互。在转盘抽奖中，jQuery可能用于绑定事件（如点击按钮启动抽奖）、选择和操作DOM元素（如显示或隐藏抽奖结果）、以及实现平滑的动画效果（如转盘旋转）。jQuery的动画函数如`animate()`可以轻松控制转盘的旋转速度和停止位置，增强了用户体验。在移动设备上，HTML5的响应式设计和触屏事件支持也非常重要。通过使用媒体查询（media queries）和CSS3的Flexbox或Grid布局，可以确保转盘在不同屏幕尺寸的手机上都能正常显示和操作。同时，HTML5的触屏事件（如`touchstart`, `touchmove`, `touchend`）可以捕捉用户的滑动或点击行为，使得在手机上也能流畅地进行抽奖。关于压缩包内的"转盘抽奖"文件，这很可能包含了整个项目的源代码，包括HTML文件、CSS样式表和JavaScript脚本。HTML文件负责结构和内容，CSS文件用于定义样式和布局，而JavaScript文件则包含实现抽奖逻辑的代码。开发者可能还会使用版本控制工具（如Git）来管理代码，以及打包工具（如Webpack）来优化和合并资源，提高页面加载速度。这个"html5 转盘抽奖源码"项目展示了HTML5、jQuery以及现代前端开发技术如何结合起来，创造出一个既美观又互动的手机抽奖应用。通过分析和理解这些源码，开发者不仅可以学习到网页动态效果的实现，还可以掌握移动端适配和性能优化的方法。

资源推荐

资源详情

资源评论

收起资源包目录

转盘抽奖.zip （37个子文件）

转盘抽奖

getprize.html 2KB

images

lijichoujiang.png 6KB

prizebg.png 4KB

wx.png 5KB

zhiyin.png 1KB

close.png 2KB

diologbtn.png 1KB

jiantou.png 7KB

yiwen.png 1KB

zhuanpany.png 2KB

zpbg.png 85KB

fxbtn.png 2KB

zhuanpan.png 40KB

guzbg.png 1KB

bg.png 104KB

wb.png 3KB

diologbg.png 9KB

zhuanpand.png 125KB

lottery.html 5KB

lottery.js 10KB

jquery-1.8.3.min.js 91KB

jquery.rotate.min.js 7KB

fontsize.js 1KB

lottery.js.bak 10KB

css

myprize.css 2KB

base.css 1KB

lottery.css 5KB

.idea

misc.xml 599B

workspace.xml 27KB

vcs.xml 164B

.name 13B

lottery抽奖.iml 281B

modules.xml 278B

recode.html 4KB

后台jsp

lottery.jsp 2KB

getLotteryNum.jsp 3KB

recodeList.jsp 591B

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/lottery.css"> <script type="text/javascript" src="js/fontsize.js"></script> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.rotate.min.js"></script> <script type="text/javascript" src="js/lottery.js"></script> </head> <body>  <div class="lottery"> <p class="jihui">你有<span id="num">100 </span>次抽奖机会</p> <div class="choujiang"> <img src="images/zhuanpan.png">  <a id="plateBtn" href="javascript:" title=""></a>  <div id="lijichou"><img src="images/lijichoujiang.png"></div>  </div> <a class="sharebtn">分享再抽一次</a> <a class="myprize">我的奖品</a> <div class="zhiyin"><img src="images/zhiyin.png"></div> </div>  <div class="prize-list"> <div class="prize-info"> <span>手机号</span><span>奖品</span> </div> <div class="maquee"> <ul> <li> <span>154**88</span> <span>现金5元</span> </li> <li> <span>6161***034</span> <span>现金10元</span> </li> <li> <span>2349***224</span> <span>现金10元</span> </li> <li> <span>154**88</span> <span>现金5元</span> </li> <li> <span>6161***034</span> <span>现金10元</span> </li> <li> <span>2349***224</span> <span>现金10元</span> </li> </ul> </div> <div class="prize-title">获奖名单</div> </div>  <div class="prize-rule"> <div class="prize-title rule-title">活动规则</div> <p>1. 本活动仅适用于下载2.1版本及以上版本的<br/>     用户参与；</p> <p>2. 抽奖资格：在活动期间每日登录男衣库app<br/>     即可参与抽奖，分享至微博或朋友圈可增加<br/>     抽奖次数一次，每个用户每天最多三次抽奖<br/>     机会； </p> <p>3. 现金红包采用支付宝转账形式发放，中奖现<br/>     金将在活动结束后7个工作日内下发； </p> <p>4. 实物奖品请在我的奖品内登记收货地址，活<br/>     动结束后7个工作日内下发； </p> <p>5. 抽奖过程中若遇到手机网络异常情况，请<br/>     以“我的奖品”中显示的奖品为准； </p> <p>6. 本活动与苹果公司无关，最终解释权归男衣<br/>     库APP所有（ios显示） </p> <p>7. 客服：请微博联系@男衣库</p> </div>  <div class="dialogbg"></div>  <div class="prize-diologimg" id="prize-diologsy"> <h2>恭喜中奖啦</h2> <span>获得10元奖金</span> <p>颜值高果然不一样呀~</p> <a class="btn" id="getprizesybtn">去领奖</a> </div>  <div class="prize-diologimg" id="prize-diologwy"> <h2>恭喜中奖啦</h2> <span>获得5元奖金</span> <p>颜值高果然不一样呀~</p> <a class="btn" id="getprizewybtn">去领奖</a> </div>  <div class="getprize-diolog"> <p>领钱啦，请填写支付宝账号，坐等收红包~</p> <input type="text" value="请输入支付宝账号"> <div class="paybtn"> <a class="btn" id="surebtn">确定</a> <a class="btn" id="abandon">不要啦</a> </div> </div>  <div class="prize-diologimg" id="noprize-diolog"> <h2>很遗憾</h2> <span>没抽中</span> <p>送你一个么么哒~</p> <a class="btn">朕知道了</a> </div>  <div class="prize-diologimg" id="sharediolog"> <h2>分享到</h2> <div class="shareimg"> <a id="blog" onclick="sendInfoToJava('wb')"><img src="images/wb.png"></a> <a id="wechat" onclick="sendInfoToJava('wx')"><img src="images/wx.png"></a> </div> <p class="fxtxt">每天分享到微博和朋友圈，分别可以增加<br/> 一次抽奖机会噢~</p> <a class="btn" id="cancelbtn">取消</a> </div>  </body> </html>

评论收藏

内容反馈