时间戳

首页 > 解决方案 > Javascript 根据一天中的时间在 iframe 中按顺序加载一系列页面？

javascript - Javascript 根据一天中的时间在 iframe 中按顺序加载一系列页面？

问题描述

本质上，我有一个网站，可以根据一天中的时间加载日程信息。我现在拥有它的方式非常低效，并且在我需要进行更改时使事情变得复杂。我有 7 个文件夹，一个用于一周中的每一天，在这些日常文件夹中有 24 个 HTML 页面，一个用于一天中的每个小时，然后在一个文件夹中我有多达 24 个带有日程表的页面。我想不出或找到一个脚本可以将每小时的 HTML 页面减少到一页。

这是我早上 7 点的代码示例。

此文件另存为 7.html。早上 8 点，它重定向到 index.html，而 index.html 又根据一天中的时间重定向到 8.html。

<script>
var intervalId = window.setInterval(checkTime, 500);

function checkTime() {

    var d = new Date();
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();

    if(h == 08 && m == 00 && s == 0) return window.location='../index.html';
}
</script>

这是包含计划信息的 iframe。如您所见，它从表文件夹（当前小时和接下来的三个小时）加载 7.html、8.html、9.html 和 10.html 的页面。每个表在下一个加载之前可见 10 秒，然后在下一小时重复。

<p align="center"><iframe id="if_one" frameBorder="0" scrolling="no" src="" style="width: 100%;height: 700px;float: middle;margin: 0 auto;"></iframe></p>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<script type="text/javascript">
var pages = [
    'tables/7.html',
    'tables/8.html',
    'tables/9.html',
    'tables/10.html'
], p = pages.length;
while(--p > -1){
    (function(p){
        var a = document.createElement('a');
        a.href = pages[p];
        pages[p] = a;
    })(p);
}

function loadIframe() {
var page = pages[(p = ++p % pages.length)], bust = 'bustcache=' + new Date().getTime();
page = page.search? page.href + '&' + bust : page.href + '?' + bust;
document.getElementById('if_one').src = page;

  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 100);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }

setTimeout(loadIframe, 10000);
}
loadIframe();
</script>

我想做的就是将所有这些都放在页面上。因此，如果是上午 8 点，它会加载 8.html 到 11.html 范围内的页面。如果是上午 9 点，它会加载 9.html 到 12.html 等范围内的页面。唯一的问题是有时没有每小时的时间表。例如，12 可能没有任何内容，因此脚本必须知道如果文件夹中不存在 table/12.html 则跳过它。

基本上：

这可能吗？

标签： javascript

解决方案

推荐阅读