当网站上的用户不工作时,每次只显示一次 div?
Showing a div only once per time when user on the site doesn't work?
我想问一下javascript,如何在一次访问中显示一个div?
我有下面的代码。但是还是不行。
JS 显示Div一次
(function() {
var visited = sessionStorage.getItem('visited');
if (!visited) {
document.getElementById("popupMode").style.visibility = "visible";
sessionStorage.setItem('visited', true);
}
})();
我想要的:
我有一个弹出窗口 div 让用户可以选择模式。当用户选择时,弹出窗口将消失。当我刷新页面时,我希望弹出窗口不再出现,它只在我们开始访问网络时出现一次。
如果你不介意的话,我在弹出窗口中也有一个切换器模式,但它不会切换。
完整代码见My Codepen
弹出模式
<!-- Popup Mode -->
<div id="popupMode">
<div class="container-fluid p-0 h-100">
<div class="row h-100">
<div class="col-12 main-content">
<div id="modeChoice">
<div class="title">
<h2>Welcome</h2>
<p>
You can switch the button from light mode<br>to dark mode
</p>
</div>
<div class="choose-mode">
<div id="modeSwitcher">
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
<i class="fas fa-moon"></i>
<div class="ball"></div>
</label>
</div>
</div>
<div id="buttonPopupMode">
<a href="#" class="btn button-primary">UNDERSTAND</a>
</div>
</div>
</div>
</div>
</div>
</div>
完整 JS
window.onload = function() {
(function() {
var visited = localStorage.getItem('visited');
if (!visited) {
document.getElementById("popupMode").style.visibility = "visible";
localStorage.setItem('visited', true);
}
})();
if (localStorage.darkMode == "true") {
document.body.classList.toggle('dark');
document.getElementById("chk").checked = true;
} else {
document.body.classList.toggle('light');
}
};
document.getElementById("chk").addEventListener('change', () => {
document.body.classList.toggle('dark');
document.body.classList.toggle('light');
localStorage.darkMode = (localStorage.darkMode == "true") ? "false" : "true";
});
$("#popupMode").delay(3000).fadeIn(500);
$("#buttonPopupMode .button-primary").on('click', function() {
$('#popupMode').hide();
})
将此行 $("#popupMode").delay(3000).fadeIn(500);
移到 if (!visited) {...}
内。
更新后的代码如下所示。
window.onload = function() {
(function() {
var visited = localStorage.getItem('visited');
if (!visited) {
document.getElementById("popupMode").style.visibility = "visible";
localStorage.setItem('visited', true);
// Add below line.
$("#popupMode").delay(3000).fadeIn(500);
}
})();
if (localStorage.darkMode == "true") {
document.body.classList.toggle('dark');
document.getElementById("chk").checked = true;
} else {
document.body.classList.toggle('light');
}
};
document.getElementById("chk").addEventListener('change', () => {
document.body.classList.toggle('dark');
document.body.classList.toggle('light');
localStorage.darkMode = (localStorage.darkMode == "true") ? "false" : "true";
});
// remove below line.
// $("#popupMode").delay(3000).fadeIn(500);
$("#buttonPopupMode .button-primary").on('click', function() {
$('#popupMode').hide();
})
P.S.
localStorage 与 sessionStorage
localStorage
和 sessionStorage
完成完全相同的事情并且具有相同的 API,但是 sessionStorage - the data is persisted only until the window or tab is closed
,而 localStorage - the data is persisted until the user manually clears the browser cache or until your web app clears the data
。我建议使用 localStorage
,但这取决于您和您的要求,您可以选择更可取的。
我想问一下javascript,如何在一次访问中显示一个div?
我有下面的代码。但是还是不行。
JS 显示Div一次
(function() {
var visited = sessionStorage.getItem('visited');
if (!visited) {
document.getElementById("popupMode").style.visibility = "visible";
sessionStorage.setItem('visited', true);
}
})();
我想要的:
我有一个弹出窗口 div 让用户可以选择模式。当用户选择时,弹出窗口将消失。当我刷新页面时,我希望弹出窗口不再出现,它只在我们开始访问网络时出现一次。
如果你不介意的话,我在弹出窗口中也有一个切换器模式,但它不会切换。
完整代码见My Codepen
弹出模式
<!-- Popup Mode -->
<div id="popupMode">
<div class="container-fluid p-0 h-100">
<div class="row h-100">
<div class="col-12 main-content">
<div id="modeChoice">
<div class="title">
<h2>Welcome</h2>
<p>
You can switch the button from light mode<br>to dark mode
</p>
</div>
<div class="choose-mode">
<div id="modeSwitcher">
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
<i class="fas fa-moon"></i>
<div class="ball"></div>
</label>
</div>
</div>
<div id="buttonPopupMode">
<a href="#" class="btn button-primary">UNDERSTAND</a>
</div>
</div>
</div>
</div>
</div>
</div>
完整 JS
window.onload = function() {
(function() {
var visited = localStorage.getItem('visited');
if (!visited) {
document.getElementById("popupMode").style.visibility = "visible";
localStorage.setItem('visited', true);
}
})();
if (localStorage.darkMode == "true") {
document.body.classList.toggle('dark');
document.getElementById("chk").checked = true;
} else {
document.body.classList.toggle('light');
}
};
document.getElementById("chk").addEventListener('change', () => {
document.body.classList.toggle('dark');
document.body.classList.toggle('light');
localStorage.darkMode = (localStorage.darkMode == "true") ? "false" : "true";
});
$("#popupMode").delay(3000).fadeIn(500);
$("#buttonPopupMode .button-primary").on('click', function() {
$('#popupMode').hide();
})
将此行 $("#popupMode").delay(3000).fadeIn(500);
移到 if (!visited) {...}
内。
更新后的代码如下所示。
window.onload = function() {
(function() {
var visited = localStorage.getItem('visited');
if (!visited) {
document.getElementById("popupMode").style.visibility = "visible";
localStorage.setItem('visited', true);
// Add below line.
$("#popupMode").delay(3000).fadeIn(500);
}
})();
if (localStorage.darkMode == "true") {
document.body.classList.toggle('dark');
document.getElementById("chk").checked = true;
} else {
document.body.classList.toggle('light');
}
};
document.getElementById("chk").addEventListener('change', () => {
document.body.classList.toggle('dark');
document.body.classList.toggle('light');
localStorage.darkMode = (localStorage.darkMode == "true") ? "false" : "true";
});
// remove below line.
// $("#popupMode").delay(3000).fadeIn(500);
$("#buttonPopupMode .button-primary").on('click', function() {
$('#popupMode').hide();
})
P.S.
localStorage 与 sessionStorage
localStorage
和 sessionStorage
完成完全相同的事情并且具有相同的 API,但是 sessionStorage - the data is persisted only until the window or tab is closed
,而 localStorage - the data is persisted until the user manually clears the browser cache or until your web app clears the data
。我建议使用 localStorage
,但这取决于您和您的要求,您可以选择更可取的。