Question

我的 html 页面包含以下代码：

function getUrlVars() {
  var vars = {};
  var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
  });
  return vars;
}

var number = getUrlVars()["login"];

if (number == 'success') {
  $('.success_box').css("visibility" , "visible");
  setTimeout('$(".success_box").css("visibility" , "hidden")', 5000);
} else {
  $('.success_box').css("visibility" , "hidden");
}

.success_box {
  width: 275px;
  background-color: #333;
  height: 50px;
  border-radius: 10px;
  position: absolute;
  right: 10px;
  top: 60px;
  vertical-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success_box_text {
  display: inline-block;
  color: rgb(228, 23, 23);
  text-decoration: none;

}

.success_box_text_color {
  color: #33cc33;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="success_box">
   <div class="success_box_text">
     Login <span class="success_box_text_color">completed ✔</span>
   </div>
 </div>

Javascript 由 url 参数触发：http://localhost/scarface-master/scarface/index.html?login=success 问题：在页面加载时，尽管未设置参数，但 success_box 仍可见 2 秒。两秒后，success_box 切换到隐藏状态。期望的行为：框在没有参数的情况下不可见。有什么摆脱这种情况的提示吗？

Answer 1

在 CSS 中默认隐藏此元素。您的 jquery 代码会延迟运行。

function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
});
return vars;
}
var number = 'success';


if (number == 'success') {
$('.success_box').css("visibility" , "visible");
setTimeout('$(".success_box").css("visibility" , "hidden")', 5000);
} else {
$('.success_box').css("visibility" , "hidden");
}

.success_box {
  visibility: hidden;
  width: 275px;
  background-color: #333;
  height: 50px;
  border-radius: 10px;
  position: absolute;
  right: 10px;
  top: 60px;
  vertical-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success_box_text {
  display: inline-block;
  color: rgb(228, 23, 23);
  text-decoration: none;
}

.success_box_text_color {
  color: #33cc33;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<div class="success_box">
   <div class="success_box_text">
     Login <span class="success_box_text_color">completed ✔</span>
   </div>
 </div>

` 只需添加 .success_box { 可见性：隐藏； ... 在 CSS 中

Answer 2

为 class success_box 添加这个额外的规则到你的 CSS

.success_box {
    display:none
}

并用这个替换你的 JS 代码

if (number == 'success') {
    $('.success_box').show();
    setTimeout('$(".success_box").hide()', 5000);
}

问题是加载 JS 文件需要一些时间。所以必须把框的默认显示状态设置为none

javascript隐藏元素在页面加载时可见

2 个答案: