HTML 學習筆記 May 13，2017 js事件驅動機制、js事件分類、js訪問css技術、js事件驅動機制深入理解、js常用事件、js版計算器、dom編程開山篇、dom編程實例（烏龜抓雞）、
<body onmousedown="test1()" style="background-color: pink;">
<script language="javascript">
</script>
</body>
js 中
document.onmousedown = function(){alert('0');} // 加入這句的話,點擊鼠標就能響應事件
js 操作外部 css
<script language="javascript">
function test1(eventObj) {
// 怎么知道點擊的是哪個 button
window.alert(eventObj.value); // 打印出是按的哪個按鈕的 value 值
var div1 = document.getElementById('div1');
if (eventObj.value == "黑色") {
// 獲取 div1
div1.style.backgroundColor = "black";
} else if (eventObj.value == "紅色") {
div1.style.backgroundColor = "red";
}
}
</script>
<title>Test</title>
</head>
<body>
<div id="div1" style="width: 400px; height: 300px; background-color: gray;">div1</div>
<input type="button" value="黑色" onclick="test1(this)"/>
<input type="button" value="紅色" onclick="test1(this)"/>
</body>
直接獲取到 css 里邊所有的 class 選擇器，方法會根據瀏覽器的不同而略有不同。
function test2(eventObj) {
// 獲取 css 文件中的所有 class 選擇器
var ocssRules = document.styleSheets[0].rules;
}
到底使用的是哪個瀏覽器呢，下邊是判斷幾種常見的瀏覽器
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7,IE8 Mozilla就是火狐(其實是網景公布開源內核)
if (!window.ActiveXObject) { // Mozilla, Safari,
alert('Mozilla,Safari');
} else {
alert('IE');
}
} else {
alert('IE6');
}
<input type="text" onfocus="test3"/>
<body onload="test4">
不讓用戶點擊右鍵，以防拷貝網頁內容
<body oncontextmenu="return false" ...>
可以寫成下面的
<body oncontextmenu="return test5()" ...> // 響應 test5 的方法
<body oncontextmenu="return test5()" onselectstart="return test6()" onload="test4" onunload="" onbeforeunload="">
js 更重要的作用是可以讓用戶對網頁元素進行交互操作，這才是學習 js 的精華之所在。
// 響應用戶點擊按鈕,或者是按下鍵盤
function move(obj) {
// 得到烏龜圖片的高度和寬度
var wugui_height = 67;
var wugui_width = 94;
// 公雞的圖片的高度和寬度
var cock_height = 73;
var cock_width = 76;
// 得到烏龜所在的 div 對象[這里就提現了 dom 特色]
var wugui = document.getElementById("wugui");
// window.event 可以判斷用戶是通過點擊按鈕,還是通過鍵盤來控制烏龜
if (window.event) {
// 獲得用戶按下鍵的 code
key = obj.keyCode;
}
// 得到該烏龜當前的 top 和 left
var wugui_top = wugui.style.top;
// 處理 px 后綴
var wugui_left = wugui.style.left;
// 下面兩句話是把獲取的 "100px" --> 100
wugui_top = parseInt(wugui_top.substring(0,wugui_top.indexOf("p")));
wugui_left = parseInt(wugui_left.substring(0,wugui_left.indexOf("p")));
// window.alert(wugui_top);
// 判斷用戶點擊哪個按鈕
if (obj.value = "向下走" || key == 83) {
wugui.style.top = (wugui_top + 10) + "px";
wugui_top = wugui_top + 10;
} else if (obj.value == "向右走" || key == 68) {
wugui.style.left = (wugui_left + 10) + "px";
wugui_left = wugui_left + 10;
} else if (obj.value == "向左走" || key == 65) {
wugui.style.left = (wugui_left - 10) + "px";
wugui_left = wugui_left - 10;
} else if (obj.value == "向上走" || key == 87) {
wugui.style.top = (wugui_top - 10) + "px";
wugui_top = wugui_top - 10;
}
// 判斷烏龜是否碰到雞
// 得到公雞的 left 和 top
var cock = document.getElementById("cock");
// 得到該公雞當前的 top 和 left
var cock_top = cock.style.top;
// 處理 px 后綴
var cock_left = cock.style.left;
cock_top = parseInt(cock_top.substring(0,cock_top.indexOf("p")));
cock_left = parseInt(cock_left.substring(0,cock_left.indexOf("p")));
y = Math.abs(cock_top - wugui_top); // 兩點間縱坐標的絕對值
x = Math.abs(cock_left - wugui_left); // 兩點間橫坐標的絕對值
// 方法一
// 判斷條件
xx = 0;
yy = 0;
// 判斷縱向
if (wugui_top < cock_top) {
if (y < wugui_height) {
yy = 1;
}
} else {
if (y < cock_height) {
yy = 1;
}
}
// 判斷橫向
if (wugui_left < cock_left) {
if (x < wugui_width) {
xx = 1;
}
} else {
if (x < cock_width) {
xx = 1;
}
}
if (xx == 1 && yy == 1) {
window.alert("烏龜好猛啊,頂！d=====(￣▽￣*)b");
wugui.style.top = 120 + "px";
wugui.style.left = 100 + "px";
}
// 方法二
// 從上面來的
if (wugui_top < cock_top)
{
// 左
if (wugui_left < cock_left)
{
if (y < wugui_height && x < wugui_width)
{
window.alert("烏龜好猛啊,頂！d=====(￣▽￣*)b");
wugui.style.top = 120 + "px";
wugui.style.left = 100 + "px";
}
}
// 右
else if (y < wugui_height && x < cock_width)
{
window.alert("烏龜好猛啊,頂！d=====(￣▽￣*)b");
wugui.style.top = 120 + "px";
wugui.style.left = 100 + "px";
}
}
// 從下面來的
else
