javascript - 在页面刷新时循环三个 div

Question

我有三个 div，我想在每次刷新页面时显示不同的 div。所以首先是 div1，然后是 div2，然后是 div3，然后回到 div1 等等。

我已经用谷歌搜索了，但我能找到的是完全相反的东西，即在一段时间后(例如 10 秒)刷新 div 而没有页面刷新。

(顺便说一句，我使用 Jquery，但普通的 javascript 也不错)

Answer 1

您没有说明为什么要在页面刷新时这样做。

如果预期的刷新是用户驱动的，这是否可以在服务器端完成(您需要维护某种页面加载次数的状态，可能在 cookie 中)。

如果您自己引起刷新(您有一个按钮或一个定时操作，在 JS 中刷新页面)，那么在同一位置您可以交换 div(通过 ajax 或通过 hvaing 将所有三个 div 加载到页面并使用 jquery 隐藏/显示)。

cookie 可以存储与 div 相关的数字。然后js或服务器端找到div(如果他们是 sibling ，可能基于js中的第n个 child 选择，如果不是通过寻找id为'#div'+index的div)

• > Reading/Writing cookies injavascript
• > jquery nth-childselector

所以在伪代码中:

• 在页面加载时检查 cookie 是否存在，如果是这样读取它的值，然后通过增加它来设置它在一个循环中(即如果它命中 3 将其设置为 1)
• 使用 'hide()' 隐藏所有 div
• 使用“show()”和读入值(从您更改之前的 cookie)使用 nth-child 或 id 选择 div选择器并显示它

编辑如果你想要一个只有 javascript 的解决方案，假设你的 html 是:

<div id="div1">
    div 1
</div>
<div id="div2">
    div 2
</div>
<div id="div3">
    div 3
</div>

您可以在头部添加以下脚本。它使用 quirksmode cookie 读/写方法。您可能希望将它们替换为 jquery cookie 插件(或其他任何插件)。它还隐藏了从底线开始第四个 div 中的所有 div，您更有可能想要使用专门选择您的三个的 jquery 选择器:

function createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            }
            else var expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        }

        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
        $(function () {
            var val = readCookie('div'); // Get last value
            createCookie('div', "", -1); // clear cookie
            $('div').hide(); // hide all divs
            val = (val == null || val == 3) ? 1 : (Number(val) + 1); // incremeent value
            $('#div' + val).show(); // show current div
            createCookie('div', val, 1); // set value for next time
        });

这是一个只有 javascript 和 cookie 的解决方案