js简单实现节假日自动更换页面背景

sherlockkid7
175 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

前言

这两天打开一些App，看到首页的顶部背景图都换成了红色相关的背景，才意识到应该是十九届七中全会在京召开的原因。不知道App上是怎么实现的，今天来简单实现一个类似效果

具体实现

  1. 简单布局

定义一个元素，最大宽度为750px, 水平居中显示，并设置一张默认背景图片

.background {
  max-width: 750px;
  height: 100vh;
  background-image: url('xxx');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin: 0 auto;
}
  1. 获取当前时间的月份和日期

使用new Date()获取当前时间;

Date对象的getMonth()方法获取月份，getMonth()返回一个 0 到 11 的整数值：0 代表一月份，1 代表二月份，2 代表三月份，依次类推。因此使用时需要加一，和实际月份对应;

Date对象的getDate()方法获取一个月中的哪一日，getDate() 返回一个 1 到 31 的整数值。

const nowDate = new Date()
// 将当前时间的月份和日期用字符‘-’连接起来 形成如 ‘10-1’的字符串格式
const daytime = (nowDate.getMonth() + 1) + "-" + nowDate.getDate();
  1. 使用条件语句switch判断当前时间是否为设置的默认节假日时间，如果为对应的时间，替换元素的背景图

使用js动态改变元素的背景图片属性，因为背景图片属性值中包含url字符，所以使用模板字符串来引用图片地址url

const backDiv = document.querySelector('.background');
switch (daytime) {
    case "1-1":
      backDiv.style.backgroundImage =`url(${"xxx"})`;
      break;
    case "5-1":
      backDiv.style.backgroundImage =`url(${"xxx"})`;
      break;
    case "10-1":
      backDiv.style.backgroundImage =`url(${"xxx"})`;
      break;
    case "10-9":
      backDiv.style.backgroundImage = `url(${"xxx"})`;
      break;
}

因为网上找的背景图片的url较长，所以展示代码中省略了（相关图片url会在码上掘金中展示出来）

引申知识点：switch条件语句

switch 语句用于基于不同条件执行不同动作，作用与嵌套使用if语句基本相同，但switch语句更具有可读性，且允许在不符合条件的情况下执行默认的一组语句。

switch(表达式) {
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        默认代码块
}

switch语句中的表达式通常是一个变量，当表达式的值与任意一个case后面的值相同，就会执行该case后面的代码段；如果表达式的值不符合任意一个case的值，那么就会执行default后面代码段。

break用来阻止代码自动地向下一个 case 运行。

效果展示

code.juejin.cn/pen/7152882…

avatar
文章
阅读
粉丝