squareDancing/js/custom.js

140 lines
4.3 KiB
JavaScript
Raw Normal View History

2021-11-18 10:29:59 +00:00
// 总条数
var num = 0;
var timer = null;
var actionTimer = null;
2021-11-19 07:30:08 +00:00
var moveTimer = null;
2021-11-18 10:29:59 +00:00
// 粉丝的昵称
var nameArr = ['鹅鹅鹅鹅鹅鹅','打嗝','旋风腿儿','霹雳腿儿','老寒腿儿','哇咔咔蹦跶'];
// 粉丝说的话
var sayArr = ['没人','内容','空空风','美女姐姐','小阔爱','老阔爱'];
// 动作
var actionArr = ['dancing-left','dancing-right','dancing-down','dancing-UP','dancing-Wobble','dancing-Wobble-right'];
2021-11-19 07:30:08 +00:00
// 人物位移动画
var moveArr = ['run-right','run-left','run-right-top','run-left-top','run-right-bottom','run-left-bottom'];
2021-11-18 10:29:59 +00:00
var peopleId = 0;
// 集体舞
function allDancing(){
actionArr.forEach((item,index)=>{
var chooseIdex = Math.floor(Math.random()*num);
var haveDan = $(`.people-img`).is(`.${item}`);
if(haveDan){
$(`.people-img`).removeClass(item);
$(`.people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
}
})
setTimeout(()=>{
console.log('关闭集体舞');
clearInterval(actionTimer);
},3000)
}
// 随机舞
2021-11-18 11:11:00 +00:00
function randomDancing(id){
2021-11-18 10:29:59 +00:00
actionTimer = setInterval(()=>{
2021-11-18 11:11:00 +00:00
actionArr.forEach((item,index)=>{
// var chooseIdex = Math.floor(Math.random()*num);
var haveDan = $(`.data${id} .people-img`).is(`.${item}`);
if(haveDan){
$(`.data${id} .people-img`).removeClass(item);
$(`.data${id} .people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
}
})
2021-11-18 10:29:59 +00:00
},3000)
}
2021-11-19 07:30:08 +00:00
// 随机位移
function moveEv(id){
var odiv = document.getElementById("peopleId0");
actionTimer = setInterval(()=>{
var end = `100% {-webkit-transform:rotate(90deg);opacity:1;}`
var s = document.styleSheets[0];
moveArr.forEach((item,index)=>{
// var chooseIdex = Math.floor(Math.random()*num);
var haveDan = $(`.data${id}`).is(`.${item}`);
if(haveDan){
addCSSRule(document.styleSheets[ 0],`@keyframes ${item}`,`0%{transform:translate(${Math.floor(Math.random()*100)}%,${Math.floor(Math.random()*100)}%)}100%{transform:translate(${Math.floor(Math.random()*100)}%,${Math.floor(Math.random()*100)}%)}`,9)
}
})
},5000)
// moveTimer = setInterval(()=>{
// var speed = 1;
// if(odiv.offsetLeft>=700){
// clearInterval(moveTimer);
// } else {
// odiv.style.left = odiv.offsetLeft+speed+'px';
// }
// },10)
// console.log(23);
}
// 添加规则
function addCSSRule(sheet,selector,rules,index){
if("insertRule" in sheet){
sheet.insertRule(selector+"{"+rules+"}",index);
console.log(selector+"{"+rules+"}");
}else if("addRule" in sheet){
sheet.addRule(selector,rules,index);
}
}
2021-11-18 10:29:59 +00:00
// 关闭说话
function closeSay(index){
$(`.data${index} .speak`).addClass("dn");
}
// 开启说话
function sayIng(index){
$(`.data${index} .speak`).removeClass("dn");
setTimeout(()=>{
closeSay(index);
2021-11-19 07:30:08 +00:00
},6000)
2021-11-18 10:29:59 +00:00
}
2021-11-19 07:30:08 +00:00
function peopleObj(name,say,action,move){
2021-11-18 10:29:59 +00:00
// 开始说话
2021-11-19 07:30:08 +00:00
// sayIng(peopleId);
2021-11-18 11:11:00 +00:00
randomDancing(peopleId);
2021-11-19 07:30:08 +00:00
// moveEv(peopleId);
2021-11-18 10:29:59 +00:00
let yspHtml = '';
let yspData = [
{
id:peopleId++,
top:`${Math.random()*80+1}%`,
left:`${Math.random()*90+1}%`,
name:name,//用户名
say:say,//说话内容
peopleImg:`people-img0${Math.floor(Math.random()*6+1)}`,//人物图片
ying_guang:`stick-0${Math.floor(Math.random()*5+1)}`,//荧光棒
2021-11-19 07:30:08 +00:00
dancin:action,
peopleMove:move
2021-11-18 10:29:59 +00:00
}
]
$.each(yspData, function (commentIndex, comment) {
yspHtml += `
2021-11-19 07:30:08 +00:00
<div id="peopleId${comment.id}" class="dance-people data${comment.id} ${comment.peopleMove}" style="top: ${comment.top}; left: ${comment.left};">
2021-11-18 10:29:59 +00:00
<div class="speak ">${comment.say}${comment.id}</div>
<div class="people-img ${comment.peopleImg} ${comment.dancin}">
<div class="stick ${comment.ying_guang}"></div>
<div class="people-name ">${comment.name}</div>
</div>
</div>`
});
$('.dance-floor').prepend(yspHtml);
setTimeout(()=>{
2021-11-19 07:30:08 +00:00
// closeSay(num);
moveEv(0);
2021-11-18 10:29:59 +00:00
},3000);
}
$(function(){
// setTimeout(()=>{
// console.log('开始集体舞');
// allDancing();
// },50000)
timer = setInterval(()=>{
var nameIndex = Math.floor(Math.random()*nameArr.length);
var sayIndex = Math.floor(Math.random()*sayArr.length);
var actionIndex = Math.floor(Math.random()*actionArr.length);
2021-11-19 07:30:08 +00:00
var moveIndex = Math.floor(Math.random()*moveArr.length);
2021-11-18 10:29:59 +00:00
num++;
if(num==200){
2021-11-18 10:29:59 +00:00
clearInterval(timer);
} else {
2021-11-19 07:30:08 +00:00
peopleObj(nameArr[nameIndex],sayArr[sayIndex],actionArr[actionIndex],moveArr[moveIndex]);
2021-11-18 10:29:59 +00:00
}
},0)
2021-11-18 10:29:59 +00:00
2021-11-19 07:30:08 +00:00
})