JavaScript实践案例

以下是一个简单的实现页面切换日间阅读和夜间阅读的JavaScript代码示例:

// 定义变量保存阅读模式
let currentMode = 'day';

// 日间阅读模式
const dayMode = {
  bgColor: 'white',
  textColor: 'black'
};

// 夜间阅读模式
const nightMode = {
  bgColor: 'black',
  textColor: 'white'
};

// 获取页面元素
const body = document.querySelector('body');
const text = document.querySelectorAll('p');

// 切换阅读模式函数
function toggleMode() {
  if (currentMode === 'day') {
    currentMode = 'night';
    body.style.backgroundColor = nightMode.bgColor;
    text.forEach(element => {
      element.style.color = nightMode.textColor;
    });
  } else {
    currentMode = 'day';
    body.style.backgroundColor = dayMode.bgColor;
    text.forEach(element => {
      element.style.color = dayMode.textColor;
    });
  }
}

// 绑定切换阅读模式事件
const toggleBtn = document.querySelector('#toggle-btn');
toggleBtn.addEventListener('click', toggleMode);