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
