在JavaScript中,实现一个简单的开关通常可以使用布尔变量来表示开关的状态(开或关),并通过函数来切换状态。以下是一个基本的示例:
// 初始化开关状态为关闭(false)
let isSwitchOn = false;
// 定义一个函数来切换开关状态
function toggleSwitch() {
isSwitchOn = !isSwitchOn; // 切换状态
console.log(isSwitchOn ? "开关已打开" : "开关已关闭");
}
// 使用示例
toggleSwitch(); // 输出: 开关已打开
toggleSwitch(); // 输出: 开关已关闭
true
表示真(开),false
表示假(关)。localStorage
或sessionStorage
来存储状态。// 使用localStorage持久化开关状态
function toggleSwitchWithStorage() {
let isSwitchOn = localStorage.getItem('isSwitchOn') === 'true';
isSwitchOn = !isSwitchOn;
localStorage.setItem('isSwitchOn', isSwitchOn);
console.log(isSwitchOn ? "开关已打开" : "开关已关闭");
}
// 初始化时读取状态
document.addEventListener('DOMContentLoaded', () => {
let isSwitchOn = localStorage.getItem('isSwitchOn') === 'true';
console.log(isSwitchOn ? "开关已打开" : "开关已关闭");
});
通过这种方式,即使用户刷新页面,开关的状态也会被保留。
领取专属 10元无门槛券
手把手带您无忧上云