/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
background-color: #3b3674;
background-image: url(images/foot-bg.png);
background-position: 0 100%;
background-repeat: no-repeat;
padding-bottom: 100px;
background-size: 100%;
}
.w1400-img img {
max-width: 1400px;
min-width: 1200px;
display: block;
margin: 0 auto;
}
.lucyDraw {
width: 1200px;
height: 625px;
margin: 0 auto;
background-image: url(images/ld2.jpg);
background-size: 100%;
}
.turnplate {
width: 500px;
height: 500px;
margin: 0 auto;
background-image: url(images/turnplate-bg.png);
background-size: 100% 100%;
position: relative;
border-radius: 50%;
overflow: hidden;
box-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.1);
}
#wheelcanvas {
width: 424px;
height: 424px;
background-image: url(images/turnplate-ct.png);
background-size: 100% 100%;
border-radius: 50%;
overflow: hidden;
}
.turnplate .item {
margin-top: 38px;
margin-left: 38px;
border: none;
border-radius: 50%;
overflow: hidden;
}
.turnplate .pointer {
position: absolute;
top: 155px;
left: calc(50% - 60px);
border-radius: 50%;
cursor: pointer;
}
.deepTime {
width: 1200px;
text-align: center;
margin: 20px auto;
font-size: 18px;
color: #ffdbb4;
font-family: 黑体;
display: flex;
align-items: center;
justify-content: center;
}
.deepTime span {
height: 40px;
width: 90px;
line-height: 40px;
display: inline-block;
background-color: #9c5d97;
border: 2px solid #de6891;
font-size: 24px;
color: #fefefe;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 0 10px;
}
.deepTime a {
color: #ffdbb4;
margin: 0 2px;
}
.deepTime a.logout {
margin-left: 5px;
margin-right: 10px;
font-size: 14px;
}
.zjdt {
position: relative;
margin-top: 40px;
}
.zjdt .w754 {
width: 754px;
height: 100%;
position: absolute;
left: calc(50% - 377px);
top: 0;
overflow: hidden;
}
.zjdt .w754 a {
width: 185px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 22px;
color: #fff;
border-radius: 10px;
display: block;
float: right;
background-color: #ff5a6e;
}
.w754_2 {
width: 754px;
margin: 20px auto;
}
.w754_2 table.th th {
background-color: #ff5a6e;
height: 40px;
text-align: center;
color: #fefeff;
font-weight: normal;
}
.w754_2 table td {
background-color: #fff;
height: 35px;
font-size: 16px;
color: #111555;
text-align: center;
}
.marqueeBox {
height: 140px;
overflow: hidden;
background-color: #fff;
}
.setting {
margin-top: 50px;
position: relative;
}
.setting .w754 {
width: 754px;
position: absolute;
bottom: 0;
left: calc(50% - 377px);
overflow: hidden;
}
.setting .w754 img {
width: 100% !important;
max-width: 100%;
min-width: 100%;
display: block;
}
.rule {
margin-top: 50px;
}
.w754_2 .txt {
color: #fff;
line-height: 30px;
}
.shadowBox {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, .3);
display: none;
}
.shadowBox .itemBox {
position: relative;
display: none;
}
.shadowBox .close {
width: 30px;
height: 30px;
position: absolute;
z-index: 1000;
background-image: url(images/close.png);
background-size: 100%;
right: 10px;
top: 10px;
cursor: pointer;
}
.shadowBox .bigBox {
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
width: 100%;
height: 100%;
background-color: transparent;
position: absolute;
left: 0;
top: 0;
}
.prize {
width: 470px;
height: 615px;
background-image: url(images/ld7.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
z-index: 1000;
}
.prize .pic {
text-align: center;
display: block;
width: 200px;
margin: 135px auto 0;
}
.prize .pic img {
width: 100%;
}
.prize .title {
font-size: 22px;
color: #ff5a6e;
margin: 30px auto;
text-align: center;
}
.prize .btn {
position: absolute;
width: 215px;
height: 45px;
left: calc(50% - 107.5px);
bottom: 45px;
background-color: #9c5d97;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 45px;
border-radius: 8px;
cursor: pointer;
}
.writeInfo {
width: 370px;
height: 485px;
position: relative;
z-index: 1000;
background-color: #fff;
border-radius: 10px;
padding: 65px 50px;
}
.writeInfo h3 {
font-size: 22px;
color: #333;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
}
.writeInfo h3 span {
color: #ff5a6e;
margin-left: 5px;
}
.writeInfo li {
display: -webkit-box;
-webkit-box-align: center;
width: 100%;
height: 40px;
margin-top: 30px;
}
.writeInfo li label {
width: 65px;
display: block;
}
.writeInfo li input {
width: 280px;
height: 40px;
margin-left: 5px;
outline: none;
padding: 0 10px;
font-size: 18px;
border: none;
background-color: #eeeeee;
}
.writeInfo li .sub {
width: 170px;
height: 45px;
text-align: center;
line-height: 45px;
color: #fff;
background-color: #9c5d97;
border-radius: 6px;
margin: 50px auto 0;
cursor: pointer;
}
.subSuccess {
width: 470px;
height: 615px;
background-image: url(images/ld8.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
z-index: 1000;
}
.subSuccess .my {
width: 170px;
height: 45px;
text-align: center;
line-height: 45px;
color: #fff;
background-color: #9c5d97;
border-radius: 6px;
position: absolute;
bottom: 50px;
left: calc(50% - 85px);
cursor: pointer;
}
.noList {
width: 470px;
height: 615px;
background-image: url(images/ld9.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
z-index: 1000;
}
.noList .close2 {
width: 170px;
height: 45px;
text-align: center;
line-height: 45px;
color: #fff;
background-color: #9c5d97;
border-radius: 6px;
position: absolute;
bottom: 50px;
left: calc(50% - 85px);
cursor: pointer;
}
.noDeefTime {
width: 470px;
height: 615px;
background-image: url(images/ld11.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
z-index: 1000;
}
.noDeefTime .close2 {
width: 170px;
height: 45px;
text-align: center;
line-height: 45px;
color: #fff;
background-color: #9c5d97;
border-radius: 6px;
position: absolute;
bottom: 50px;
left: calc(50% - 85px);
cursor: pointer;
}
.hadList {
width: 420px;
height: 575px;
background-image: url(images/ld10.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
z-index: 1000;
padding: 20px 25px;
}
.hadList .back {
width: 170px;
height: 45px;
text-align: center;
line-height: 45px;
color: #fff;
background-color: #9c5d97;
border-radius: 6px;
cursor: pointer;
margin: 30px auto 30px;
}
.hadList table.thead {
width: 420px;
margin: 300px auto 0;
}
.hadList .listBox {
width: 420px;
height: 160px;
background-color: #fff;
overflow-y: scroll;
}
::-webkit-scrollbar {
width: 2px;
height: 10px;
background-color: transparent;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px
background-color: transparent;
border-radius: 4px;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 2px;
-webkit-box-shadow: inset 0 0 4px transparent;
background-color: #9c5d97;
}
.hadList .listBox table {
width: 100%;
text-align: center;
}
.hadList .listBox table th {
height: 40px;
}
.hadList .listBox table td {
height: 40px;
}
.hadList .listBox table td.red {
color: #ff5a6e;
}
![](images/ld1.jpg)
您还有1次抽奖机会
时间 | 用户 | 奖项 |
---|
2019-1-3 14:30:12 | 15021227561 | AirPods |
2019-1-3 14:30:12 | 18321090064 | AirPods |
2019-1-3 14:30:12 | 13801767495 | AirPods |
2019-1-3 14:30:12 | 15889619096 | AirPods |
2019-1-3 14:30:12 | 13121329168 | AirPods |
![](images/ld5.jpg)
1、 凡订单金额每满2000元,即可获赠一次抽奖机会,100%中奖。
2、 只有真实有效订单号才可获奖,退订单、虚假订单将取消其获奖资格。
3、 实物奖品将在活动结束一个月后统一配送,请抽奖者认真填写配送信息。
4、 活动截止时间:2019年3月15日 24:00
5、 活动最终解释权归研鼎商城所有。
![](images/pz1.png)
恭喜您抽到小米电视
- 姓名:
- 电话:
- 地址:
- 备注:
-
提交信息
奖项 | 抽奖时间 |
---|
小米电视 | 2019-2-12 10:01:28 |
小米电视 | 2019-2-12 10:01:28 |
小米电视 | 2019-2-12 10:01:28 |
小米电视 | 2019-2-12 10:01:28 |
小米电视 | 2019-2-12 10:01:28 |
小米电视 | 2019-2-12 10:01:28 |
小米电视 | 2019-2-12 10:01:28 |
小米电视 | 2019-2-12 10:01:28 |
小米电视 | 2019-2-12 10:01:28 |
小米电视 | 2019-2-12 10:01:28 |
$(function () {
var marquee = document.getElementById('marquee');
var offset = 0;
var scrollheight = marquee.offsetHeight;
var firstNode = marquee.children[0].cloneNode(true);
marquee.appendChild(firstNode);//还有这里
function mq() {
if (offset == scrollheight) {
offset = 0;
}
marquee.style.marginTop = "-" + offset + "px";
offset += 1;
}
var t;
t = setInterval(mq, 50);
$("#marquee").hover(function () {
window.clearInterval(t);
}, function () {
t = setInterval(mq, 50);
});
if (($('#marquee tr').length) / 2 <= 4) {
window.clearInterval(t);
}
$('#marquee tr').each(function (index, domEle) {
// domEle == this
var name = $(domEle).find('td:eq(1)').text();
var nameAfter = name.substr(0, 3) + "****" + name.substr(7);
$(domEle).find('td:eq(1)').text(nameAfter);
});
});
var turnplate = {
restaraunts: [],//大转盘奖品名称
colors: [],//大转盘奖品区块对应背景颜色
outsideRadius: 212,//大转盘外圆的半径
textRadius: 155,//大转盘奖品位置距离圆心的距离
insideRadius: 45,//大转盘内圆的半径
startAngle: 0,//开始角度
randomRate: [], //控制获奖率,百分制(相加需等于100%),对应restaraunts(顺序需要保持一致),
bRotate: false//false:停止;ture:旋转
};
$(document).ready(function () {
//动态添加大转盘的奖品与奖品区域背景颜色
turnplate.randomRate = ["15%", '10%', '20%', '50%', '1%', '4%']; //小心设置按100%分配
turnplate.restaraunts = ["摄影背包", "三脚架套餐", "移动电源", "记事本", "小米电视", "苹果耳机"];
turnplate.colors = ["transparent", "transparent", "transparent", "transparent", "transparent", "transparent"];
/**
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 () {
if (txt == "小米电视") {
$('.shadowBox .prize .pic img').attr('src', 'images/pz1.png');
}
if (txt == "苹果耳机") {
$('.shadowBox .prize .pic img').attr('src', 'images/pz2.png');
}
if (txt == "摄影背包") {
$('.shadowBox .prize .pic img').attr('src', 'images/pz3.png');
}
if (txt == "三脚架套餐") {
$('.shadowBox .prize .pic img').attr('src', 'images/pz4.png');
}
if (txt == "移动电源") {
$('.shadowBox .prize .pic img').attr('src', 'images/pz5.png');
}
if (txt == "记事本") {
$('.shadowBox .prize .pic img').attr('src', 'images/pz6.png');
}
$('.shadowBox .prize .title').text(txt);
$('.shadowBox').fadeIn();
$('.shadowBox .prize').fadeIn();
turnplate.bRotate = !turnplate.bRotate;
}
});
};
$('.shadowBox .itemBox .close').click(function () {
$('.shadowBox .itemBox').fadeOut();
$('.shadowBox').fadeOut();
})
//立刻抽奖
$('.shadowBox .itemBox .close2,.hadList .back').click(function () {
window.location.reload();
})
$('.shadowBox .prize .btn').click(function () {
$('.shadowBox .writeInfo').fadeIn();
})
$('.shadowBox .writeInfo .sub').click(function () {
$('.shadowBox .subSuccess').fadeIn();
})
$('.subSuccess .my').click(function () {
$('.shadowBox .hadList').fadeIn();
})
$('.pointer').click(function () {
if (turnplate.bRotate) return;
turnplate.bRotate = !turnplate.bRotate;
//获取随机数(奖品个数范围内)
var item = rnd(turnplate.randomRate);
//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
rotateFn(item, turnplate.restaraunts[item - 1]);
});
});
function rnd(rate) {
var random = Math.floor(Math.random() * 100);
var myRandom = [];
var randomList = [];
var randomParent = [];
for (var i = 0; i < 100; i++) {
myRandom.push(parseInt([i]) + 1);
}
for (var i = 0; i < rate.length; i++) {
var temp = [];
var start = 0;
var end = 0;
randomList.push(parseInt(rate[i].split('%')[0]));
for (var j = 0; j < randomList.length; j++) {
start += randomList[j - 1] || 0
end += randomList[j]
}
temp = myRandom.slice(start, end);
randomParent.push(temp)
}
for (var i = 0; i < randomParent.length; i++) {
if ($.inArray(random, randomParent[i]) > 0) {
return (i + 1)
}
}
}
//页面所有元素加载完毕后执行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 = "transparent";
//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 = "transparent";
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);
}
}
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史