2019独角兽企业重金招聘Python工程师标准>>> 
原生js实现九宫格转盘
知识点：js的闭包和原型
1：html和css
九宫格大转盘的实现
-
-
-
-
-
-
-
-
-
2.js部分
//实现步骤
/*前提是有布局
开发并不复杂，关键在于基础
1、传入参数并接收
2、初始化点击事件
点击 -
3、从服务器获取抽奖位置
4、随机分配显示位置，这里需要注意：点击位置的金额必须是从服务器获取的金额
5、翻牌
*/
(function (window, undefind) {
"use strict";
// 构造涵数
function Award() {
}
//prototype:追加方法或原型,init是自定义的，但是名字尽量语义化
//opts就是传入的参数，简称为形参
Award.prototype.init = function (opts) {//实例化参数
/*
是否可点
点击的是第几个
*/
this.isClick = true;//是否可点击，默认为可点
this.number = 0;//点击的数量
this.position;//点击的位置
this.opts = {
"lotteryLi": "",
"awardUrl": "",
"arr": [0, 1, 2, 3, 4, 5, 6, 7]
};
this.opts = this.extend(this.opts, opts);
//在jquery中是有extend复制参数的
this.bindeEvent();
}
//extend方法的实现
Award.prototype.extend = function () {//把传过来的参数复制
var args = arguments;//通过arguments指导传入的个数
if (args.length < 2) {
return;//如果少于两个参数就不操作
}
var temp = this.cloneObj(args[0]);
for (var i = 1; i < args.length; i++) {
for (var n in args[i]) {
temp[n] = args[i][n];
}
}
console.log(temp);
return temp;
}
//克隆方法的实现
Award.prototype.cloneObj = function (oldObj) {
if (typeof(oldObj) != 'object' || oldObj == null) {
return oldObj;
}
var newObj = {};
for (var i in oldObj) {
newObj[i] = this.cloneObj(oldObj[i]);
}
return newObj;
}
//绑定事件
Award.prototype.bindeEvent = function () {//初始化点击事件
var _this = this;//区分当前对象
for (var i = 0; i < _this.opts.lotteryLi.length; i++) {
_this.opts.lotteryLi[i].onclick = function () {
var currClass = this.className;
if (this.className == "") {//点击中间
alert("不要点击中间");
} else if (currClass.indexOf("active") < 0) {//没有选中
_this.number = Number(currClass.replace("list", "").trim())//Number转义为数字类型
_this.opts.arr = _this.opts.arr.sort(function () {
return 0.5 - Math.random();
});
_this.awardPosition();//中间金额
} else {
alert("您已经抽过奖");
}
}
}
}
//中间金额
Award.prototype.awardPosition = function () {
var _this = this;
//获取位置需要从服务器获取
/*
ajax有五个步骤
0：创建
1：打开
2：发送
3：响应数据
4：完成
*/
var xhr = new XMLHttpRequest();//IE：ActiveXObject创建
xhr.onreadystatechange = function () {//检测状态，当状态改变则返回
if (xhr.status == 200) {//200是页码，200表示正常，404找不到页面
if (xhr.readyState == 4) {//4表示加载完成
var data = JSON.parse(xhr.responseText);
_this.position = data.position;//保存从服务器获取的金额
//为了显示点击位置就是从服务器获取的中奖金额，必须把数组里面的中奖金额剔除，然后增加到第一个位置
for (var m = 0; m < _this.opts.arr.length; m++) {
if (_this.opts.arr[m] == _this.position) {
_this.opts.arr.splice(m, 1);
break;
}
}
_this.opts.arr.splice(0, 0, _this.position);
_this.lotterySlide();//显示翻转动画
_this.isClick = false;//禁止可点
return;//结束
}
}
}
xhr.open("post", _this.opts.awardUrl, true);//post/get,url,true/false打开
xhr.setRequestHeader("Content-Type", "application/www-x-form-urlencoded");//设置请求头部
xhr.send(null);//这里传入参数，可以为空
}
//改变图片的位置
Award.prototype.lotterySlide = function () {//改变图片显示
var _this = this;//区分对象区域
var nums = 0;
var awardNums = this.opts.arr.length;//由于是组件，所以获取个数
var lottery = window.setInterval(function () {//通过定时器延迟显示
if (document.getElementsByClassName("active").length > (awardNums - 1)) {
document.getElementsByClassName("list" + _this.number % awardNums)[0].className = "list" + _this.number % awardNums + " active lottery-position"
clearInterval(lottery);
} else {
//这里分为两个步骤，一个改变图片，一个拉开图片
document.getElementsByClassName("list" + _this.number % awardNums)[0].children[0].setAttribute("src", "img/" + _this.opts.arr[nums] + ".png");
document.getElementsByClassName("list" + _this.number % awardNums)[0].className = "list" + _this.number % awardNums + " active";
nums += 1;
_this.number += 1;
}
}, 200);
}
var awrad = new Award();
window["award"] = awrad;
}(window));