Question

我有2个变量名称第一个和最后一个。当窗口大小小于768px时，我希望first = 1且last = 5.当窗口大小大于768px时，first = 1且last = 3.这是我的代码。

var first = 1;
var last = 5;
window.onresize = function(){
    var w = window.innerWidth 
            || document.documentElement.clientWidth 
            || document.getElementsByTagName('body')[0].clientWidth;

    if (w <= 768){
        first = 1;
        last = 3;
    }

    if (w > 768){
        first = 1;
        last = 5;
    }
}

它奏效了。但是当窗口大小为600px（小于768px）时，我按F5（刷新），第一个变量= 1，最后一个= 5（这些值被更改）。我想按F5，如果窗口小于768px，它仍然是1和3.我现在能做什么？帮我。感谢。

Answer 1

这应该是这样的。

现在，我们有一个函数可以根据Window的宽度设置变量。我们称之为两次

加载页面时，应根据窗口大小设置变量（第一个，最后一个）

当页面调整大小时，您应该再次设置变量。

var first = 1;
var last = 5;

function setVariables()
{
var w = window.innerWidth 
        || document.documentElement.clientWidth 
        || document.getElementsByTagName('body')[0].clientWidth;

if (w <= 768){
    first = 1;
    last = 3;
}

if (w > 768){
    first = 1;
    last = 5;
}
}

window.onresize = function(){
setVariables();
} 

setVariables();

Answer 2

只需将您的函数移动到单独的函数中，然后在页面加载时重复使用它：

function checkWidth(){
    var w = window.innerWidth 
            || document.documentElement.clientWidth 
            || document.getElementsByTagName('body')[0].clientWidth;

    if (w <= 768){
        first = 1;
        last = 3;
    }

    if (w > 768){
        first = 1;
        last = 5;
    }
} 

...

var first = 1;
var last = 5;
window.onresize = checkWidth;
window.onload = checkWidth;

在javascript中刷新页面时阻止变量的变化值

2 个答案: