Блог

Главная - Вопросы по программированию - почему преобразование css возвращается в исходное положение при добавлении через javascript?

почему преобразование css возвращается в исходное положение при добавлении через javascript?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь установить преобразование для элемента DOM из javascript. Оно преобразуется, но снова возвращается в исходное положение? Как я могу решить эту проблему и что является ее причиной?

Я попытался установить его в файле css, который работает.

Вот мой код. 

 let ibox=document.getElementById("inbox");
let pattern=/^(1[0-2]|0?[1-9]):([0-5]?[0-9])/;
let form = document.querySelector("form");
let bh = document.querySelector(".bighand");
let sh = document.querySelector(".smallhand");
const verify=() =>{
    pattern.test(ibox.value)?setTime():invalidEntry();
  };

const setTime = ()=>{ 
  bh.style.transform = "rotate(180deg)";  
  sh.style.transform = "rotate(90deg)";
  //alert("We have set your time");
}

const invalidEntry=()=>{
  alert("Please enter a valid time and format. Example 3:45");
}  
 html{
  height: 100vh;
  width: 100vw;
  margin:unset;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 600px;
}

.clockface{
  position:relative;
  height:500px;
  width:500px;
  background-image:url("https://images.homedepot-static.com/productImages/4fe72a29-ac1e-4699-ac41-998ca8a64d4c/svn/designer-stencils-stencils-3697h-64_1000.jpg");
  background-size:cover;
}

.clockface.simple:after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
}

.longesthand-container, .bighand-container, .smallhand-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/*.smallhand-container {
  animation: rotate 43200s infinite linear;
}
.bighand-container {
  animation: rotate 3600s infinite steps(60); 
}
.longesthand-container {
  animation: rotate 60s infinite steps(60);
}*/

.longesthand{
  background: #000;
  height: 45%;
  left: 49.5%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 80%;
  width: 1%;
  z-index:8;
}

.bighand{
  background: #000;
  height: 30%;
  left: 49%;
  position: absolute;
  top: 20%;
  transform-origin: 50% 100%;
  width: 2%;
}

.smallhand{
  background: #000;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
}

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

#inputbox{
  height:50px;
  font-size:2em;
}

footer {
  display: flex;
  justify-content: center;
}  
 <!DOCTYPE html>
<html>
  
  <head>
    <title></title>
  </head>

  <body>
    <header></header>
    <div class="container">      
      <div class="clockface simple">
          <div class="longesthand-container">
              <div class="longesthand">
          </div>
          </div>  
          <div class="bighand-container">
            <div class="bighand" id="bh">
          </div>
          </div>
          <div class="smallhand-container">
              <div class="smallhand">
          </div>  
          </div>                 
      </div>
    </div>
    <div>
      <form onsubmit="verify()">
        Enter your time: <input type="text" id="inbox" placeholder="12:00">
        <input type="submit" value="Submit">
      </form>
    </div>
        
    <footer>amp;#169;mukherj</footer>
  </body>

</html>

Оно действительно должно вращаться. Но оно возвращается в исходное положение

Ответ №1:

Вы используете submit событие вашего form с помощью submit кнопки. Вы должны использовать click событие a button , потому что вы нигде не отправляете данные формы. Фактически, из-за этого вам даже не нужен form тег.

 let ibox=document.getElementById("inbox");
let pattern=/^(1[0-2]|0?[1-9]):([0-5]?[0-9])/;
let form = document.querySelector("form");
let bh = document.querySelector(".bighand");
let sh = document.querySelector(".smallhand");
const verify=() =>{
    pattern.test(ibox.value)?setTime():invalidEntry();
};

const setTime = ()=>{ 
  bh.style.transform = "rotate(180deg)";  
  sh.style.transform = "rotate(90deg)";
  //alert("We have set your time");
}

const invalidEntry=()=>{
  alert("Please enter a valid time and format. Example 3:45");
}  
 html{
  height: 100vh;
  width: 100vw;
  margin:unset;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 600px;
}

.clockface{
  position:relative;
  height:500px;
  width:500px;
  background-image:url("https://images.homedepot-static.com/productImages/4fe72a29-ac1e-4699-ac41-998ca8a64d4c/svn/designer-stencils-stencils-3697h-64_1000.jpg");
  background-size:cover;
}

.clockface.simple:after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
}

.longesthand-container, .bighand-container, .smallhand-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/*.smallhand-container {
  animation: rotate 43200s infinite linear;
}
.bighand-container {
  animation: rotate 3600s infinite steps(60); 
}
.longesthand-container {
  animation: rotate 60s infinite steps(60);
}*/

.longesthand{
  background: #000;
  height: 45%;
  left: 49.5%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 80%;
  width: 1%;
  z-index:8;
}

.bighand{
  background: #000;
  height: 30%;
  left: 49%;
  position: absolute;
  top: 20%;
  transform-origin: 50% 100%;
  width: 2%;
}

.smallhand{
  background: #000;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
}

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

#inputbox{
  height:50px;
  font-size:2em;
}

footer {
  display: flex;
  justify-content: center;
}  
     <div class="container">      
      <div class="clockface simple">
          <div class="longesthand-container">
              <div class="longesthand">
          </div>
          </div>  
          <div class="bighand-container">
            <div class="bighand" id="bh">
          </div>
          </div>
          <div class="smallhand-container">
              <div class="smallhand">
          </div>  
          </div>                 
      </div>
    </div>
    <div>
        Enter your time: <input type="text" id="inbox" placeholder="12:00">
        <input type="button" value="Submit" onclick="verify()">
    </div>
        
    <footer>amp;#169;mukherj</footer>

Комментарии:

1. Спасибо… Я действительно не использовал форму для отправки чего-либо.