css 我想让它成为一个随机可见和可点击的小链接按钮,我如何才能让它工作?

bejyjqdl  于 2023-11-19  发布在  其他
关注(0)|答案(1)|浏览(108)

我正在建立一个教会网站,我是新的编码,所以我不完全理解伪代码,但这是我现在所拥有的:
css:

@keyframes offsetFix {
  0% (background-color: #ffffff;)
  90% (background-color: #ffffff;)
  91% (background-color: #fefffe;)
  100% (background-color: #eeeeee;)
}
body {
  background-color: #ffffff;
  animation: offsetFix 2s linear infinite;
}
.button, a:link, a:visited {
  border: none;
  color: #960018;
  padding: 0px 0px;
  width: 3px;
  height: 3px;
  text-align: center;
  text-decoration: none;
  display: block;
  position:fixed;
  top:316px;
  /* John 3:16
  Psalms 25:7 */
  left:257px;
  z-index:7777777;
  font-size: 0px;
  border-radius: 0px;
  transition-duration: 0.01s;
  cursor: crosshair;
}
.button:hover, a:hover {
  background-color: #000000; /* Black */
  color: #000000;
  width:9px;
  height:9px;
  transform: translateY(-7px) translatex(-7px);
}
.button:active, a:active {
  background-color: #960018; /* Carmine */
  color: #ffffff;
  width:191px;
  /* Proverbs 19:1
  Psalms 27 */
  height:27px;
  font-size: 11px;
  transform: translateY(-7px) translatex(-77%);
  /* Matthew 18:22 */
}
}

字符串
html(works):

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" >
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  <link rel="stylesheet" href="style.css" >
  <title>Browser</title>
</head>
<body>
  <div class="button" 
    id="button" 
    style="background-color:black" 
    >Jesus was probably born on The Feast of Tabernacles / the Feast of Booths / Sukkot</div>
  <a href="https://auselessbutton.com/">Hello.</a>
  <h1>
this is a header
  </h1>
  <p>
    paragraph
  </p>
  <script src="script.js"></script>
</body>

</html>


HTML(不工作):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Browser</title>
  <!--place the script tag in your head section-->
<script>
  function buttonRandom(){      
  <!--this gets called by setTimeout-->
    setInterval(() => {
      if (Math.random() >= 0.5) {<!--Chance = 50%-->
        button.style.visibility = "hidden"; <!--set element's visibility to hidden-->
        } else {
          button.style.visibility = "visible"; 
        }
      }, 3e3); <!--Set the frequency of this interval to every 3 sec (3*10^3 ms)-->
    }
  };
</script>  <!--close script-->
</head>
<body onload="buttonRandom()"> <!--call to my initial function-->
  <div class="button" 
    id="button" 
    style="background-color:black" 
    >Jesus was probably born on The Feast of Tabernacles / the Feast of Booths / Sukkot</div>
  <a href="https://theuselessweb.com/">Hello.</a>
  <h1>
    header
  </h1>
  <p>
    paragraph
  </p>
  <script src="script.js"></script>
</body>

</html>


我试着设置一个时间间隔,这样按钮的“风格”会随机改变,这样它要么不会,要么会在视觉和功能上被禁用,但按钮完全消失了。虽然我还没有让它成为一个功能链接,我会很感激一些关于如何做到这一点的提示。此外,我还没有让关键帧和正文同时工作。由于页面格式的工作方式,没有脚本文件是最容易的,但如果绝对必要的话,我可能会使用脚本。

tkclm6bt

tkclm6bt1#

问题是,一旦隐藏按钮,就不会恢复可见性,因此它将永远保持隐藏状态。您需要添加一个else子句,如下所示:

function buttonRandom() {

    let button = document.getElementById('button');
    setInterval(() => {

      if (Math.random() >= 0.5) {
        button.style.visibility = "hidden"; 
      } else {
        button.style.visibility = ""; 
      }
    }, 1e3);

  }

字符串
让我知道这是否是你想要的结果:)

相关问题