我试图使其成为一个随机可见且可点击的小链接按钮。我怎样才能做到这一点?

问题描述 投票:0回答:1

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

@keyframes offsetFix {
  0% {
    background-color: #ffffff;
  }
  90% {
    background-color: #ffffff;
  }
  91% {
    background-color: #fefffe;
  }
  100% {
    background-color: #eeeeee;
  }
}

body {
  background-color: #ffffff;
  animation: offsetFix 20s linear infinite;
}

.button,
a:link,
a:visited {
  border: none;
  color: #960018;
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100px;
  height: 100px;
  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(-4px) translatex(-4px);
}

.button:active,
a:active {
  background-color: #960018;
  /* Carmine */
  color: #000000;
  width: 9px;
  height: 9px;
  transform: translateY(-4px) translatex(-4px);
}


}
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
<div class="button" id="button" style="background-color:black">This is a button</div>
<!--place the script tag in your head section-->
<script type="text/javascript">
  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-->
    }, 1e3); <!--Set the frequency of this interval to every 1 sec (1*10^3 ms)-->
  }
  };
</script>
<!--close script-->

<body onload="buttonRandom()">
  <!--call to my initial function-->
  </head>

我尝试设置一个间隔,以便按钮的“样式”会随机改变,这样它要么不会,要么在视觉和功能上被禁用,但按钮却完全消失了。 虽然我还没有使它成为一个有效的链接,但我希望得到一些关于如何完成它的提示。由于页面格式的工作原理,最简单的方法是不使用脚本文件,但如果绝对必要,我可能可以使用脚本。

html css button browser visibility
1个回答
0
投票

问题是,一旦隐藏按钮,您就不会恢复可见性,因此它仍然永远隐藏。您需要添加一个像这样的 else 子句:

  function buttonRandom() {

    setInterval(() => {
      let res = Math.random();
      console.log(res);

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

  }

让我知道这是否是您正在寻找的结果:)

© www.soinside.com 2019 - 2024. All rights reserved.