JS怎么根据当天不同时间显示不同广告

第一段： 在前端实现当天不同时间显示不同广告的功能，我们需要用到JS的日期和时间相关的对象。首先先声明一个Date对象，然后通过对象的getHours()方法，取得当前时间的小时数。接着，我们需要根据当前小时数对应不同的广告进行显示。因此，我们需要用到if-else语句进行条件判断，并在指定条件下输出相应广告。下面是一个简单的示例代码，该代码假定我们需要在早上8点至晚上20点之间展示广告A，而在其他时间展示广告B。

  
JS代码示例
  
以下代码会根据当前时间在页面上输出不同的广告
  
    const date = new Date();
    const hours = date.getHours();

    if (hours >= 8 && hours <= 20) {
      document.write('广告A');
    } else {
      document.write('广告B');
    }
  

第二段：

上述示例代码只是一个简单的实现，还有很多可以优化和改进的地方。一个更好的实现方法是将广告数据存储在一个数组中，然后根据当前时间选择对应的广告内容。下面是一个示例代码，该代码使用了数组和循环语句，能够在任意时间范围内显示不同的广告。

  
JS代码示例
  
以下代码会根据当前时间在页面上输出不同的广告
  
    const ads = [
      {
        timeRange: [0, 8], // 时间区间
        content: '早晨好！', // 对应广告内容
      },
      {
        timeRange: [8, 12],
        content: '上午好！',
      },
      {
        timeRange: [12, 18],
        content: '下午好！',
      },
      {
        timeRange: [18, 24],
        content: '晚上好！',
      },
    ];

    const date = new Date();
    const hours = date.getHours();

    let adContent = '';

    for (let i = 0; i < ads.length; i++) {
      const ad = ads[i];

      if (hours >= ad.timeRange[0] && hours < ad.timeRange[1]) {
        adContent = ad.content;
        break;
      }
    }

    document.write(adContent);
  

第三段：

对于以上示例代码，虽然能够正确地根据当前时间展示对应的广告，但是有一些潜在问题。比如，如果广告数量很多，上述代码中的循环过程将会变得非常耗时；如果需要频繁刷新页面，会影响用户的体验。因此，我们需要对上述代码进行优化，使用缓存的方式来避免重复计算。下面是一个优化后的示例代码：

  
JS代码示例
  
以下代码会根据当前时间在页面上输出不同的广告，使用缓存来避免重复计算
  
    const ads = [
      {
        timeRange: [0, 8],
        content: '早晨好！',
      },
      {
        timeRange: [8, 12],
        content: '上午好！',
      },
      {
        timeRange: [12, 18],
        content: '下午好！',
      },
      {
        timeRange: [18, 24],
        content: '晚上好！',
      },
    ];

    const cache = {}; // 缓存对象，用于保存已经计算过的广告内容

    function getAdContent() {
      const date = new Date();
      const hours = date.getHours();

      if (cache[hours]) {
        return cache[hours];
      }

      let adContent = '';

      for (let i = 0; i < ads.length; i++) {
        const ad = ads[i];

        if (hours >= ad.timeRange[0] && hours < ad.timeRange[1]) {
          adContent = ad.content;
          break;
        }
      }

      cache[hours] = adContent;
      return adContent;
    }

    document.write(getAdContent());
  

第四段：

通过以上的示例代码，我们在JS中实现了根据当前时间在页面上显示不同广告的功能。同时，我们也学习了一些JS的编程技巧和常用的语法结构，如日期和时间相关的对象、if-else语句、数组、循环语句等等。通过这些基础知识的掌握，我们可以在日常的前端工作中更加自如地处理各种任务。