javascript - 为什么这个脚本在 Chrome 中不起作用？

Question

这是我以前用过的旧脚本。现在我注意到，当添加到我的个人网站时，https://andreaconsole.altervista.org ，它仍然适用于 IE，但不适用于 Chrome。另一方面，它作为一个片段。面向网站管理员的 Chrome 工具未显示任何错误:您能看出原因吗？

var speed = 30; // lower number for faster
var flakes = 60; // number of flakes
var flake_image = "https://andreaconsole.altervista.org/immagini/snowstorm/snow.gif"; // location of snowflake graphic
var xmasstartday = 8;
var xmasstartmonth = 10;
var xmasstopday = 8;
var xmasstopmonth = 0;
//check if we are on xmas time
var datenow = new Date();
var monthnow = datenow.getMonth();
var daynow = datenow.getDate();
if (!(((monthnow == xmasstartmonth) && (daynow >= xmasstartday)) || ((monthnow == xmasstopmonth) && (daynow <= xmasstopday)))) {
  throw new Error('This is not an error. This is just to abort javascript');
}

/***************************\
*Winter Drifting Snow Effect*
*(c) 2006   mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
\***************************/
/* prelevato ed illustrato su Web-Link.it 
 ******************************************/
var swide, shigh;
var dx = new Array();
var xp = new Array();
var yp = new Array();
var am = new Array();
var sty = new Array();

window.onload = function() {
  if (document.getElementById) {
    var k, f, b;
    b = document.createElement("div");
    b.style.position = "absolute";
    b.setAttribute("id", "bod");
    document.body.appendChild(b);
    set_scroll();
    set_width();
    for (var i = 0; i < flakes; i++) {
      dx[i] = 0;
      am[i] = Math.random() * 20;
      xp[i] = am[i] + Math.random() * (swide - 2 * am[i] - 25);
      yp[i] = Math.random() * shigh;
      sty[i] = 0.75 + 1.25 * Math.random();
      f = document.createElement("div");
      f.style.position = "absolute";
      f.setAttribute("id", "flk" + i);
      f.style.zIndex = i;
      f.style.top = yp[i] + "px";
      f.style.left = xp[i] + "px";
      k = document.createElement("img");
      k.src = flake_image;
      f.appendChild(k);
      b.appendChild(f);
    }
    setInterval("winter_snow()", speed);
    window.onresize = set_width;
    window.onscroll = set_scroll;
  }
}


function set_width() {
  if (document.documentElement && document.documentElement.clientWidth) {
    swide = document.documentElement.clientWidth;
    shigh = document.documentElement.clientHeight;
  } else if (typeof(self.innerHeight) == "number") {
    swide = self.innerWidth;
    shigh = self.innerHeight;
  } else if (document.body.clientWidth) {
    swide = document.body.clientWidth;
    shigh = document.body.clientHeight;
  } else {
    swide = 800;
    shigh = 600
  }
}


function set_scroll() {
  var sleft, sdown;
  if (typeof(self.pageYOffset) == "number") {
    sdown = self.pageYOffset;
    sleft = self.pageXOffset;
  } else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown = document.body.scrollTop;
    sleft = document.body.scrollLeft;
  } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft = document.documentElement.scrollLeft;
    sdown = document.documentElement.scrollTop;
  } else {
    sdown = 0;
    sleft = 0;
  }
  document.getElementById("bod").style.top = sdown + "px";
  document.getElementById("bod").style.left = sleft + "px";
}

function winter_snow() {
  for (var i = 0; i < flakes; i++) {
    yp[i] += sty[i];
    if (yp[i] > shigh - 30) {
      xp[i] = am[i] + Math.random() * (swide - 2 * am[i] - 25);
      yp[i] = 0;
      sty[i] = 0.75 + 1.25 * Math.random();
    }
    dx[i] += 0.02 + Math.random() / 10;
    document.getElementById("flk" + i).style.top = yp[i] + "px";
    document.getElementById("flk" + i).style.left = (xp[i] + am[i] * Math.sin(dx[i])) + "px";
  }
}

PS:小编一直在问我更多的细节，但我没有更多的细节可以补充。我应该简单地添加随机文本来让他开心吗？

Answer 1

雪花在 Chrome 62 中以零高度和零宽度呈现。

添加以下行以明确设置它们，可能就在

下面

f.style.width = "25px";
f.style.height = "25px";

因此您的onload 函数变为:

window.onload = function() {
    if (document.getElementById) {
        var k, f, b;
        b = document.createElement("div");
        b.style.position = "absolute";
        b.setAttribute("id", "bod");
        document.body.appendChild(b);
        set_scroll();
        set_width();
        for (var i = 0; i < flakes; i++) {
            dx[i] = 0;
            am[i] = Math.random() * 20;
            xp[i] = am[i] + Math.random() * (swide - 2 * am[i] - 25);
            yp[i] = Math.random() * shigh;
            sty[i] = 0.75 + 1.25 * Math.random();
            f = document.createElement("div");
            f.style.position = "absolute";
            f.setAttribute("id", "flk" + i);
            f.style.zIndex = i;
            f.style.top = yp[i] + "px";
            f.style.left = xp[i] + "px";

            // Explicitly set height and width
            f.style.width = "25px";
            f.style.height = "25px";

            k = document.createElement("img");
            k.src = flake_image;
            f.appendChild(k);
            b.appendChild(f);
        }
        setInterval("winter_snow()", speed);
        window.onresize = set_width;
        window.onscroll = set_scroll;
    }
}