h5手机端签到demo_html签到资源-CSDN文库

共57个文件

png：18个

css：9个

js：7个

签到手机h5

5星 · 超过95%的资源需积分: 44 130 浏览量 2017-08-03 09:37:22 上传评论 12 收藏 1.17MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML手机签到转盘抽奖页面模板.zip （57个子文件）

HTML手机签到转盘抽奖页面模板

index2.html 7KB

index.html 6KB

images

qdCanlendar.png 32KB

qdbanner.png 72KB

turnplate-pointer.png 3KB

turbanner.png 63KB

qiandao_sprits.png 16KB

turshadow2.png 2KB

dou.png 7KB

qdCanbg.png 41KB

qiandao_day.png 16KB

qiandao_icon.png 2KB

turbg.png 52KB

calenbg.jpg 121KB

qiandao_warp_bg.jpg 63KB

turshadow1.png 13KB

qiandao_banner.jpg 123KB

turnplate-bg.png 5KB

1.png 498B

2.png 754B

gift.png 59KB

Thumbs.db 68KB

qdBanner.jpg 123KB

qiandao_con.jpg 31KB

btn-qiandao.png 5KB

qiandtip.png 12KB

myPrizeList.html 3KB

turnlate.html 10KB

awardRotate.js 11KB

qiandao_js.js 3KB

jquery-1.10.2.min.js 92KB

calendar.js 5KB

calendar.html 7KB

日历.html 3KB

css

qiandao_style.css 6KB

bootstrap3

npm.js 496B

bootstrap.js 67KB

bootstrap.min.js 35KB

iconfont

ux_1445245506_502856

iconfont.svg 3KB

demo.css 0B

iconfont.woff 3KB

iconfont.eot 6KB

iconfont.ttf 5KB

iconfont.css 706B

fonts

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.woff 23KB

css

bootstrap-theme.css.map 42KB

bootstrap.min.css 114KB

bootstrap-theme.min.css 19KB

bootstrap-theme.css 23KB

bootstrap.css.map 371KB

bootstrap.css 145KB

style2.css 9KB

