抽奖html源代码(html抽奖程序代码)
admin 发布:2022-12-19 18:20 184
今天给各位分享抽奖html源代码的知识,其中也会对html抽奖程序代码进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
html随机抽取图片,不重复抽取怎么实现
这个很简单
做一个array内含图片数量个位置
var arr = [false,false,false,false,false,false,false];
写一个函数reset,判断是否全部图片显示过一遍,是则重置,让图片重新显示一遍
function reset(){
var alltrue = true;
for(var i=0;iarr.length;i++){
if(!arr[i]) alltrue = false;
}
if(alltrue) arr = [false,false,false,false,false,false,false];
}
然后每次随机一个x0-6的数字x,判断arr[x] true则重新随机,false 则显示图片,更新arr[x]为true,检查reset重置
就可以了
用html5+js 做一个转盘抽奖怎么做,求源码!
5分给你个程序。。。
自己参考改吧
input type="button" value="开始旋转" onclick="spin();" style="float: left;" /
meta http-equiv="Content-Type" content="text/html;charset=utf-8" /
canvas id="wheelcanvas" width="500" height="500"/canvas
script type="application/javascript"
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
"#2E2C75", "#673A7E", "#CC0071", "#F80120",
"#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
var restaraunts = ["北京", "上海", "天津", "南京",
"杭州", "深圳", "武汉", "济南",
"重庆", "大连", "合肥", "郑洲"];
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
function draw() {
drawRouletteWheel();
}
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 12px sans-serif';
for(var i = 0; i 12; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = restaraunts[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if(spinTime = spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px sans-serif';
var text = restaraunts[index]
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
draw();
/script
谁给个网页抽奖源码,带后台(最好是要转盘类的)
discuz有个转盘抽奖插件,如果不是discuz论坛程序,估计是用不上。
怎么用html5实现 抽奖效果
这个需要用到H5新标签:canvas绘制图形,利用js来实现抽奖效果,实现步骤如下:
var num = 6; // 奖品数量 var canvas = document.getElementById('canvas'); var
btn = document.getElementById('btn'); if(!canvas.getContext){
alert('抱歉!浏览器不支持。'); return; } // 获取绘图上下文 var ctx = canvas.getContext('2d'); for
(var i = 1; i = num; i++) { // 保存当前状态 ctx.save(); // 开始一条新路径
ctx.beginPath(); // 位移到圆心,下面需要围绕圆心旋转 ctx.translate(150, 150); // 从(0,
0)坐标开始定义一条新的子路径 ctx.moveTo(0, 0); // 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180
公式进行计算。 ctx.rotate(360 / num * i * Math.PI/180); // 绘制圆弧 ctx.arc(0, 0, 150, 0, 2
* Math.PI / num, false); if (i % 2 == 0) { ctx.fillStyle = '#ffb820'; }else{
ctx.fillStyle = '#ffcb3f'; } // 填充扇形 ctx.fill(); // 绘制边框 ctx.lineWidth = 0.5;
ctx.strokeStyle = '#f48d24'; ctx.stroke(); // 恢复前一个状态 ctx.restore(); }
关于抽奖html源代码和html抽奖程序代码的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:代码风格好(代码编写风格)
- 下一篇:html5切换焦点图代码(网页设计焦点图代码)
相关推荐
- 04-27微信计算器源代码(微信计算器源代码怎么用)[20240427更新]
- 04-27c代码检视(c#代码检查工具)[20240427更新]
- 04-27excel杀源代码(excel三国杀源代码)[20240427更新]
- 04-27自动回帖软件源代码(自动回复程序代码)[20240427更新]
- 04-27保存网站到桌面的asp代码(asp网站程序)[20240427更新]
- 04-27手机商城代码(网上商城代码)[20240427更新]
- 04-27c开发实战源代码(c开源项目代码)[20240427更新]
- 04-27java源程序代码连连看(java程序设计连连看实验报告)[20240427更新]
- 04-27ppt插入flash代码(ppt加入flash)[20240427更新]
- 04-27教育培训代码php(培训学校行业代码)[20240427更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接