为什么css转换回到原始位置时通过javascript添加？

问题描述 投票：1回答：1

我试图从javascript设置DOM元素的转换。它正在改变，但又回到原来的位置？我该如何解决这个问题，导致它的原因是什么？

我尝试在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>&#169;mukherj</footer>
  </body>

</html>

它应该实际旋转。但它又回到了原来的位置

javascript html css
1个回答
0
投票

您正在使用submit的form事件和submit按钮。您应该使用click的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>&#169;mukherj</footer>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.