ページ読み込み時に、複数の関数を呼び出す

ページ読み込み時に、JavaScriptの複数の関数を呼び出し実行するサンプル。

構文

window.onload = function () { // ページ読み込み時に実行する無名関数
    関数名1(); // 1つ目の関数呼び出し
    関数名2(); // 2つ目の関数呼び出し
    関数名3(); // 3つ目の関数呼び出し
}

実装例

0
0

ソースコード

JavaScript

<script type="text/javascript">
window.onload = function () { // ページ読み込み時
    funcAdd1(); // 関数呼び出し
    funcAdd2(); // 関数呼び出し
}
function funcAdd1() {
    var $num = parseInt( document.getElementById( "sample1" ).firstChild.nodeValue );
    document.getElementById( "sample1" ).innerHTML = $num + 1;
    if ( $num + 1 < 10 ) {
        window . setTimeout( "funcAdd1()", 1000);
    }
}
function funcAdd2() {
    var $num = parseInt( document.getElementById( "sample2" ).firstChild.nodeValue );
    document.getElementById( "sample2" ).innerHTML = $num + 2;
    if ( $num + 2 < 20 ) {
        window . setTimeout( "funcAdd2()", 1000);
    }
}
</script>

HTML

<div id="sample1">0</div>
<div id="sample2">0</div>
<div style="clear: left;"></div>

CSS

<style type="text/css">
#sample1, #sample2 {
    float: left;
    width: 150px;
    padding: 30px;
    font-size: 30px;
    color: white;
    text-align: center;
    border-radius: 10px;
}
#sample1 {
    background-color: red;
}
#sample2 {
    background-color: blue;
}
</style>

スポンサード リンク

カテゴリー: JavaScript, イベント パーマリンク