style.css 9KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>大转盘活动</title> <link rel="stylesheet" href="css/bootstrap3/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="turbg"> <img src="images/turbanner.png" class="img-responsive"> <img src="images/1.png" id="shan-img" style="display:none;" /> <img src="images/2.png" id="sorry-img" style="display:none;" /> <div class="banner"> <div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%;"> <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas> <img class="pointer" src="images/turnplate-pointer.png"/> </div> </div> <div class=""> <img src="images/turshadow1.png" class="img-responsive" style="position:relative;top:-5px;"> <img src="images/turshadow2.png" class="img-responsive" style="position:relative;bottom:-5px;"> </div> </div> <div class="pt10lr10 mt20"> <div class="pline"></div> <div class="prizebox"> <div class="ptitle"><strong>中奖榜单</strong><span class="pull-right font12">累计<span class="text-red">58</span>人中奖</span></div> <div class="prizelistwrap" id="demo" style="position:relative;"> <div class="prizelist" id="demo1"> <div class="clearfix pb10"> <div class="col-xs-4 clearPadding text-red">15690843819</div> <div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div> <div class="col-xs-2 clearPadding">18:55:30</div> </div> <div class="clearfix pb10"> <div class="col-xs-4 clearPadding text-red">15690843819</div> <div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div> <div class="col-xs-2 clearPadding">18:55:30</div> </div> <div class="clearfix pb10"> <div class="col-xs-4 clearPadding text-red">15690843819</div> <div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div> <div class="col-xs-2 clearPadding">18:55:30</div> </div> <div class="clearfix pb10"> <div class="col-xs-4 clearPadding text-red">15690843819</div> <div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div> <div class="col-xs-2 clearPadding">18:55:30</div> </div> <div class="clearfix pb10"> <div class="col-xs-4 clearPadding text-red">15690843819</div> <div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div> <div class="col-xs-2 clearPadding">18:55:30</div> </div> <div class="clearfix pb10"> <div class="col-xs-4 clearPadding text-red">15690843819</div> <div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div> <div class="col-xs-2 clearPadding">18:55:30</div> </div> </div> <div class="prizelist" id="demo2"></div> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/awardRotate.js"></script> <script type="text/javascript"> var speed=40; var demo=document.getElementById("demo"); var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); demo2.innerHTML=demo1.innerHTML; function Marquee(){ if(demo2.offsetTop-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight; else{ demo.scrollTop++; } } console.log(demo.scrollTop); MyMar=setInterval(Marquee,speed) var turnplate={ restaraunts:[], //大转盘奖品名称 colors:[], //大转盘奖品区块对应背景颜色 outsideRadius:192, //大转盘外圆的半径 textRadius:155, //大转盘奖品位置距离圆心的距离 insideRadius:68, //大转盘内圆的半径 startAngle:0, //开始角度 bRotate:false //false:停止;ture:旋转 }; $(document).ready(function(){ //动态添加大转盘的奖品与奖品区域背景颜色 turnplate.restaraunts = ["50M免费流量包", "10闪币", "谢谢参与", "5闪币", "10M免费流量包", "20M免费流量包", "20闪币 ", "30M免费流量包", "100M免费流量包", "2闪币"]; turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"]; var rotateTimeOut = function (){ $('#wheelcanvas').rotate({ angle:0, animateTo:2160, duration:8000, callback:function (){ alert('网络超时，请检查您的网络设置！'); } }); }; //旋转转盘 item:奖品位置; txt：提示语; var rotateFn = function (item, txt){ var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2)); if(angles<270){ angles = 270 - angles; }else{ angles = 360 - angles + 270; } $('#wheelcanvas').stopRotate(); $('#wheelcanvas').rotate({ angle:0, animateTo:angles+1800, duration:8000, callback:function (){ alert(txt); turnplate.bRotate = !turnplate.bRotate; } }); }; $('.pointer').click(function (){ if(turnplate.bRotate)return; turnplate.bRotate = !turnplate.bRotate; //获取随机数(奖品个数范围内) var item = rnd(1,turnplate.restaraunts.length); //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288] rotateFn(item, turnplate.restaraunts[item-1]); /* switch (item) { case 1: rotateFn(252, turnplate.restaraunts[0]); break; case 2: rotateFn(216, turnplate.restaraunts[1]); break; case 3: rotateFn(180, turnplate.restaraunts[2]); break; case 4: rotateFn(144, turnplate.restaraunts[3]); break; case 5: rotateFn(108, turnplate.restaraunts[4]); break; case 6: rotateFn(72, turnplate.restaraunts[5]); break; case 7: rotateFn(36, turnplate.restaraunts[6]); break; case 8: rotateFn(360, turnplate.restaraunts[7]); break; case 9: rotateFn(324, turnplate.restaraunts[8]); break; case 10: rotateFn(288, turnplate.restaraunts[9]); break; } */ console.log(item); }); }); function rnd(n, m){ var random = Math.floor(Math.random()*(m-n+1)+n); return random; } //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染 window.onload=function(){ drawRouletteWheel(); }; function drawRouletteWheel() { var canvas = document.getElementById("wheelcanvas"); if (canvas.getContext) { //根据奖品个数计算圆周角度 var arc = Math.PI / (turnplate.restaraunts.length/2); var ctx = canvas.getContext("2d"); //在给定矩形内清空一个矩形 ctx.clearRect(0,0,422,422); //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式 ctx.strokeStyle = "#FFBE04"; //font 属性设置或返回画布上文本内容的当前字体属性 ctx.font = '16px Microsoft YaHei'; for(var i = 0; i < turnplate.restaraunts.length; i++) { var angle = turnplate.startAngle + i * arc; ctx.fillStyle = turnplate.colors[i]; ctx.beginPath(); //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆） ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false); ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true); ctx.stroke(); ctx.fill(); //锁画布(为了保存之前的画布状态) ctx.save(); //----绘制奖品开始---- ctx.fillStyle = "#E5302F"; var text = turnplate.restaraunts[i]; var line_height = 17; //translate方法重新映射画布上的 (0,0) 位置 ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius); //rotate方法旋转当前的绘图 ctx.rotate(angle + arc / 2 + Math.PI / 2); /** 下面代码

评论收藏

内容反馈