JavaScript_Bak
文章平均质量分 79
Bwz_Learning
Change the world by program.
展开
-
50、JavaScript里面,自定义事件的简单实现(事件队列的简单实现)
1、JavaScript里面,自定义事件的简单实现(事件队列的简单实现)2、实现的代码var Event = { on: function(eventName, callback) { //下面的两个undefined的判断很重要 //保证了,动态的初始化了,对象的属性 if(typeof Event.handlers == "undefi原创 2016-08-02 21:44:46 · 990 阅读 · 1 评论 -
30、JavaScript中简单拖拽DIV的实现
1、DIV拖拽的实现 2.1 简易拖拽 .拖拽原理--距离不变--三个事件 onmousedown 存储距离,并发生onmousemove onmousemove 根据距离,计算div最新的位置 onmouseup 停止拖拽的发生,也就是当onmouseup时,onmousemo原创 2016-06-18 22:18:26 · 473 阅读 · 0 评论 -
29、JavaScript的event对象和事件冒泡
1、event对象和事件冒泡 1.1、什么是event对象 • 用来获取事件的详细信息:鼠标位置、键盘按键 – 例子:获取鼠标位置:clientX – document的本质:document.childNodes[0].tagName 1.2、获取event对象(兼容性写法)原创 2016-06-16 17:39:46 · 387 阅读 · 0 评论 -
28、JavaScript中真和假的判定
1、什么是真、什么是假 • 真:true、非零数字、非空字符串、非空对象 • 假:false、数字零、空字符串、空对象、undefined原创 2016-06-16 15:12:27 · 418 阅读 · 0 评论 -
27、NaN以及==和===的用法
1、NaN 1.1 JavaScript以NaN的形式输出Number.NaN. 请注意, 1、 NaN 与其他数值进行比较的结果总是不相等的,“包括它自身在内”。 2、 因此,不能与 Number.NaN 比较来检测一个值是不是数字,而只能调用 isNaN() 来比较。 3、 请使用 isNaN() 来判断一个值是否是原创 2016-06-16 14:44:37 · 418 阅读 · 0 评论 -
26、JavaScript的基础typeof的用法(undefined的理解)
1. 变量类型——typeof检测类型2. typeof 返回的数据类型种类:number、string、boolean、undefined、object、function3. object对象类型——基本类型(number、string、boolean、undefined)与复合类型(由基本类型所组成)的对比、数组4. 一个变量的类型取决于其里面存放的内容,比如4.1 var a原创 2016-06-16 14:39:17 · 407 阅读 · 0 评论 -
25、DOM的高级应用2-------表格内容的排序
1、DOM的高级应用2-------表格内容的排序(一次正序排列,一次反序排列)2、实现的原理,就是利用数组的排序3、实现的代码 表格的排序 window.onload = function() { var oBtn = document.getElementById('btn1'); var oTab = document.getElem原创 2016-06-15 22:25:29 · 444 阅读 · 0 评论 -
24、DOM的高级应用1-------表格的动态删除和添加行的操作
1、DOM的高级应用1-------表格的动态删除和添加行的操作2、注意oTab.tBodies[0].rows[0].cells[1].innerHTML的使用形式3、代码的实现 表格的高级应用 window.onload = function() { var oTab = document.getElementById('tab1');原创 2016-06-15 22:18:58 · 714 阅读 · 0 评论 -
23、DOM的高级应用-------关于Ul中的 li 的排序
1、排序 • 移动Li • 元素排序:转换——排序——插入 //父节点.appendChild()的实现,会把这个元素节点从ul里面删除,然后在加入。 // 就好比,人上班一样。再加入新的公司,要在当前的公司,离职一样2、排序的实现代码 DOM中的UL的排序 window.onload = fun原创 2016-06-15 21:36:05 · 2187 阅读 · 2 评论 -
22、在JavaScript中,判断是否是function的兼容各个浏览器的方法
1、利用typeof判断alert是否是函数,会返回object.不会返回函数(在IE8中)2、在JavaScript中,判断是否是function的兼容各个浏览器的方法function isFunction(fn){ if( !fn ) return false; var s = "toString", v = "valueOf", t原创 2016-06-15 11:13:31 · 454 阅读 · 0 评论 -
48、JavaScript的运动----无缝运动的实现
1、JavaScript的运动----无缝运动的实现2、测试代码 * { margin: 0; padding: 0; } #div1 { position: relative; border: 1px solid black; width: 680px; height: 132px; marg原创 2016-06-28 13:23:50 · 389 阅读 · 0 评论 -
31、JavaScript中,让一个div在固定的父div中任意拖动
1、css代码 #big { border: 1px solid #FF3300; width: 300px; height: 300px; position: relative; } #small { background: #99CC00; width: 50px; heig原创 2016-06-18 22:21:51 · 6288 阅读 · 1 评论 -
32、JavaScript中选项卡的实现
1、CSS代码 #div1 input { background: #CCC; } #div1 .active { background: yellow; } #div1 div { width: 200px; height: 200px; background: #CCC; display: non原创 2016-06-18 22:25:44 · 315 阅读 · 0 评论 -
42、JavaScript的运动----多个物体同时运动
1、多个物体同时运动 ---例子:多个Div,鼠标移入变宽 单定时器,存在问题 每个Div一个定时器2、多物体运动框架定时器作为物体的属性参数的传递:物体、目标值 ---例子:多个Div淡入淡出 所有东西都不能公用 属性与运动对象绑定:速度、其他属性值(如透明度等)原创 2016-06-23 13:56:21 · 558 阅读 · 0 评论 -
41、JavaScript的运动----运动的终止条件
1、运动终止条件 • 匀速运动:距离足够近 • 缓冲运动:两点重合 (具体上面的一个博客的内容)2、匀速运动终止的条件 #div1 { width: 100px; height: 100px; position: absolute; background: red; left: 0;原创 2016-06-20 18:03:58 · 434 阅读 · 0 评论 -
40、JavaScript的运动----缓冲运动
1、缓冲运动 • 逐渐变慢,最后停止 • 距离越远速度越大 – 速度由距离决定 – 速度 = (目标值 - 当前值 ) / 缩放系数 • 关于小数的取整问题 – Math.ceil(12.52) 向上取整 – Math.floor(8.99) 向下取整2、缓冲运动的代码原创 2016-06-20 17:51:52 · 348 阅读 · 0 评论 -
39、JavaScript的运动----淡入淡出的图片
1、JavaScript的运动----淡入淡出的图片 1.1 透明度的兼容性写法 1.2 利用变量来保存透明度的变化 1.3 代码 /*用于兼容浏览器*/ #img1 { /*IE*/ filter: alpha(opacity: 30); /*FF和Chrome*/ opacity: 0.3原创 2016-06-20 16:31:48 · 429 阅读 · 0 评论 -
38、JavaScript的运动----分享到侧边栏
1、“分享到”侧边栏 1.1 传三个参数的函数(运动对象的id,速度,目标点) #div1 { width: 100px; height: 200px; background: #CCC; position: absolute; /*用于隐藏*/ left: -100px; } #d原创 2016-06-20 16:13:14 · 352 阅读 · 0 评论 -
37、JavaScript的运动-----匀速运动
1、运动基础 • 让Div运动起来 • 速度——物体运动的快慢 • 运动中的Bug – 不会停止 – 速度取某些值会无法停止 – 到达位置后再点击还会运动 – 重复点击速度加快2、匀速运动 • 速度不变3、匀速运动的代码 运动1原创 2016-06-20 15:40:25 · 561 阅读 · 0 评论 -
36、JavaScript中两个DIV的碰撞检测
1、碰撞检测的原理2、碰撞检测的代码#div1 {width:100px; height:100px; background:red; position:absolute; z-index:2;}#div2 {width:100px; height:100px; background:yellow; position:absolute; left:230px; top:2原创 2016-06-20 14:32:36 · 4311 阅读 · 0 评论 -
35、JavaScript中DIV的完美拖拽---解决拖拽中的文字选中的问题
1、拖拽中的文字选中问题 1.1 阻止默认事件 1.2 IE下拖拽有问题 -- 事件捕获2、代码#div1 {width:100px; height:100px; background:red; position:absolute;}无标题文档window.onload=function (){ var o原创 2016-06-20 14:16:14 · 5683 阅读 · 0 评论 -
34、JavaScript中事件中的this
1、JavaScript中事件中的this 1.1 在IE下为--->window 1.2 在FF和Chrome下为---->绑定事件对象的本身2、测试代码 事件的高级应用 window.onload = function() { var oBtn = document.getElementById("btn1")原创 2016-06-19 14:49:58 · 476 阅读 · 0 评论 -
33、JavaScript中磁性吸附的实现
1、在30、JavaScript中简单拖拽DIV的实现中修改,边界的检测条件 /*4、进行边界的判断*/ /*检测左边的边界*/ if (left < 30) { left = 0; } /*检测右边的边界*/ else if (left > clientWidth - oDiv.offsetWidth - 30) { left = cl原创 2016-06-18 22:33:20 · 1294 阅读 · 0 评论 -
47、JavaScript的运动----完美运动框架的应用----放大缩小图片的实现(布局转换的实现)
1、JavaScript的运动----完美运动框架的应用----放大缩小图片的实现2、测试代码 2.1 move.js/** * 可以方便的获取到非行间样式的数值 * @param {Object} obj * @param {Object} attr */function getStyle(obj, attr) { if (obj.currentStyle) {原创 2016-06-28 13:16:16 · 669 阅读 · 0 评论 -
46、JavaScript的运动----完美运动框架的实现----注意运动停止的判断的技巧
1、完美运动框架 多个值同时变化 • setStyle同时设置多个属性 – 参数传递 » Json的使用 » for in遍历属性 • 运用到运动框架 • 检测运动停止 –标志变量 •例子:伸缩同时淡入淡出的菜单2、运动框架的总结原创 2016-06-28 12:51:35 · 556 阅读 · 0 评论 -
45、JavaScript的运动----链式运动----回调函数fn参数的添加
1、链式运动框架 回调函数 • 运动停止时,执行函数 • 运动停止时,开始下一次运动2、测试代码 2.1 move.js代码function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else原创 2016-06-28 12:42:57 · 508 阅读 · 0 评论 -
12、JavaScript中定时器setInterval()的用法
1、JavaScript中定时器setInterval()的用法 1.1 html代码 开始 停止 0 1.2 style代码 #container { margin: 0 auto; width: 200px; height: 100px;原创 2016-05-06 22:00:06 · 780 阅读 · 0 评论 -
11、JavaScript生成随机数
1、JavaScript生成随机数 1.1 JavaScript代码 JavaScript生成随机数 var arr = ['a.png', 'b.png', 'c.png', 'd.png']; var key = Math.floor(Math.random() * arr.length); var myimg = do原创 2016-05-06 18:44:36 · 726 阅读 · 0 评论 -
10、JavaScript利用正则去除前后空格
1、JavaScript利用正则去除前后空格 1.1 JavaScript代码 function trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ''); } var a = " aa "; alert(a.length) var b = a.trim(); alert(trim(b).length)原创 2016-05-06 17:14:40 · 1091 阅读 · 0 评论 -
9、利用JavaScript在网站显示时间
1、利用JavaScript在网站显示时间 1.1 html代码 1.2 style代码 #mytime { background: #000; width: 300px; height: 30px; margin: 0 auto; color: #fff; text-align: center; line-height: 30px原创 2016-05-06 16:05:47 · 310 阅读 · 0 评论 -
8、关于窗口和文档的几个重要的高度
1、文档区域的高度 document.body.clientHeight2、窗口可视化区域的高度和宽度 document.documentElement.clientHeightdocument.documentElement.clientWidth3、窗口的总高度document.documentElement.scrollHeight4原创 2016-05-06 15:24:54 · 825 阅读 · 0 评论 -
7、网页上的div居中
1、网页中的一个div的居中的实现 1.1 html代码 1.2 style代码 #container { width: 700px; height: 500px; /*用于浏览器的居中显示*/ margin: 0 auto; border: 1px dashed red; } 1.3 运行截图2、关于一个原创 2016-05-06 14:42:58 · 413 阅读 · 0 评论 -
6、关于onfocus和onblur实现搜索框
1、使用onfocus和onblur实现搜索框 1.1 html代码 搜索 1.2 Javascript代码 /** * 封装一个简单的函数 * @param {Object} id */ function $(id) { return document.getElementById(id); } window.o原创 2016-05-04 11:25:52 · 883 阅读 · 0 评论 -
5、Javascript的函数名加括号和不加括号的区别
1、问题的提出 试着说明,oBtn.onclick = al() 和 oBtn.onclick = al 的区别2、问题的回答 假设有下面的函数:function al () { alert("111");} 此时,al 代表这个函数的对象,al() 就是直接运行了。var nfun = al; 就是让 nf原创 2016-05-03 18:52:44 · 740 阅读 · 0 评论 -
4、阻止表单onsubmit事件的默认行为
1、阻止事件的默认行为 1.1 通过return false; 1.2 通过event.preventDefault();2、阻止a标签的点击的默认行为 1.1 通过return false; 阻止事件的默认行为 window.onload = function() { var a = do原创 2016-05-03 18:40:18 · 8191 阅读 · 0 评论 -
3、关于onclick事件的两种写法
1、关于onclick的两种,常见的写法 1.1 html的源码如下 我是div1 我是div2 1.2 Javascript代码 /** * 用于响应div1的点击事件 */ function div1() { var div1 = document.getElementById('div1'原创 2016-05-03 18:05:13 · 25251 阅读 · 0 评论 -
13、JavaScript进度条的实现
1、JavaScript进度条的实现 1.1 html代码 开始 1.2 style代码 #main { width: 100%; height: 30px; background: #ddd; } #progress { width: 1%; height: 30px; background: #aaf原创 2016-05-06 22:45:11 · 503 阅读 · 0 评论 -
2、关于事件的冒泡行为
1、事件的冒泡行为 冒泡呢,简单的意思就是,你本来想只触发一个事件,但是实际上却出发了N个事件。 举例来说,有一个元素,如Span,你绑定了一个Click函数;你又为Div绑定了一个Click函数;而这个Span就在Div中,当你点击Span时,同时就会触发Span和Div的Click函数,这就是事件冒泡。2、事件冒泡的小案例 2.1 html的代码原创 2016-05-03 16:16:36 · 689 阅读 · 0 评论 -
44、JavaScript的运动----任意属性值的运动---应用
1、利用任意属性值的运动的例子2、测试代码 任意值运动框架 div { width: 100px; height: 50px; font-size: 14px; background: red; margin-top: 50px; border: 2px solid black; } 无原创 2016-06-28 12:02:44 · 352 阅读 · 0 评论 -
43、JavaScript的运动----任意属性值的运动---透明度的改变
1、offset属性的Bug • 有边框的Div变宽 –用currentStyle代替offset2、原有运动框架的问题 • 只能让某个值运动起来 • 如果想让其他值运动起来,要修改程序3、扩展的运动框架 • 运动属性作为参数 • 封装opacity –小数的问题原创 2016-06-23 14:05:13 · 416 阅读 · 0 评论