javascript - JavaScript, onload="setTimeout('autoClick();',1500);" 后删除点击

问题描述

我有个问题。目前，我添加了一个 onload autoclick，以便在页面加载后发生动画。但是，当我在动画加载后单击页面上的任意位置时，动画会恢复到开头，我不希望这种情况发生。我希望在自动点击加载后点击完全消失。任何帮助将不胜感激。谢谢你。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

  <script type="text/javascript">
      function autoClick(){
        document.getElementById('curtain-container-main').click();
      }
  </script>

  <style>
    body {
  font-family: "Roboto", sans-serif;
  background-color: #eee;
}

.stage {
  background: #fff;
  width: 560px;
  margin: 4em auto;
  border: 15px solid #333;
  box-shadow: 1px 4px 11px #aaa, inset 1px 3px 6px #ccc;
  padding: 1em 0 3em;
  position: relative;
}

.stage-content {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  padding-top: 2%;
}

.stage-content:after {
  /* content: "Achievement Unlock"; */
  text-align: center;
  display: block;
  text-transform: uppercase;
  transform: translateY(0.5em);
  font-size: 1.1em;
}

.curtain-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.curtain-panel {
  display: flex;
  height: 100%;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
}

.curtain-panel .curtain {
  width: 50%;
  background-color: #fff;
  position: relative;
  transition: transform 2s ease-out;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.curtain-panel .curtain:before {
  content: attr(data-title);
  text-align: center;
  /* width: 200%; */
  width: 175%;
  position: absolute;
  top: 50%;
  line-height: 0;
  font-size: 1.1em;
  text-shadow: 1px 1px 3px #ccc;
}

.left-curtain {
  /* background-image: url("img/Logo-Curtain-Left-Half.png"); */
  background-image: url("https://teqcube.com/logo-entrance-test/img/test-left-logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 150px;
  background-position-x: right;
}

.curtain-panel .left-curtain:before {
  left: 0;
}

.right-curtain {
  /* background-image: url("img/Logo-Curtain-Right-Half.png"); */
  background-image: url("https://teqcube.com/logo-entrance-test/img/test-right-logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 150px;
  background-position-x: left;
}

.curtain-panel .right-curtain:before {
  right: 0;
}

.curtain-panel .curtain:after {
  content: "";
  background-size: 20px 20px;
  background-image: radial-gradient(
    circle at 10px -5px,
    rgba(0, 0, 0, 0) 12px,
    #fff 13px
  );
  display: block;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.curtain-trigger {
  visibility: hidden;
  position: absolute;
}

.curtain-trigger:checked ~ .left-curtain {
  /* transform: translateX(calc(-100% + 2em)); */
  transform: translateX(calc(-100% + 0em));
}

.curtain-trigger:checked ~ .right-curtain {
  /* transform: translateX(calc(100% - 2em)); */
  transform: translateX(calc(100% - 0em));
}

  </style>

</head>
<body onload="setTimeout('autoClick();',1500);">
  
  <div class="stage">
    <div class="stage-content">

      <div class="container-fluid">
        <h1>Three equal width columns</h1>
        <p>Note: Try to add a new div with class="col" inside the row class - this will create three equal-width columns.</p>
        <div class="row">
          <div class="col" style="background-color:lavender;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
          <div class="col" style="background-color:orange;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
          <div class="col" style="background-color:lavender;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
        </div>
      </div>

    </div>

    <label class="curtain-container">
      <div class="curtain-panel">
        <input type="checkbox" class="curtain-trigger" id="curtain-container-main"/>
        <div class="left-curtain curtain">
          <!-- <img src="img/Logo-Curtain-Left-Half.png" alt="" style="width: 100%;"> -->
        </div>
        <div class="right-curtain curtain">
          <!-- <img src="img/Logo-Curtain-Right-Half.png" alt="" style="width: 100%;"> -->
        </div>
      </div>
    </label>
  </div>

</body>
</html>
标签： javascript
javascript - JavaScript, onload="setTimeout('autoClick();',1500);" 后删除点击

问题描述

解决方案

推荐阅读
