1. 程式人生 > >測試把javascript程式碼放在網頁的底部,測試放在底部的js方法能否正常呼叫

測試把javascript程式碼放在網頁的底部,測試放在底部的js方法能否正常呼叫

測試把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>