ページ読み込み時に、JavaScriptの複数の関数を呼び出し実行するサンプル。
構文
window.onload = function () { // ページ読み込み時に実行する無名関数
関数名1(); // 1つ目の関数呼び出し
関数名2(); // 2つ目の関数呼び出し
関数名3(); // 3つ目の関数呼び出し
}
関数名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>
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>
<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>
#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>