九门宁生

导航

2019年8月27日 #

bom案例3-放大镜

摘要： common中的代码 阅读全文

posted @ 2019-08-27 17:49 九门宁生 阅读(137) 评论(0) 推荐(0)

bom案例2-弹出层

摘要： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; } ul, li, ol, 阅读全文

posted @ 2019-08-27 17:45 九门宁生 阅读(105) 评论(0) 推荐(0)

bom案例1-div拖拽

摘要： common中的代码 阅读全文

posted @ 2019-08-27 17:30 九门宁生 阅读(197) 评论(0) 推荐(0)

bom-scroll

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 100px; height: 100px; margin: 50px; border: 30px solid red; padding: 10 阅读全文

posted @ 2019-08-27 17:27 九门宁生 阅读(174) 评论(0) 推荐(0)

bom-client

摘要： Document 阅读全文

posted @ 2019-08-27 17:21 九门宁生 阅读(196) 评论(0) 推荐(0)

bom-offset

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { position: relative; width: 300px; height: 300px; background-color: red; overfl 阅读全文

posted @ 2019-08-27 17:19 九门宁生 阅读(179) 评论(0) 推荐(0)

bom-location

摘要： Document 阅读全文

posted @ 2019-08-27 17:12 九门宁生 阅读(143) 评论(0) 推荐(0)

bom-简单动画

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { position: relative; background-color: red; width: 100px; height: 100px; } </st 阅读全文

posted @ 2019-08-27 17:10 九门宁生 阅读(214) 评论(0) 推荐(0)

bom-倒计时

摘要： common中的代码 阅读全文

posted @ 2019-08-27 14:41 九门宁生 阅读(315) 评论(0) 推荐(0)

bom-setInterval

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="开始" id="btn1"> <input type="button" value="取消&qu 阅读全文

posted @ 2019-08-27 14:33 九门宁生 阅读(150) 评论(0) 推荐(0)

bom-删除提示

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; padding: 0; } #tip { width: 150px; height: 30px; background-color: lightgray; opacity: 阅读全文

posted @ 2019-08-27 13:56 九门宁生 阅读(159) 评论(0) 推荐(0)

bom-setTimeout

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="开始" id="btn1"> <input type="button" value="取消&qu 阅读全文

posted @ 2019-08-27 13:55 九门宁生 阅读(157) 评论(0) 推荐(0)

bom-页面加载事件

摘要： Document 阅读全文

posted @ 2019-08-27 13:36 九门宁生 阅读(290) 评论(0) 推荐(0)

bom-对话框

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="alert" id="btn1"> <input type="button" value="pr 阅读全文

posted @ 2019-08-27 13:30 九门宁生 阅读(161) 评论(0) 推荐(0)

window对象

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // 当我们是用window的成员的时候，window可以省略 // window.document // window.alert('hello'); // 定义的全局变量都属 阅读全文

posted @ 2019-08-27 13:23 九门宁生 阅读(106) 评论(0) 推荐(0)

bom详解

摘要： BOM的概念 BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 我们在浏览器中的一些操作都可以使用B 阅读全文

posted @ 2019-08-27 10:46 九门宁生 阅读(524) 评论(0) 推荐(0)

键盘事件

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> </script> </head> <body> <input id="txt" type="text"> <script> // 键盘事件 // keydown 键盘按下的时候 // 阅读全文

posted @ 2019-08-27 10:19 九门宁生 阅读(151) 评论(0) 推荐(0)

阻止冒泡

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width: 300px; height: 300px; background-color: red; } #box2 { width: 200px; height: 200px; backgr 阅读全文

posted @ 2019-08-27 10:18 九门宁生 阅读(153) 评论(0) 推荐(0)

取消默认行为的执行

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a id="link" href="http://www.baidu.com">baidu</a> <script> var link = document.getElementBy 阅读全文

posted @ 2019-08-27 10:16 九门宁生 阅读(303) 评论(0) 推荐(0)

获取鼠标早盒子中的 位置

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 300px; height: 300px; border: 1px solid red; margin: 100px 10px 10px 10 阅读全文

posted @ 2019-08-27 10:15 九门宁生 阅读(237) 评论(0) 推荐(0)

pageX的兼容性处理2

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 1000px; } </style> </head> <body> <script src="common.js"></script> <script> // e. 阅读全文

posted @ 2019-08-27 09:54 九门宁生 阅读(165) 评论(0) 推荐(0)

pageX的兼容性处理1

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 1000px; } </style> </head> <body> <script> // e.clientX/e.clientY 鼠标在可视区域中的位置 // // e.page 阅读全文

posted @ 2019-08-27 09:53 九门宁生 阅读(366) 评论(0) 推荐(0)

跟着鼠标飞的图片

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 1000px; } #ts { position: absolute; } </style> </head> <body> <img src="images/tianshi.gif 阅读全文

posted @ 2019-08-27 09:44 九门宁生 阅读(144) 评论(0) 推荐(0)

事件对象3

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; height: 1000px; } #box { margin: 100px; margin-top: 500px; width: 200px; height: 200px; 阅读全文

posted @ 2019-08-27 09:43 九门宁生 阅读(129) 评论(0) 推荐(0)

事件对象2

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { margin: 100px; width: 200px; height: 200px; background-color: red; } </style> 阅读全文

posted @ 2019-08-27 09:42 九门宁生 阅读(131) 评论(0) 推荐(0)

事件对象1

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width: 300px; height: 300px; background-color: red; } #box2 { width: 200px; height: 200px; backgr 阅读全文

posted @ 2019-08-27 09:37 九门宁生 阅读(122) 评论(0) 推荐(0)