Как правильно расположить одну форму перед другой?

Question

Как правильно расположить одну форму перед другой?

Я буквально создал учетную запись на этом сайте, чтобы прокомментировать ответ Питера Айтай (в настоящее время самый высокий голос), только чтобы обнаружить, что вам требуется 50 rep (что бы это ни было), чтобы комментировать, поэтому я сделаю это как ответ, так как это вероятно, стоит отметить пару вещей.

В своем ответе он утверждает следующее:

Вы также можете передать setTimeout ссылку, так как ссылка не выполняется немедленно, но тогда вы не можете передавать аргументы:
setTimeout(playNote, delay);
blockquote>
Это неверно. После предоставления setTimeout значения функции и суммы задержки любые дополнительные аргументы анализируются как аргументы для ссылочной функции. Нижеследующее будет лучше, чем завершение вызова функции в функции.
setTimeout(playNote, delay, currentaudio.id, noteTime)
Всегда обращайтесь к документам.

Тем не менее, как указывает Питер, рекурсивная функция будет хорошая идея, если вы хотите изменить задержку между каждым playNote() или подумайте об использовании setInterval(), если вы хотите, чтобы между каждой playNote() была такая же задержка.

Также стоит отметить, что если вы хотите для синтаксического анализа i вашего цикла for в setTimeout(), вам нужно обернуть его в функцию, как описано здесь .

0

javascript jquery css html

задан Mamun 18 January 2019 в 11:20

3 ответа

Другие вопросы по тегам:

javascript jquery css html

Похожие вопросы:

score 0 · Answer 1

Просто удалите эту строку из CSS:

.form .register-form {
  display: none;
}

И добавьте это:

.form .login-form {
  display: none;
}

Вы можете увидеть результат в этой скрипке: http://jsfiddle.net/nyL7xq6f/

score 0 · Answer 2

Один из способов сделать это - установить CSS «login-form» в «display: none», а затем выполнить переключение при необходимости с помощью $ («. Login-form»). Css («display», «block» ) например, при установке $ (". register-form"). css ("display", "none")

score 0 · Answer 3

Это не имеет ничего общего с z-index, это основано на том, что одна форма изначально скрыта, а другая видима.

Заменить .form .register-form { display: none; } на .form .login-form { display: none; }

$('.message a').click(function(){
   $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #43A047;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}
.form .login-form {
  display: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}
body {
  background: #76b852; /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #76b852, #8DC26F);
  background: -moz-linear-gradient(right, #76b852, #8DC26F);
  background: -o-linear-gradient(right, #76b852, #8DC26F);
  background: linear-gradient(to left, #76b852, #8DC26F);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;      
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login-page">
  <div class="form">
    <form class="register-form">
      <input type="text" placeholder="name"/>
      <input type="password" placeholder="password"/>
      <input type="text" placeholder="email address"/>
      <button>create</button>
      <p class="message">Already registered? <a href="#">Sign In</a></p>
    </form>
    <form class="login-form">
      <input type="text" placeholder="username"/>
      <input type="password" placeholder="password"/>
      <button>login</button>
      <p class="message">Not registered? <a href="#">Create an account</a></p>
    </form>
  </div>
</div>