Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2019, 14:53
Новичок на форуме
Отправить личное сообщение для zemfira2108 Посмотреть профиль Найти все сообщения от zemfira2108
 
Регистрация: 08.10.2019
Сообщений: 9

Не могу доделать код
Здравствуйте, можете пожалуйста мне помочь с кодом, у меня тут сделано, так что при нажатии на объект он начинает уменьшаться и внутри него отсчитывается таймер, помогите мне сделать так чтобы при нажатии на отдельную кнопку старт появился круг и автоматически который начинает так же уменьшаться и при нажатии на него он исчезает и появляется в другом месте и снова так же, и + кнопка об окончании, чтобы больше не появлялась
Вот сам код, извините заранее за небрежный код, я начинающий просто и многое не могу:


<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не могу выучить javascript. usertest Оффтопик 17 20.03.2016 07:33
Почему не работает код sean88 Общие вопросы Javascript 1 04.11.2014 15:10
Что именно делает код Яндекс метрики? GDR Events/DOM/Window 12 18.08.2014 22:37
Как можно улучшить такой код? Reiter Общие вопросы Javascript 0 06.11.2012 14:19
Требуется выводить код рекламного блока Adsense из файла JavaScript??? speedflow Элементы интерфейса 0 26.05.2012 14:50