我正在为其他人使用设置年龄限制,但我希望一些 HTML 文本通过这个 if 语句不可见。这是 h3 文本HTML 文本:
如果您正在阅读本文,那么您已超过 18 岁。
JavaScript:
var user = prompt("Enter your age [NO LETTERS]: ");
if (user<18) {
document.write("<div style='font-family:Arial;font-size: 29px;''>Age restrictions have been enabled for this session.</div>");
alert("You are too young for this content, some restrictions might be activated.");
}
-
请不要使用
document.write
因为它仅用于测试,它实际上可能会重置页面。 -
只有两种可能的结果,用户年龄大于 18 岁或更少。请改用
confirm()
来消除冗余输入。
如果有很多内容 需要审查,将所有内容隐藏在JS中不是一个可行的解决方案。更好的方法是仅将特定类应用于 body:
Javascript:
var message = "Are you older than 18?";
if(!confirm(message)) {
document.body.classList.add("nsfw");
// Inform the user that some content might be hidden.
}
使用 CSS 进行设计和布局,使用 JS 进行逻辑。为所有敏感内容分配"敏感"类:
.HTML:
<body>
...
<span class="any-other-class">Hi</span>
<span class="sensitive any-other-class">If you are reading this, you are over 18.</span>
</body>
.CSS:
body.nsfw .sensitive {
display: none!important;
}
这样,如果用户未成年,每个具有类 sensitive
的元素都会被自动隐藏。
但是等等!也许您想存储用户的选择?使用会话存储!
function agecheck() {
var key = "nsfw-preference"
var message = "Are you older than 18?";
// Remove nsfw class if it exists
document.body.classList.remove("nsfw");
// No preference data.
if(window.sessionStorage.getItem(key) === null) {
// Ask the user:
if(!confirm(message))
window.sessionStorage.setItem(key, "true");
else
window.sessionStorage.setItem(key, "false");
}
// If the user is underage
if(window.sessionStorage.getItem(key) == "true") {
document.body.classList.add("nsfw");
// Inform the user some content might be hidden. Avoid alerts()!
}
// User isn't underage
else if(window.sessionStorage.getItem(key) == "false") {
// Inform the user if needed.
}
}
加载 DOM/页面后调用此函数一次。