起风网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 和 leftvar wugui_top = wugui.style.top;// 处理 px 后缀var wugui_left = wugui.style.left;// 下面两句话是把获取的 "100px" --> 100wugui_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 和 topvar cock = document.getElementById("cock");// 得到该公鸡当前的 top 和 leftvar 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原著是一个有趣的人,若有侵权,请通知删除
评论前必须登录！
立即登录