測試把javascript程式碼放在網頁的底部,測試放在底部的js方法能否正常呼叫
阿新 • • 發佈:2018-12-08
測試把javascript程式碼放在網頁的底部,測試放在底部的js方法能否正常呼叫,看下執行效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>測試把javascript程式碼放在網頁的底部,看下執行效果</title> <link rel="stylesheet" type="text/css" href="body.css"> <script type="text/javascript"> //這是放在網頁<head標籤中的js函式 function testTopJS() { alert("我是放在網頁<head標籤中的js函式"); } </script> </head> <body> <div id="myDiv1" style="height: auto;"> <h3>測試把javascript程式碼放在網頁的底部,測試放在底部的js方法能否正常呼叫,看下執行效果</h3> <input type="text" value="點選我看效果(我是放在網頁<head>標籤中的js程式碼)" onclick="testTopJS()"><br> <br> <input type="button" value="測試放在網頁底部的js方法能否正常呼叫" onclick="testBottomJS()"> <br> <br> </div> <script type="text/javascript"> var count = 0; //定義一個顏色的陣列 var colors = new Array("red", "blue", "#228B22", "#8E388E", "#5B5B5B", "#0A0A0A"); //測試放在底部的js方法能否正常呼叫 function testBottomJS() { count++; var divNode = document.getElementById("myDiv1"); var h2Node = document.createElement("H2"); var myText = "說第" + count + "遍,你們去改變世界,我只想認真賺錢!"; var strongNodeText = '<strong style="color:' + createRandomColor(colors) + ';">' + myText + '</strong>'; h2Node.innerHTML = strongNodeText; divNode.appendChild(h2Node); } //產生隨機顏色 function createRandomColor(colorArray) { //產生隨機數 var randomNumber = Math.round(Math.random() * (colorArray.length - 1)); return colorArray[randomNumber]; } </script> </body> </html>