Здравствуйте, можете пожалуйста мне помочь с кодом, у меня тут сделано, так что при нажатии на объект он начинает уменьшаться и внутри него отсчитывается таймер, помогите мне сделать так чтобы при нажатии на отдельную кнопку старт появился круг и автоматически который начинает так же уменьшаться и при нажатии на него он исчезает и появляется в другом месте и снова так же, и + кнопка об окончании, чтобы больше не появлялась
Вот сам код, извините заранее за небрежный код, я начинающий просто и многое не могу:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
height: 100px;
width: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: yellow;
cursor: pointer;
}
.active {
animation: active .5s infinite;
cursor: inherit;
}
@keyframes active {
0% {
color: black;
}
50% {
color: orange;
}
100% {
color: black;
}
}
</style>
<script type="text/javascript">
addEventListener('DOMContentLoaded', () => {
const elem = document.querySelector('div');
const timer = {
elem,
translate: '',
windowSize: [innerWidth - 100, innerHeight - 100],
random: a => a * Math.random() | 0,
_count: 10,
get count() {
return this._count;
},
set count(v) {
if (this._count === v) {
return;
}
this._count = v;
this.render();
},
render() {
this.elem.querySelector('h1').textContent = this.count;
this.setStyle();
},
setStyle () {
const styleStr = `${this.translate} scale(${this.count / 10})`;
this.elem.style.transform = styleStr;
},
timerId: null,
get isRunning() {
return this.timerId !== null;
},
run() {
if (this.isRunning) return;
this.elem.classList.add('active');
this.timerId = setInterval(() => {
this.count -= 1;
if (this.count === 0) {
this.restart();
}
}, 1000)
},
restart() {
clearInterval(this.timerId);
this.timerId = null;
const [left, top] = this.windowSize.map(this.random);
this.translate = `translate(${left}px, ${top}px)`;
this.elem.classList.remove('active');
this.count = 10;
}
}
elem.addEventListener('click', timer.run.bind(timer));
});
</script>
</head>
<body>
<div>
<center>
<h1>10</h1>
</center>
</div>
</body>
