squareDancing/js/custom.js

244 lines
6.8 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-23 13:54:58 +00:00
var dancerTimer = null;
// 经过几秒关闭一起喊
var allSayTimer = 5000;
2021-11-18 10:29:59 +00:00
// 动作
2021-11-19 15:57:11 +00:00
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;
2021-11-19 13:54:50 +00:00
// 窗体宽度
var winWidth = $(window).width();
// 窗体高度
var winheight = $(window).height();
//控制速度1px
var speed = 1;
2021-11-19 15:57:11 +00:00
var startIndex = 0;
2021-11-25 01:27:35 +00:00
// 领舞关闭时间
var dancingTime = 6000;
// 6秒钟检测移动位置
var runTime = 6000;
// 随机移动的定时器
var upTimer = null;
2021-11-23 08:45:28 +00:00
// 集体舞ji
2021-11-19 15:57:11 +00:00
function allDancing(dangcing){
if(dangcing!=''){
actionArr.forEach((item,index)=>{
var haveDan = $(`.people-img`).is(`.${item}`);
if(haveDan){
$(`.people-img`).removeClass(item);
// $(`.people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
$(`.people-img`).addClass(dangcing);
2021-11-23 13:14:51 +00:00
$(`.leading-dancer`).removeClass(item);
$(`.leading-dancer`).addClass(dangcing);
2021-11-19 15:57:11 +00:00
}
})
setTimeout(()=>{
startIndex = 0;
var allPeople = $('.dance-floor').find('.people-img').length;
2021-11-23 13:14:51 +00:00
$(`.people-img`).removeClass(dangcing);
2021-11-25 01:27:35 +00:00
var suiDanTimer = setInterval(()=>{
2021-11-19 15:57:11 +00:00
if(startIndex==allPeople){
clearInterval(suiDanTimer);
} else {
startIndex++;
$(`.data${startIndex} .people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
}
2021-11-25 03:05:04 +00:00
},3000)
2021-11-23 13:14:51 +00:00
},10000)
2021-11-19 15:57:11 +00:00
}
2021-11-18 10:29:59 +00:00
}
// 随机舞
2021-11-18 11:11:00 +00:00
function randomDancing(id){
2021-11-23 13:14:51 +00:00
actionArr.forEach((item,index)=>{
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)]);
} else {
$(`.data${id} .people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
}
})
2021-11-18 10:29:59 +00:00
}
2021-11-23 01:56:09 +00:00
// 个人动作舞
2021-11-23 06:10:39 +00:00
function peopleAction(id,aevent){
actionArr.forEach((item,index)=>{
2021-11-23 13:14:51 +00:00
var haveDan = $(`#${id} .people-img`).is(`.${item}`);
2021-11-23 06:10:39 +00:00
if(haveDan){
2021-11-23 13:14:51 +00:00
$(`#${id} .people-img`).removeClass(item);
$(`#${id} .people-img`).addClass(aevent);
} else {
$(`#${id} .people-img`).addClass(aevent);
2021-11-23 06:10:39 +00:00
}
})
2021-11-23 01:56:09 +00:00
}
2021-11-19 13:54:50 +00:00
// 上
2021-11-23 01:56:09 +00:00
function upMove(id){
var odivu = document.getElementById(`${id}`);
2021-11-25 01:27:35 +00:00
upTimer = setInterval(()=>{
// if(parseInt(odivu.style.top) <=10){
// // clearInterval(upTimer);
// // downMove(id);
// $(`#${id}`).animate({top:`${Math.floor(Math.random()*90)}%`,left:`${Math.floor(Math.random()*90)}%`},Math.floor(Math.random()*40000+10000));
// } else {
2021-11-24 03:35:11 +00:00
$(`#${id}`).animate({top:`${Math.floor(Math.random()*90)}%`,left:`${Math.floor(Math.random()*90)}%`},Math.floor(Math.random()*40000+10000));
2021-11-25 01:27:35 +00:00
// }
},runTime)
2021-11-19 13:54:50 +00:00
}
2021-11-25 01:27:35 +00:00
// // 下
// function downMove(id){
// var odivd = document.getElementById(`${id}`);
// var downTimer = setInterval(()=>{
// if(parseInt(odivd.style.top) >=86){
// clearInterval(downTimer);
// upMove(id);
// } else {
// $(`#${id}`).animate({top:`${Math.floor(Math.random()*90)}%`,left:`${Math.floor(Math.random()*90)}%`},Math.floor(Math.random()*40000+10000));
// }
// },10)
// }
// // 左
// function leftMove(id){
// var odivl = document.getElementById(`${id}`);
// var leftTimer = setInterval(()=>{
// if(odivl.offsetLeft < 10){
// clearInterval(leftTimer);
// rightMove(id);
// } else {
// $(`#${id}`).animate({top:`${Math.floor(Math.random()*90)}%`,left:`${Math.floor(Math.random()*90)}%`},Math.floor(Math.random()*40000+10000));
// }
// },10)
// }
// // 右
// function rightMove(id){
// var odivr = document.getElementById(`${id}`);
// var rightTimer = setInterval(()=>{
// if(odivr.offsetLeft >= 86){
// clearInterval(rightTimer);
// leftMove(id);
// } else {
// $(`#${id}`).animate({top:`${Math.floor(Math.random()*90)}%`,left:`${Math.floor(Math.random()*90)}%`},Math.floor(Math.random()*40000+10000));
// }
// },10)
// }
// 随机位移
function moveEv(id){
upMove(id);
2021-11-19 07:30:08 +00:00
}
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
}
// 一起喊
function allSay(val){
$(`.dance-people .speak`).removeClass("dn");
$(`.dance-people .speak`).html(val);
setTimeout(()=>{
$(`.dance-people .speak`).addClass("dn");
},allSayTimer)
}
2021-11-19 15:57:11 +00:00
// 退出广场
function exitEv(id){
$(`${id}`).remove();
}
// 进入广场
2021-11-25 10:11:01 +00:00
function peopleObj(name,uid,say,action,active_time){
2021-11-18 10:29:59 +00:00
let yspHtml = '';
let yspData = [
{
2021-11-23 13:14:51 +00:00
id:'',
2021-11-23 01:56:09 +00:00
uid:uid,
2021-11-19 13:54:50 +00:00
top:`${Math.random()*500}px`,
left:`${Math.random()*1500}px`,
2021-11-18 10:29:59 +00:00
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,
2021-11-25 10:11:01 +00:00
active_time: active_time
2021-11-18 10:29:59 +00:00
}
]
$.each(yspData, function (commentIndex, comment) {
yspHtml += `
2021-11-25 10:11:01 +00:00
<div id="${comment.uid}" data-time="${comment.active_time}" class="dance-people data${peopleId}" style="top: ${comment.top}; left: ${comment.left};">
2021-11-19 15:57:11 +00:00
<div class="speak ">${comment.say}</div>
2021-11-18 10:29:59 +00:00
<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);
2021-11-23 01:56:09 +00:00
moveEv(uid);
2021-11-23 13:14:51 +00:00
// 随机舞
randomDancing(peopleId);
// 开始说话
sayIng(peopleId);
2021-11-23 13:14:51 +00:00
peopleId++
2021-11-19 15:57:11 +00:00
// 执行退出事件
// exitEv(`#peopleId${peopleId-1}`)
2021-11-18 10:29:59 +00:00
}
2021-11-23 13:54:58 +00:00
// 领舞者个人说话的动作
2021-11-23 13:14:51 +00:00
function dancerOwn(dancing){
actionArr.forEach((item,index)=>{
var haveDan = $(`.leading-dancer`).is(`.${item}`);
if(haveDan){
$(`.leading-dancer`).removeClass(item);
$(`.leading-dancer`).addClass(dancing);
}
})
2021-11-23 13:54:58 +00:00
setTimeout(()=>{
dancerRandom();
},6000)
2021-11-23 13:14:51 +00:00
}
2021-11-23 13:54:58 +00:00
// 领舞者随机的动作
function dancerRandom(){
2021-11-19 15:57:11 +00:00
// 领舞者随机动效
2021-11-23 13:54:58 +00:00
dancerTimer = setInterval(()=>{
2021-11-19 15:57:11 +00:00
actionArr.forEach((item,index)=>{
var haveDan = $(`.leading-dancer`).is(`.${item}`);
if(haveDan){
$(`.leading-dancer`).removeClass(item);
$(`.leading-dancer`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
2021-11-23 14:04:00 +00:00
} else {
$(`.leading-dancer`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
2021-11-19 15:57:11 +00:00
}
})
2021-11-25 01:27:35 +00:00
},dancingTime)
2021-11-23 13:54:58 +00:00
}
$(function(){
dancerRandom();
2021-11-23 08:21:20 +00:00
// 自动切歌
2021-11-23 09:53:26 +00:00
changeMusic();
2021-11-23 08:45:28 +00:00
var audio=document.getElementById('music');
if(audio){
2021-11-23 09:53:26 +00:00
audio.loop = false;
audio.addEventListener('ended', function () {
changeMusic()
}, false);
2021-11-23 08:45:28 +00:00
}
2021-11-25 10:11:01 +00:00
// 60s检测一次 十分钟没发言的删除
setInterval(function () {
delExpireDiv()
}, 60000)
2021-11-23 10:04:02 +00:00
//烟花
// setInterval(()=>{
// setTimeout(function() {
// $('.w3-agilefireworks').fireworks();
// });
// },6000)
2021-11-19 15:57:11 +00:00
2021-11-19 07:30:08 +00:00
})