我的 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 切换到隐藏状态。期望的行为:框在没有参数的情况下不可见。 有什么摆脱这种情况的提示吗?
答案 0 :(得分: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 中
答案 1 :(得分:1)
为 class success_box
添加这个额外的规则到你的 CSS
.success_box {
display:none
}
并用这个替换你的 JS 代码
if (number == 'success') {
$('.success_box').show();
setTimeout('$(".success_box").hide()', 5000);
}
问题是加载 JS 文件需要一些时间。所以必须把框的默认显示状态设置为none