<!DOCTYPE html
>
<head
>
<meta charset
="utf-8">
<meta name
="viewport" content
="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style
>
body
{
margin: 0
;
padding: 0
;
}
.xian
{
width: 360px
;
height:600px
;
margin: 0 auto
;
position: relative
;
border: 1px solid black
;
}
.fx
{
display: flex
;
justify-content:space-around
;
margin: 50px 0 0 0
;
}
.fx div:nth-child
(1
){
border-right:50px solid rgb
(57, 126, 218
);
border-left:0
;
border-top: 30px solid transparent
;
border-bottom: 30px solid transparent
;
}
.fx div:nth-child
(2
){
border-left:50px solid rgb
(57, 126, 218
);
border-right:0
;
border-top: 30px solid transparent
;
border-bottom: 30px solid transparent
;
}
.fx div:nth-child
(3
){
border-top :50px solid rgb
(57, 126, 218
);
border-bottom:0
;
border-left: 30px solid transparent
;
border-right: 30px solid transparent
;
}
.fx div:nth-child
(4
){
width: 30px
;
height: 30px
;
border:15px solid rgb
(57, 126, 218
);
border-left:15px solid transparent
;
border-radius: 50%
;
position: relative
;
}
.fx div:nth-child
(4
)::before
{
content:
'';
position: absolute
;
top:-5px
;
left:-25px
;
border-left:20px solid transparent
;
border-right:20px solid transparent
;
border-bottom: 20px solid rgb
(57, 126, 218
);
transform: rotate
(-140deg
);
}
.fx div:nth-child
(5
){
width: 30px
;
height: 30px
;
border:15px solid rgb
(57, 126, 218
);
border-right:15px solid transparent
;
border-radius: 50%
;
position: relative
;
}
.fx div:nth-child
(5
)::before
{
content:
'';
position: absolute
;
top:-3px
;
left: 16px
;
border-left:20px solid transparent
;
border-right:20px solid transparent
;
border-bottom: 20px solid rgb
(57, 126, 218
);
transform: rotate
(140deg
);
}
.fx div:nth-child
(6
){
width: 60px
;
height: 60px
;
background-color: rgb
(57, 126, 218
);
position: relative
;
}
</style
>
</head
>
<body
>
<div class
='xian'>
</div
>
<div class
='fx'>
<div onclick
='zuo()'></div
>
<div onclick
='you()'></div
>
<div onclick
='dd(m)'></div
>
<div onclick
='zn()'></div
>
<div onclick
='zs()'></div
>
<div onclick
='ting(ti)'></div
>
</div
>
<script
>
let x
= document.querySelector
('.xian');
function tn
(st
){
return +st.slice
(0,-2
)
}
let m
= true;
let kk
;
let ti
= true;
let shuzu
= [[{l:160,t:0
},
{l1:170,t1:0
},
{l2:180,t2:0
},
{l3:190,t3:0
}],
[{l:170,t:0
},
{l1:170,t1:10
},
{l2:170,t2:20
},
{l3:170,t3:30
}],
[{l:170,t:10
},
{l1:180,t1:10
},
{l2:190,t2:10
},
{l3:190,t3:0
}],
[{l:170,t:0
},
{l1:170,t1:10
},
{l2:170,t2:20
},
{l3:180,t3:20
}],
[{l:170,t:10
},
{l1:180,t1:0
},
{l2:170,t2:0
},
{l3:190,t3:0
}],
[{l:170,t:0
},
{l1:180,t1:10
},
{l2:180,t2:0
},
{l3:180,t3:20
}],
[{l:170,t:0
},
{l1:180,t1:10
},
{l2:170,t2:10
},
{l3:190,t3:10
}],
[{l:180,t:0
},
{l1:170,t1:10
},
{l2:170,t2:0
},
{l3:170,t3:20
}],
[{l:170,t:0
},
{l1:180,t1:0
},
{l2:190,t2:0
},
{l3:190,t3:10
}],
[{l:170,t:20
},
{l1:180,t1:0
},
{l2:180,t2:20
},
{l3:180,t3:10
}],
[{l:170,t:10
},
{l1:180,t1:0
},
{l2:180,t2:10
},
{l3:190,t3:10
}],
[{l:180,t:0
},
{l1:180,t1:20
},
{l2:180,t2:10
},
{l3:190,t3:10
}],
[{l:170,t:0
},
{l1:190,t1:0
},
{l2:180,t2:0
},
{l3:180,t3:10
}],
[{l:170,t:10
},
{l1:180,t1:0
},
{l2:180,t2:10
},
{l3:180,t3:20
}],
[{l:170,t:10
},
{l1:170,t1:20
},
{l2:180,t2:10
},
{l3:180,t3:0
}],
[{l:170,t:0
},
{l1:180,t1:0
},
{l2:180,t2:10
},
{l3:190,t3:10
}],
[{l:170,t:0
},
{l1:170,t1:10
},
{l2:180,t2:10
},
{l3:180,t3:20
}],
[{l:170,t:10
},
{l1:180,t1:10
},
{l2:180,t2:0
},
{l3:190,t3:0
}],
[{l:170,t:0
},
{l1:180,t1:0
},
{l2:180,t2:10
},
{l3:170,t3:10
}]];
let sto
= document.createEvent
('HTMLEvents');
sto.initEvent
("stop", false, false
);
class e
{
constructor
(l,t
){
this.a
= document.createElement
('div');
this.a.style
=`width:8px;height:8px;border:1px solid rgb(229, 229, 245);background:black;position:absolute;left:${l}px;top:${t}px`;
this.a.live
= true;
x.appendChild
(this.a
);
}
shan
(){
x.removeChild
(this.a
);
}
}
class k
{
constructor
([{l,t
},
{l1,t1
},
{l2,t2
},
{l3,t3
}]) {
this.st
=true
;
this.ab
=new e
(l,t
);
this.ab1
=new e
(l1,t1
);
this.ab2
=new e
(l2,t2
);
this.ab3
=new e
(l3,t3
);
this.ss
=[this.ab,this.ab1,this.ab2,this.ab3
];
}
panduan
(t
) {
this.s
= setInterval
(()=>{
this.ss.forEach
(xx
=>{
xx.b
= xx.a.offsetTop+10
;
if (xx.b
>590
) {
this.st
=false
;
}
let y
= x.querySelectorAll
('div');
y.forEach
(z
=>{
if (!z.live
&&xx.a.offsetLeft
==z.offsetLeft
) {
if
(xx.b
== z.offsetTop
){
this.st
=false
;
}
}
}
)
}
)
if (this.st
) {
this.ss.forEach
(xy
=>{xy.a.style.top
=xy.b+
'px'})
}
if (!this.st
) {
this.stop
();
this.ss.forEach
(aa
=>{aa.a.live
=false
})
}
},t
);
}
run
() {
this.panduan
(500
)
}
runs
() {
clearInterval
(this.s
)
this.panduan
(50
)
}
stop
(){
let y
= x.querySelectorAll
('div');
clearInterval
(this.s
);
this.ss.forEach
(
x
=>{let s
=[]
y.forEach
(
q
=>{
if (q.offsetTop
== x.offsetTop
){
s.push
(q
)
}
})
if (s.length
=36
) {
s.forEach
(w
=>w.remove
());
y.forEach
(t
=>{
if (t.offsetTop
<x.offsetTop
) {
t.style.top
= t.offsetTop+10+
'px'
}
})
}
});
x.dispatchEvent
(sto
)
}
zhuann
(){
let y
= x.querySelectorAll
('div');
let zh
= true;
this.ss.forEach
(x
=>{
let l
= this.ab2.a.offsetLeft + x.a.offsetTop - this.ab2.a.offsetTop
;
let t
= this.ab2.a.offsetTop - x.a.offsetLeft + this.ab2.a.offsetLeft
;
y.forEach
(
z
=>{
if (l
== z.offsetTop
||l
<0
||l
>350
||t
>590
) {
zh
=false
;
}
}
)
if (zh
) {
x.a.style.left
= l +
'px';
x.a.style.top
= t +
'px'
}
})
}
zhuans
(){
let y
= x.querySelectorAll
('div');
let zh
= true;
this.ss.forEach
(x
=>{
let l
= this.ab2.a.offsetLeft - x.a.offsetTop + this.ab2.a.offsetTop
;
let t
= x.a.offsetLeft - this.ab2.a.offsetLeft + this.ab2.a.offsetTop
;
y.forEach
(
z
=>{
if (l
== z.offsetTop
||l
<0
||l
>350
||t
>590
) {
zh
=false
;
}
}
)
if (zh
) {
x.a.style.left
= l +
'px';
x.a.style.top
= t +
'px'
}
})
}
}
function zuo
(){
let y
= x.querySelectorAll
('div');
let zh
= true;
kk.ss.forEach
(x
=>{
let l
= x.a.offsetLeft - 10
;
y.forEach
(
z
=>{
if (l
<0
) {
zh
=false
;
}
}
)
if (zh
) {
x.a.style.left
= l +
'px';
}
})
}
function you
(){
let y
= x.querySelectorAll
('div');
let zh
= true;
kk.ss.forEach
(x
=>{
let l
= x.a.offsetLeft + 10
;
y.forEach
(
z
=>{
if (l
>350
) {
zh
=false
;
}
}
)
if (zh
) {
x.a.style.left
= l +
'px';
}
})
}
function ting
(t
) {
if (t
) {
clearInterval
(kk.s
)
ti
=!t
}
else {
kk.run
()
ti
=!t
}
}
function suiji
() {
let r
= Math.floor
(Math.random
()*19
);
return new k
(shuzu
[r
])
}
function n
() {
kk
= suiji
()
kk.run
();
}
n
();
x.addEventListener
('stop',n,false
)
function zn
() {
kk.zhuann
();
}
function zs
() {
kk.zhuans
();
}
function dd
(a
) {
if
(a
){
kk.runs
();
m
=!a
}
else
{
clearInterval
(kk.s
)
m
=!a
}
}
</script
>
</body
>
