0

Как можно сделать появление div class="loader" по нажатию на кнопку button , и исчезанию его по истечении 40 секунд? Как это возможно реализовать с помощью JavaScript? Есть ли варианты с прикреплением таймера? Заранее спасибо.

body{
  padding: 1em;
  background: #2B3134;
  color: #777;
  text-align: center;
  font-family: "Gill sans", sans-serif;
  width: 80%;
  margin: 0 auto;
}
h1{
  margin: 1em 0;
  border-bottom: 1px dashed;
  padding-bottom: 1em;
  font-weight: lighter;
}

.loader{
  margin: 0 0 2em;
  height: 100px;
  width: 20%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 1em;
  display: inline-block;
  vertical-align: top;
}

/*
  Set the color of the icon
*/
svg path,
svg rect{
  fill: #FF6700;
}
.w3-button {width:160px;}
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <p><button class="w3-button w3-red">START</button></p>
  <div class="loader loader--style3" title="2">
  <svg  version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="80px" height="80px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
  <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="0.6s"
      repeatCount="indefinite"/>
    </path>
  </svg>
  
</div>
 <p style="text-indent: 0.0em;color:white;">  You have 40 seconds for prepare your interview.</p>

1 ответ 1

3

Используйте setTimeout():

var btn = document.getElementById('btn'),
  loader = document.getElementsByClassName('loader')[0];

btn.onclick = function() {
  loader.style.display = 'block'; // показываем .loader
  setTimeout(function() {
    loader.style.display = 'none'; // скрываем .loader
  }, 2000); // зарежка перед скрытием в миллисекундах
}
body {
  padding: 1em;
  background: #2B3134;
  color: #777;
  text-align: center;
  font-family: "Gill sans", sans-serif;
  width: 80%;
  margin: 0 auto;
}

h1 {
  margin: 1em 0;
  border-bottom: 1px dashed;
  padding-bottom: 1em;
  font-weight: lighter;
}

.loader {
  margin: 0 0 2em;
  height: 100px;
  width: 20%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 1em;
  display: inline-block;
  vertical-align: top;
  display: none;
}


/*
  Set the color of the icon
*/

svg path,
svg rect {
  fill: #FF6700;
}

.w3-button {
  width: 160px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<p><button class="w3-button w3-red" id="btn">START</button></p>
<div class="loader loader--style3" title="2">
  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
  <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 25 25"
      to="360 25 25"
      dur="0.6s"
      repeatCount="indefinite"/>
    </path>
  </svg>

</div>
<p style="text-indent: 0.0em;color:white;"> You have 40 seconds for prepare your interview.</p>

2
  • Спасибо за ответ, а возможно ли сделать не с применением id="btn", а с использованием class? 31 июл 2017 в 13:46
  • @OlegSevernuy можно. по тому же принципе, что и .loader определяется
    – Cheg
    31 июл 2017 в 13:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.