javascript - 在主体加载 javascript 上调用函数?

标签 javascript onload

<分区>

Possible Duplicate:
run function when page is loaded

我体内有一个脚本,一个相对较长的脚本,我想将其放入一个单独的 .js 文件中,然后在主体加载时调用该函数,而不是将脚本放在主体中,但我没有知道怎么调用它。帮忙?

脚本:

            <script type="text/javascript">
            // Set the number of snowflakes (more than 30 - 40 not recommended)
     var snowmax = 35

     // Set the colors for the snow. Add as many colors as you like
     var snowcolor = new Array("#ddddff", "#ccccdd", "#f3f3f3", "#f0ffff")

     // Set the fonts, that create the snowflakes. Add as many fonts as you like
     var snowtype = new Array("Times", "Arial", "Times", "Verdana")

     // Set the letter that creates your snowflake (recommended: * )
     var snowletter = "*"

     // Set the speed of sinking (recommended values range from 0.3 to 2)
     var sinkspeed = 0.6

     // Set the maximum-size of your snowflakes
     var snowmaxsize = 30

     // Set the minimal-size of your snowflakes
     var snowminsize = 8

     // Set the snowing-zone
     // Set 1 for all-over-snowing, set 2 for left-side-snowing
     // Set 3 for center-snowing, set 4 for right-side-snowing
     var snowingzone = 1

     ///////////////////////////////////////////////////////////////////////////
     // CONFIGURATION ENDS HERE
     ///////////////////////////////////////////////////////////////////////////


     // Do not edit below this line
     var snow = new Array()
     var marginbottom
     var marginright
     var timer
     var i_snow = 0
     var x_mv = new Array();
     var crds = new Array();
     var lftrght = new Array();
     var browserinfos = navigator.userAgent
     var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/)
     var ns6 = document.getElementById && !document.all
     var opera = browserinfos.match(/Opera/)
     var browserok = ie5 || ns6 || opera

         function randommaker(range) {
             rand = Math.floor(range * Math.random())
             return rand
         }

         function initsnow() {
             if (ie5 || opera) {
                 marginbottom = document.body.scrollHeight
                 marginright = document.body.clientWidth - 15
             } else if (ns6) {
                 marginbottom = document.body.scrollHeight
                 marginright = window.innerWidth - 15
             }
             var snowsizerange = snowmaxsize - snowminsize
             for (i = 0; i <= snowmax; i++) {
                 crds[i] = 0;
                 lftrght[i] = Math.random() * 15;
                 x_mv[i] = 0.03 + Math.random() / 10;
                 snow[i] = document.getElementById("s" + i)
                 snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)]
                 snow[i].size = randommaker(snowsizerange) + snowminsize
                 snow[i].style.fontSize = snow[i].size + 'px';
                 snow[i].style.color = snowcolor[randommaker(snowcolor.length)]
                 snow[i].style.zIndex = -1;
                 snow[i].sink = sinkspeed * snow[i].size / 5
                 if (snowingzone == 1) {
                     snow[i].posx = randommaker(marginright - snow[i].size)
                 }
                 if (snowingzone == 2) {
                     snow[i].posx = randommaker(marginright / 2 - snow[i].size)
                 }
                 if (snowingzone == 3) {
                     snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4
                 }
                 if (snowingzone == 4) {
                     snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2
                 }
                 snow[i].posy = randommaker(2 * marginbottom - marginbottom - 2 * snow[i].size)
                 snow[i].style.left = snow[i].posx + 'px';
                 snow[i].style.top = snow[i].posy + 'px';
             }
             movesnow()
         }

         function movesnow() {
             for (i = 0; i <= snowmax; i++) {
                 crds[i] += x_mv[i];
                 snow[i].posy += snow[i].sink
                 snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + 'px';
                 snow[i].style.top = snow[i].posy + 'px';

                 if (snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i])) {
                     if (snowingzone == 1) {
                         snow[i].posx = randommaker(marginright - snow[i].size)
                     }
                     if (snowingzone == 2) {
                         snow[i].posx = randommaker(marginright / 2 - snow[i].size)
                     }
                     if (snowingzone == 3) {
                         snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4
                     }
                     if (snowingzone == 4) {
                         snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2
                     }
                     snow[i].posy = 0
                 }
             }
             var timer = setTimeout("movesnow()", 50)
         }

     for (i = 0; i <= snowmax; i++) {
         document.write("<span id='s" + i + "' style='position:absolute;top:-" + snowmaxsize + "'>" + snowletter + "</span>")
     }
     if (browserok) {
         window.onload = initsnow
     }
            </script>

最佳答案

您可以使用 <body onload="aFunction()">直接使用 HTML 主体声明,或者您可以使用 jQuery 做同样的事情我发现它更具可读性:

$(document).ready(function() {
    aFunction();
});
// This will wait for the DOM (your HTML) to be loaded before executing aFunction

甚至做:

$(window).load(function () {
    aFunction(); 
});
// This will wait for every element in the page (including CSS, JS files ...) 
// to be loaded before executing aFunction

使用 jQuery 而不是旧版 Javascript 的另一个优势是您的代码将可用于所有主要浏览器。

关于javascript - 在主体加载 javascript 上调用函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14368583/

相关文章:

javascript - 互斥数据属性选择器

javascript - 带有 Phaser.io : High speed, Sprite 的 HTML5 游戏不会发生碰撞

javascript - 如何以 Angular 对姓氏列表进行排序?

javascript - 页面加载时执行 JQuery 函数,而不是在 .keyup 上执行

javascript - onload 属性在 jsp 中不起作用

javascript - 我需要一个不是 setTimeout() 的延迟

javascript - JS 方法绑定(bind) 2 个不同的 this

javascript - php 中的 site-onload-gif

javascript - 如何在 CSS 样式表完成加载时运行函数

Javascript 不使用输入读取文件