JavaScript积跬步至千里
关注
分享
扫一扫
见面时的呼吸都曾反复练习
这个作者很懒，什么都没留下…
展开
-
qq列表，每组之间互不干扰
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>QQ列表</title> <style type="text/css"> div {display:none;} </style></head><body> <ul id="ul1">原创 2015-04-04 22:01:09 · 431 阅读 · 0 评论 -
函数的预解析和逐行解读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- js解析器： 1、预解析： var function 参数。。 所有变量解析为 ：var 变量名=undefined 函数解析为整体：原创 2015-05-18 22:37:54 · 714 阅读 · 0 评论 -
解决ie6下png图片失效
<!--[if IE 6]> <script type="text/javascript" src="Scripts/DD_belatedPNG_0.0.8a-min.js"></script> <script type="text/javascript" src="Scripts/ie6Fixpng.js"></script><![endif]-->上面代码放到之转载 2015-05-25 20:45:51 · 418 阅读 · 0 评论 -
js实现顶部固定，摆脱ie的抖动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0} body {height: 2000px} #inner {width: 100%转载 2015-07-25 11:54:00 · 1675 阅读 · 0 评论 -
js闭包总结
学了，也看了一些关于闭包的东西，做个总结，以备不时之需，可能有不足的地方，我对闭包也不是很了解。一、什么是闭包？ 闭包百度一搜，会有太多的解释。 闭包就是嵌套在函数里面的内部函数，并且该内部函数可以访问外部函数声明的所有局部变量、参数、和其它内部函数。当该内部函数在外部函数被调用时就生成了闭包。说了一堆，举例说明：function wai(){ var num=1; functi原创 2015-08-09 17:49:01 · 1302 阅读 · 0 评论 -
函数之间传参，获取别的函数内的变量值
函数之间想要达成战略联盟，怎么也得资源共享一下吧。function aa(){ var value="999黄金"; bb(value)}现在假如有个函数bb想要得到aa函数内部的‘999黄金’，就可以采用传参的。function bb(val){ var mySelf=val; alert(mySelf)}aa(); //"999黄金"第二种，可以建个全局变量原创 2015-08-09 18:02:58 · 760 阅读 · 0 评论 -
js获取时间及倒计时
一、获取时间的几个方法 `1.获取系统时间： var oDate=new Date(); 2:获取年月日时分秒 星期； var oYear=oDate.getFullYear(); var oMonth=oDate.getMonth(); //0~11 var oDate=oDate.getDate(); var oHours=oDate.getHours(); var oMin原创 2015-08-09 14:32:40 · 591 阅读 · 0 评论 -
js中offsetParent，offsetLeft的兼容问题
一、offsetParent 先简单的来个结构,三个嵌套的div，主要是找div3的offsetParent<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;paddin原创 2015-08-11 16:14:25 · 2910 阅读 · 0 评论 -
getBoundingClientRect（）
一、getBoundingClientRect（），元素到可视区的距离 主要是在ie下有个2像素的差别。可以封装一个函数：function GetRect(element){ var rect=element.getBoundingClientRect(); var top=document.documentElement.clientTop; //非ie是0，ie是2；原创 2015-09-08 09:21:40 · 909 阅读 · 0 评论 -
js实现图片上传预览
笔试题遇到的，百度了许多资料，但是原地址的给的有问题，window.URL.createObjectURL(dFile.files[0]);<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <title>JS上传图片前的图片预览效果</title></head><body> <input id="myfil转载 2015-09-25 18:36:01 · 414 阅读 · 0 评论 -
让网页背景图片 固定，不随缩小放大而变化
最近在百度首页，缩小放大时，发现背景图片一直保持不变，只是内容在变化，看看了源码，才知道怎么回事。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0}原创 2015-09-12 16:32:45 · 13486 阅读 · 1 评论 -
网页加载效果（利用图片加载）
function loading(){ var oSpan=oLoad.getElementsByTagName(‘span’)[0]; var aDiv=oLoad.getElementsByTagName(‘div’); var arr=[‘bg1.jpg’,’bg2.jpg’,’bg3.jpg’,’bg4.jpg’,’bg5.jpg’,’p原创 2015-09-15 17:21:41 · 467 阅读 · 0 评论 -
绑定事件、阻止默认事件、阻止冒泡
一、绑定事件 ie6-8 ：attachEvent (事件名，函数名)；事件名+on ie9以上也支持addEventListener标准下：addEventListener(事件名，函数名，false)；事件名无on，false表示冒泡阶段调用事件处理函数，true则是捕获阶段绑定事件的问题：1、参数不一样 2、是否加on 3、执行顺序原创 2015-09-15 17:45:44 · 465 阅读 · 0 评论 -
js中的函数
/* 来源具体可查看《JavaScript模式》 */一、函数特点1、函数时第一类对象函数在运行时动态创建，还可以在程序执行过程中创建函数可以分配给变量，可以将它们的引用复制到其他变量，可以被扩展，此外，除少数情况外，函数还可以删除可以作为参数传递给其他函数，并且还可以由其他函数返回函数可以有自己的属性和方法2、函数提供了作用域在函数内部以var关键字定义的任何变量都是局部变量，对于外部函原创 2015-09-18 11:55:26 · 358 阅读 · 0 评论 -
面向对象小结
面向对象之构造函数结构： function 构造函数() { this.属性 = valve } 构造函数.prototype.方法 = function() { } var 对象1 = new 构造函数(); 对象1.方法(); eg : function Person() { this.转载 2015-10-09 21:03:46 · 383 阅读 · 0 评论 -
js缓冲运动、弹性运动、碰撞运动
适用于图片轮播，物体运动等。function startMove(obj, json, fnEnd) //json ：{width:300,height:400}{ clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true; //假设：所有值都已经到了原创 2015-05-03 10:55:02 · 627 阅读 · 0 评论 -
js分页函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #page a {margin: 10px;} </style> <script type="text/javascript">原创 2015-11-20 21:22:02 · 370 阅读 · 0 评论 -
firstChild与firstElementChild的兼容处理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById(原创 2015-11-24 10:36:56 · 2909 阅读 · 0 评论 -
简单的图片轮播（重要的是思想）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播</title> <style type="text/css"> * {margin:0;padding: 0} ul {list-style: none;} img {border: none;} #原创 2015-05-18 18:58:09 · 1722 阅读 · 0 评论 -
冒泡排序、快速排序
1、冒泡排序 两个两个的比较，a>b则调换位置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript"> var arr=[32,45,23,56,12,5,原创 2015-05-07 10:03:07 · 281 阅读 · 0 评论 -
js时钟
1、获取当前时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="box"></div> <script type="text/javascript"> var oBox=document.g原创 2015-05-07 09:24:44 · 401 阅读 · 0 评论 -
for两层的嵌套的应用（小正方形的生成，排成一排）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>for两层嵌套</title> <style type="text/css"> #ul1 li {width: 50px;height: 50px;background: #f00;list-style: none;pos原创 2015-04-04 22:27:34 · 550 阅读 · 0 评论 -
利用开关与for实现的小例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>以最简单的代码实现需求</title></head><body><ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li> <原创 2015-04-05 21:08:23 · 447 阅读 · 0 评论 -
for两层的嵌套的应用（小正方形的生成，排成多排）思维比胡乱敲代码更重要
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>for两层嵌套</title> <style type="text/css"> #ul1 li {width: 50px;height: 50px;background: #f00;list-style: none;pos原创 2015-04-04 22:44:57 · 489 阅读 · 0 评论 -
函数与变量的预解析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函数、变量预解析</title></head><body> <script type="text/javascript"> //函数声明时：能显示123，因为把function提到了show（）前了，预解析了原创 2015-04-04 22:59:54 · 822 阅读 · 0 评论 -
文档流(float)转绝对定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文档流(float)转绝对定位</title> <style type="text/css"> * {margin: 0;padding: 0} ul {list-style: none;position:原创 2015-04-08 18:00:14 · 342 阅读 · 0 评论 -
利用JSON-数组去重
Document var arr=[1,2,3,4,5,3,2,1] function show(arr){ var json={}; var result=[]; for (var i = 0; i //json.arr[i]) json.1 undefind原创 2015-04-26 21:19:05 · 881 阅读 · 0 评论 -
拍平多维数组
//上次参加阿里web前端笔试（本人小白，只是为了看看自己距离web前端还有多远距离），结果很悲伤。里面有个题是说拍平数组。当初没做出来。 Document var arr=[1,2,3,4,5,3,2,1] function show(arr){ var json={}; var原创 2015-04-26 21:23:01 · 1345 阅读 · 0 评论 -
数组去重-两个for
//要点：1、新建一个空数组，result//2、将原数组每项与result中的每项做比较，不相等就push到result中，反之则不添加。 Document var arr=[48,13,25,1,32,15,41,3,5,1,25,48] function doWeight(arr){原创 2015-04-26 21:14:04 · 939 阅读 · 0 评论 -
小效果：商品抢购（多个）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0} ul {list-style: none;} img {border: none;原创 2015-05-08 16:29:23 · 878 阅读 · 0 评论 -
ie7下，overflow：hidden失效及解决办法
今天在写练习时，给元素加了overflow：hidden失效，怎么改都没用，经百度一下，找到了解决办法。出现原因：当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。解决办法： 解决这个bug很简单，在父元素中使用position:relative;即可解决，就是用到overflow的父节点中增加相对定位即可。如转载 2015-05-02 23:09:39 · 405 阅读 · 0 评论 -
offsetLeft、offsetTop、offsetWidth，offsetHeight
offsetLeft、offsetTop都只是包含 样式宽+padding值，不包含borderoffsetWidth、offsetHeight包含 样式宽+padding值+border值 [ps:未完待续]原创 2015-05-09 10:49:31 · 545 阅读 · 0 评论 -
无缝滚动，走一个停一下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding:0;} #box {width: 800px;height: 200px;margin: 20px原创 2015-05-11 09:33:01 · 402 阅读 · 0 评论 -
多图片滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin:0;padding: 0} ul {list-style: none;} img {border: none;o原创 2015-05-03 11:00:56 · 845 阅读 · 0 评论 -
图片抖动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ var oImg1=document.getElementById原创 2015-05-03 11:01:34 · 619 阅读 · 0 评论 -
延迟菜单函数
function show(ali,aul){ var timer=null; ali.onmouseover=function(){ clearTimeout(timer); this.style.background="red"; aul.style.di原创 2015-05-03 10:59:51 · 413 阅读 · 0 评论 -
getClassName防止多个类名
Document window.onload=function(){ var oUl=document.getElementById('ul1'); var aBox=getClassName(oUl,'box'); for (var i = 0; i < aBox.length; i++) { aBox[i].style.background="red"; }; }原创 2015-05-12 21:58:15 · 448 阅读 · 0 评论 -
[小例子]计算商品价格
需要注意是小数相加的问题。这是JavaScript浮点运算的一个bug。 如果在知道小数位个数的前提下，可以考虑通过将浮点数放大倍数到整型(最后再除以相应倍数)，再进行运算操作，这样就能得到正确的结果了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>原创 2015-05-16 23:10:11 · 660 阅读 · 0 评论 -
js分页实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0} #page {width: 100%;text-align: center;} #原创 2015-11-20 21:23:41 · 388 阅读 · 0 评论