js基础算法

1.检测形参与实参个数是否匹配---如果fun(5);得到NaN---arguments.length得到实参的个数

***argument对象只在正在使用的函数内使用

arguments.callee---返回正在执行的函数，在函数体内使用，在使用函数递归调用时推荐使用argument.callee代替函数名本身

function fun(a,b){

console.log(fn.length);//得到形参格个数

console.log(arguments.length);//得到实参个数

if(fn.length==arguments.length)

{

console.log(a+b);

}

else

{

console.log("形参与实参个数不匹配");

}

}

3.表单验证

.box {

text-align: center;

margin:100px auto;

}

span {

display: inline-block;

width: 150px;

height: 20px;

border: 1px solid #ccc;

font-size:12px;

line-height: 20px;

text-align: left;

padding-left: 20px;

background-color: #eee;

color:#999;

}

.right { /*正确的*/

color: #5EFF5E;

background:url(image/right.png) no-repeat #DFFFDF 4px 3px;

border: 1px solid #ACFFAC;

}

.wrong { /*错误的*/

background:url(image/wrong.png) no-repeat #FFDCD0 4px 3px;

border: 1px solid #FFAC91;

color: #FF6B39;

}

<div class="box">

语文：<input type="text" id="txt1"><span id="result">请输入成绩</span>

</div>

function $(id){ return document.getElementById(id);}

$("txt1").onblur=function(){

if(this.value=="")

{

$("result").className="wrong";

$("result").innerHTML="内容不能为空";

}

else if(isNaN(this.value))

{

$("result").className="wrong";

$("result").innerHTML="请输入数字";

}

else if(this.value>150 || this.value<0)

{

$("result").className="wrong";

$("result").innerHTML="请输入合理范围";

}

else

{

$("result").className="right";

$("result").innerHTML="输入正确";

}

}

3.形参与实参之间的传递---点击小图标背景更换

*{

margin:0;

padding:0;

}

ul{list-style:none;}

#box {

height: 70px;

width: 360px;

padding-top: 360px;

border:1px solid #ccc;

margin:100px auto;

overflow: hidden;

background: url(image/01big.jpg) no-repeat;

}

#box ul{

overflow: hidden;

border-top:1px solid #ccc;

}

#box li {

float: left;

}

<div id="box">

<ul>

<li id="li01"><img src="image/01.jpg" alt=""/></li>

<li id="li02"><img src="image/02.jpg" alt=""/></li>

<li id="li03"><img src="image/03.jpg" alt=""/></li>

<li id="li04"><img src="image/04.jpg" alt=""/></li>

<li id="li05"><img src="image/05.jpg" alt=""/></li>

</ul>

</div>

var box = document.getElementById("box");

function fun(id,bg){

var target = document.getElementById(id); // 事件源

//事件源.事件 = function(){}

target.onmouseover = function(){

//大盒子变背景图片就阔以了

box.style.backgroundImage = bg ;

}

} //封装函数

fun("li01","url(image/01big.jpg)"); // 调用函数

fun("li02","url(image/02big.jpg)"); // 调用函数

fun("li03","url(image/03big.jpg)"); // 调用函数

fun("li04","url(image/04big.jpg)"); // 调用函数

fun("li05","url(image/05big.jpg)"); // 调用函数

4.编写一个程序，计算增加后的工资。要求工龄满5，增加20%工资；若2—4，则增加15%；若小于2，则增加10%工资。

function $(id) { return document.getElementById(id);}

$("btn").onclick=function(){

if($("txt1").value>=5){

$("txt3").value=$("txt2").value*1.2;

}else if($("txt1").value>=4){

$("txt3").value=$("txt2").value*1.15;

}else if($("txt1").value>0){

$("txt3").value=$("txt2").value*1.1;

}else{

$("txt3").value=$("txt2").value;

}

}

5.编写一个程序，用户输入一个数，可以求出这个数的阶乘。

function $(id) { return document.getElementById(id);}

$("txt4").onblur=function(){

var s=1;

for(var i=1;i<=this.value;i++)

{

s=s*i;

}

alert(s);

}

6.利用for循环 遍历 京东背景图片。

var iis = document.getElementById("iconsprite").getElementsByTagName("i");

for(var i=0;i<iis.length;i++)

{

iis[i].style.backgroundPosition ="0 "+(-i*25)+"px";

}

7.排他思想--干掉其他人，只剩他自己---采用双层循环实现，外层循环选定要点击的元素，内层循环干掉所有人

var btns=document.getElementsByTagName("button");

for(var i=0;i<btns.length;i++)

{

btns[i].onclick=function(){

for(var j=0;j<btns.length;j++)

{

btns[i].className="";

}

this.className="demo";

}

}

8.判断用户输入事件

（1）在搜索框中添加文字，一般选用input和lable结合使用

<div class="search">

<input type="text" id="txt"/>

<label for="txt" id="message">文字</label>//点击label的时候光标回到input里面

</div>

（2）事件：正常浏览器--oninput

IE6/7/8----onpropertychange

（3）判断用户是否输入的兼容代码

function $(id) { return document.getElementById(id);}

$("txt").oninput=$("txt").onpropertychange=function(){

if(this.value==""){

$("message").style.display="block";

}else{

$("message").style.display="none";

}

}

9.求数组平均值--利用函数调用数组的方法

var arr=[23,34,32,12,34];

function avg(array){

var sum=0;

var len=array.length;

for(var i=0;i<len;i++)

{

sum+=array[i];

}

return sum/len;

}

avg(arr);

10.封装自己class类---取出所有的盒子，遍历，通过每个盒子的className进行判断，相等的留下--获得class=“demo”的个数

function getClass(classname){

//浏览器支持

if(document.getElementsByClassName)

{

return document.getElementsByClassName(classname);

}

//浏览器不支持

var arr=[];

var doms=document.getElementsByTagName("*");

for(var i=0;i<doms.length;i++)

{

if(doms[i].className==classname)

{

arr.push(doms[i]);

}

}

return arr;

}

getClass("demo").length;

*****如果一个元素有多个class，则利用二维数组进行分割

function getClass(classname){

//浏览器支持

if(document.getElementsByClassName)

{

return document.getElementsByClassName(classname);

}

//浏览器不支持

var arr=[];

var doms=document.getElementsByTagName("*");

for(var i=0;i<doms.length;i++)//遍历所有的盒子

{

var txtarr=doms[i].className.split("");//将字符串转换成数组，进行遍历

for(var j=0;j<txtarr.length;j++)

{

if(txtarr[j]==classname)

{

arr.push(doms[i]);

}

}

}

return arr;

}

getClass("demo").length;

var test=getClass("test");

for(var i=0;i<test.length;i++)

{

test[i].style.backgroundColor="purple";

}

*****封装上父id下的子class的情况--实参给出父盒子的id含义是：找出id="one"盒子下class为test的盒子；实参只给出一个参数含义：找出class为test的盒子；实参个数多于两个，则只取前两个，后面的忽略不计

function getClass(classname,id ){

//浏览器支持

if(document.getElementsByClassName)

{

if(id) //有id的情况

{

var eleId=document.getElementById(id);

return eleId.getElementsByClassName(classname);

}

else //没有id的情况

{

return document.getElementsByClassName(classname);

}

}

//浏览器不支持

if(id)

{

var eleId=document.getElementById(id);

var doms=eleId.getElementsByTagName(*);

}

else

{

var doms=document.getElementsByTagName("*");

}

var arr=[];

for(var i=0;i<doms.length;i++)//遍历所有的盒子

{

var txtarr=doms[i].className.split("");//将字符串转换成数组，进行遍历

for(var j=0;j<txtarr.length;j++)

{

if(txtarr[j]==classname)

{

arr.push(doms[i]);

}

}

}

return arr;

}

getClass("demo").length;

var aa=getClass("test","one");

for(var i=0;i<aa.length;i++)

{

aa[i].style.backgroundColor="purple";

}

11.微博发布

*{

margin: 0;

padding: 0;

}

ul,ol{

list-style: none;

}

.box1{

margin: 100px auto;

width: 600px;

height: auto;

border: 1px solid #333;

padding: 30px 0;

}

textarea{

width: 400px;

resize: none;

}

.box1 li{

width: 450px;

line-height: 30px;

border-bottom: 1px dashed #ccc;

margin-left: 80px;

}

.box1 li a{

float: right;

}

<div class="box1">

微博发布：<textarea name="" id="" cols="30" rows="10"></textarea>

<button>发布</button>

</div>

var txt=document.getElementsByTagName("textarea")[0];

var btn=document.getElementsByTagName("button")[0];

var ul=document.createElement("ul");

txt.parentNode.appendChild(ul);

btn.onclick=function(){

if(txt.value=="")

{

alert("内容不能为空");

return false;

}

var newli=document.createElement("li");

newli.innerHTML=txt.value+"<a href='javascript:;'>删除</a>";

txt.value="";

// ul.appendChild(lis);//只能往后插入

// 新的消息插入在第一行的方法

var lis=ul.children;

if(lis.length==0)

{

ul.appendChild(newli);

}

else

{

ul.insertBefore(newli, lis[0]);

}

// 删除发布的信息

var as=document.getElementsByTagName("a");

for(var i=0;i<as.length;i++)

{

as[i].onclick=function(){

ul.removeChild(this.parentNode);

}

}

}

12.倒计时

#demo{

width: 800px;

height: 100px;

line-height: 100px;

font-size: 30px;

margin: 10px auto;

text-align: center;

color: red;

background-color: #eee;

}

<div id="demo"></div>

function $(id){return document.getElementById(id);}

var endTime=new Date("2017/12/12 17:30:00");

setInterval(clock, 1000);

function clock(){

var nowTime=new Date();

var second=parseInt((endTime.getTime()-nowTime.getTime())/1000);

var d=parseInt(second/3600/24);

var h=parseInt(second/3600%24);

var m=parseInt(second/60%60);

var s=parseInt(second%60);

d<10?"0"+d:d;

h<10?"0"+h:h;

m<10?"0"+m:m;

s<10?"0"+s:s;

$("demo").innerHTML="距离最后的时间还剩："+d+"天"+h+"时"+m+"分"+s+"秒";

}

13.发送短信

<div class="trans">

<input type="text">

<button id="btn2">点击发送短信</button>

</div>

var count=5;

var timer=null;

$("btn2").onclick=function(){

clearInterval(timer);

this.disabled=true;

that=this;

timer=setInterval(sendTextMessage, 1000);

function sendTextMessage(){

count--;

if(count>=0)

{

that.innerHTML="还剩余"+count+"秒";

}

else

{

that.innerHTML="重新发送";

that.disabled=false;

clearInterval(timer);

count=5;

}

}

}

14.5秒后自动跳转---setTimeout()延迟执行

setInterval(function(){},5000);---每隔5秒执行一次

setTimeout(function(){},5000);---5秒钟之后去执行函数，只执行一次

采用递归调用的方法，模拟一个循环的操作

var count=5;

setTimeout(goIndexPage, 1000);

function goIndexPage(){

$("tiao").innerHTML = "<a href='http://www.baidu.com'>本页面将在第"+count+"秒钟之后跳转页面</a>";

count--;

if(count<0)

{

window.location.href="http://www.baidu.com";

}

else

{

setTimeout(arguments.callee, 1000);

}

}

15.图片滑动定时器--向上滑动与向下滑动两个不同的定时器

.xiaomi{

width: 512px;

height: 400px;

position: relative;

margin: 10px auto;

border: 1px solid #666;

overflow: hidden;

}

.xiaomi span{

width: 100%;

height: 200px;

position: absolute;

cursor: pointer;

}

span#up{

top: 0;

}

span#down{

bottom: 0;

}

#pic{

position: absolute;

top: 0;

left: 0;

}

<div class="xiaomi">

<img src="image/mi.png" alt="" id="pic">

<span id="up"></span>

<span id="down"></span>

</div>

var num=0;

var timer=null;

$("up").onmouseover=function(){

clearInterval(timer);

timer=setInterval(upSlider, 50);

function upSlider(){

num-=3;

if(num>=-1070)

{

$("pic").style.top=num+"px";

}

else

{

clearInterval(timer);

}

}

}

$("down").onmouseover=function(){

clearInterval(timer);

timer=setInterval(downSlider, 50);

function downSlider(){

num+=1;

// if(num<0)

// {

// $("pic").style.top=num+"px";

// }

// else

// {

// clearInterval(timer);

// }

num<0?$("pic").style.top=num+"px":clearInterval(timer);

}

}

$("up").parentNode.onmouseout=function(){

clearInterval(timer);

}

16.检测字符串长度---字符对应1个长度，汉字对应2个长度

function getStringLength(str){

var len=0;

var c=0;

for(var i=0;i<str.length;i++)

{

c=str.charCodeAt(i);

if(c>=0&&c<=127)

{

len++;

}

else

{

len+=2;

}

}

return len;

17.验证文件格式是否正确

var file=document.getElementById("file");

file.onchange=function(){

var path=this.value;

var suxxif=path.substr(path.lastIndexOf(".")).toUpperCase();

if(suxxif==".JPG"||suxxif==".PNG")

{

this.nextSibling.innerHTML="格式正确";

}

else

{

this.nextSibling.innerHTML="格式不正确";

}

}

18.仿jQuery封装$功能

function getClass(classname){

//浏览器支持

if(document.getElementsByClassName)

{

return document.getElementsByClassName(classname);

}

//浏览器不支持

var arr=[];

var doms=document.getElementsByTagName("*");

for(var i=0;i<doms.length;i++)//遍历所有的盒子

{

var txtarr=doms[i].className.split("");//将字符串转换成数组，进行遍历

for(var j=0;j<txtarr.length;j++)

{

if(txtarr[j]==classname)

{

arr.push(doms[i]);

}

}

}

return arr;

}

function $(str){

var s=str.charAt(0);

var ss=str.substr(1);

switch(s)

{

case "#":

return document.getElementById(ss);

break;

case ".":

return getClass(ss);

break;

default :

return document.getElementsByTagName(str);

}

}

19.滚动条

*{

margin: 0 auto;

padding: 0;

}

ul,ol{

list-style: none;

}

.scroll {

width: 400px;

height: 8px;

background-color: #ccc;

margin: 100px auto;

position: relative;

}

.bar {

width: 10px;

height: 22px;

background-color: #369;

position: absolute;

top: -7px;

left: 0;

cursor: pointer;

}

.mask {

width: 0;

height: 100%;

background-color: #369;

position: absolute;

top: 0;

left: 0;

}

<div class="scroll" id="scrollBar">

<div class="bar"></div>

<div class="mask"></div>

</div>

var scrollBar=document.getElementById("scrollBar");

var bar=scrollBar.children[0];

var mask=scrollBar.children[1];

bar.onmousedown=function(event){

var event=event||window.event;

var leftVal=event.clientX-this.offsetLeft;

var that=this;

bar.onmousemove=function(event){

var event=event||window.event;

that.style.left=event.clientX-leftVal + "px";

var val = parseInt(that.style.left);

if(val < 0)

{

that.style.left = 0;

} else if(val > 390)

{

that.style.left = "390px";

}

mask.style.width = that.style.left; // 遮罩盒子的宽度

// 清除选中的内容

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

}

document.onmouseup=function(){

document.onmousemove=null;

}

}

20.图标跟随

*{

margin: 0 auto;

padding: 0;

}

ul,ol{

list-style: none;

}

body{

background-color: #000;

}

#image {

width: 99px;

position: absolute;

top:0;

left: 0;

}

<img src="image/img.jpg" alt="" id="image"/>

var leaderX=0,leaderY=0,targetX=0,targetY=0;

var image=document.getElementById("image");

document.onclick=function(event){

var event=event||window.event;

targetX=event.clientX-image.offsetWidth/2;

targetY=event.clientY-image.offsetHeight/2;

}

setInterval(function(){

leaderX=leaderX+(targetX-leaderX)/10;

leaderY=leaderY+(targetY-leaderY)/10;

image.style.left=leaderX+"px";

image.style.top=leaderY+"px";

}, 10);

21.放大图

*{

margin: 0 auto;

padding: 0;

}

ul,ol{

list-style: none;

}

img {

vertical-align: top;

}

.box {

width: 350px;

height: 350px;

margin:100px auto;

border: 1px solid #ccc;

position: relative;

}

.big {

width: 450px;

height: 450px;

position: absolute;

top: 0;

left: 360px;

border: 1px solid #ccc;

overflow: hidden;

display: none;

}

.mask {

width: 100px;

height: 100px;

background: rgba(255, 255, 0, 0.4);

position: absolute;

top: 0;

left: 0;

cursor: move;

display: none;

}

.small {

position: relative;

}

.big img {

position: absolute;

top: 0;

left: 0;

}

<div class="box" id="fdj">

<!--小盒子-->

<div class="small">

<img src="image/001.jpg" alt=""/>

<div class="mask"></div>

</div>

<div class="big">

<img src="image/0001.jpg" alt=""/>

</div>

</div>

var fdj=document.getElementById("fdj");

var small=fdj.children[0];

var big=fdj.children[1];

var mask=small.children[1];

var bigImage=big.children[0];

small.onmouseover=function(){

mask.style.display="block";

big.style.display="block";

}

small.onmouseout=function(){

mask.style.display="none";

big.style.display="none";

}

var x=0,y=0;

small.onmousemove=function(event){

var event=event||window.event;

x=event.clientX-this.offsetParent.offsetLeft-mask.offsetWidth/2;

y=event.clientY-this.offsetParent.offsetTop-mask.offsetHeight/2;

if(x<0)

{

x=0;

}

else if(x>small.offsetWidth-mask.offsetWidth)

{

x=small.offsetWidth-mask.offsetWidth;

}

if(y<0)

{

y=0;

}

else if(y>small.offsetHeight-mask.offsetHeight)

{

y=small.offsetHeight-mask.offsetHeight;

}

mask.style.left=x+"px";

mask.style.top=y+"px";

bigImage.style.left=-x * big.offsetWidth/small.offsetWidth + "px";

bigImage.style.top=-y * big.offsetHeight/small.offsetHeight + "px";

}

22.封装自己的scrollTop

function scroll(){

if(window.pageYOffset!=null)

{

return{

left:window.pageXOfffset,

top:window.pageYOffset

}

}

else if(docuemnt.compatMode=="CSS1Copat")

{

return{

left：document.documentElement.scrollLeft,

top:document.documentElement.scrollTop

}

}

return{

left:docuemnt.body.scrollLeft,

top:document.body.scrollTop

}

}

23.水平拖动

*{

margin: 0 auto;

padding: 0;

}

ul,ol{

list-style: none;

}

.scroll {

width: 400px;

height: 8px;

background-color: #ccc;

margin: 100px auto;

position: relative;

}

.bar {

width: 10px;

height: 22px;

background-color: #369;

position: absolute;

top: -7px;

left: 0;

cursor: pointer;

}

.mask {

width: 0;

height: 100%;

background-color: #369;

position: absolute;

top: 0;

left: 0;

}

<div class="scroll" id="scrollBar">

<div class="bar"></div>

<div class="mask"></div>

</div>

<div id="demo"></div>

var scrollBar=document.getElementById("scrollBar");

var bar=scrollBar.children[0];

var mask=scrollBar.children[1];

bar.onmousedown=function(event){

var event=event||window.event;

var leftVal=event.clientX-this.offsetLeft;

var that=this;

document.onmousemove=function(event){

var event=event||window.event;

that.style.left=event.clientX-leftVal + "px";

var val = parseInt(that.style.left);

if(val < 0)

{

that.style.left = 0;

} else if(val > 390)

{

that.style.left = "390px";

}

mask.style.width = that.style.left; // 遮罩盒子的宽度

// 清除选中的内容

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

}

document.onmouseup=function(){

document.onmousemove=null;

}

}

24.垂直拖动

.box {

width: 300px;

height: 500px;

border: 1px solid red;

margin:100px;

position: relative;

}

.content {

height: auto;

padding: 5px 18px 5px 5px;

position: absolute;

top: 0;

left: 0;

}

.scroll {

width: 18px;

height: 100%;

position: absolute;

top: 0;

right: 0;

background-color: #eee;

}

.bar {

width: 100%;

height: 100px;

background-color: red;

cursor: pointer;

border-radius: 10px;

position: absolute;

top: 0;

left: 0;

}

<div class="box" id="box">

<div class="content">

文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分

文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分

文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分

文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分

文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分

文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内 文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分

文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分

文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分

</div>

<div class="scroll">

<div class="bar"></div>

</div>

</div>

var box=document.getElementById("box");

var content=box.children[0];

var scroll=box.children[1];

var bar=scroll.children[0];

var barHeight=box.offsetHeight*box.offsetHeight/content.offsetHeight;

startScroll(bar,content);

function startScroll(obj,target){

obj.onmousedown=function(event){

var event=event||window.event;

var y=event.clientY-this.offsetTop;

that=this;

document.onmousemove=function(event){

var event=event||window.event;

var barTop=event.clientY-y;

if(barTop<0)

{

barTop=0;

}

else if(barTop>target.parentNode.offsetHeight-that.offsetHeight)

{

barTop=target.parentNode.offsetHeight-that.offsetHeight;

}

target.style.top=-(target.offsetHeight-target.parentNode.offsetHeight)/(target.parentNode.offsetHeight-that.offsetHeight)*barTop+"px";

that.style.top=barTop+"px";

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

}

document.onmouseup=function(){

document.onmousemove=null;

}

}

}

25.拖动弹出窗

*{margin:0;padding:0;}

.nav{

height:30px;

background: #036663;

border-bottom:1px solid #369;

line-height: 30px;

padding-left:30px;

}

.nav a {

color:#fff;

text-align: center;

font-size:14px;

text-decoration: none;

}

.d-box{

width:400px;

height:300px;

border:5px solid #eee;

box-shadow:2px 2px 2px 2px #666;

position: absolute;

top:50%;

left:50%;

margin-top: -155px;

margin-left:-205px;

}

.hd{

width:100%;

height:25px;

background-color: #7c9299;

border-bottom:1px solid #369;

line-height: 25px;

color:white;

cursor: move;

}

#box_close{

float: right;

cursor: pointer;

}

<div class="nav">

<a href="javascript:;" id="register">注册信息</a>

</div>

<div class="d-box" id="d_box">

<div class="hd" id="drop">注册信息 (可以拖拽)

<span id="box_close">【关闭】</span>

</div>

<div class="bd"></div>

</div>

var box=document.getElementById("d_box");

var drop=document.getElementById("drop");

startDrop(drop,box);

function startDrop(current,move){

current.onmousedown=function(event){

var event=event||window.event;

var x=event.clientX-move.offsetLeft-205;

var y=event.clientY-move.offsetTop-155;

document.onmousemove=function(event){

var event=event||window.event;

move.style.left=event.clientX-x+"px";

move.style.top=event.clientY-y+"px";

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

}

}

document.onmouseup=function(){

document.onmousemove=null;

}

}

26.固定导航栏及广告跟随

*{margin:0;padding:0}

img{

vertical-align: top;

}

.main{

margin:0 auto;

width:1000px;

margin-top:10px;

}

.fixed {

position: fixed;

top: 0;

left: 0;

}

#pic{

position: absolute;

left:0;

top:250px;

}

<img src="image/aside.jpg" alt="" id="pic"/>

<div class="top" id="top">

<img src="image/top.png" alt=""/>

</div>

<div class="nav" id="Q-nav">

<img src="image/nav.png" alt=""/>

</div>

<div class="main">

<img src="image/main.png" alt=""/>

</div>

function $(id) {return document.getElementById(id);}

function scroll() {

if(window.pageYOffset != null) // ie9+ 和其他浏览器

{

return {

left: window.pageXOffset,

top: window.pageYOffset

}

}

else if(document.compatMode == "CSS1Compat") // 声明的了 DTD

// 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>

{

return {

left: document.documentElement.scrollLeft,

top: document.documentElement.scrollTop

}

}

return { // 剩下的肯定是怪异模式的

left: document.body.scrollLeft,

top: document.body.scrollTop

}

}

var pic=$("pic");

var picTop=pic.offsetTop;

var leader=0,target=0;

var timer=null;

var navTop=$("Q-nav").offsetHeight;

window.onscroll=function(){

if(scroll().top>=navTop)

{

$("Q-nav").className="nav fixed";

}

else

{

$("Q-nav").className="nav";

}

clearInterval(timer);

target=scroll().top + picTop;

timer=setInterval(function(){

leader=leader+(target-leader)/10;

pic.style.top=leader+"px";

}, 30)

}

27.封装可视区域大小的函数----检测屏幕宽度

window.onscroll=function(){}---屏幕滚动事件

window.onresize=function(){}---窗口改变事件

function client(){

if(window.innerWidth!=null)//ie9+浏览器

{

return{

width:window.innerWidth,

height:window.innerHeight

}

}

else if(document.compatMode=="CSS1Compat")//标准浏览器

{

return{

width:docuemnt.documentElement.clientWidth,

height:document.documentElemnet.clientHeight

}

}

return{//怪异浏览器

width:docuemnt.body.clientWidth,

height:document.body.clientHeight

}

}

28.封装动画

匀速动画

function animate(obj,target){

clearInterval(obj.timer);

var speed=obj.offsetLeft<target?15:-15;

obj.timer=setInterval(function(){

var result=target-obj.offsetLeft;

obj.style.left=obj.offsetLeft+speed+"px";

if(Math.abs(result)<=15)

{

clearInterval(obj.timer);

obj.style.left=target+"px";

}

}, 10);

}

缓动动画

function animate(obj,target){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var step=(target-obj.offsetLeft)/10;

step=step>0?Math.ceil(step):Math.floor(step);

obj.style.left=obj.offsetLeft+step+"px";

if(obj.offsetLeft==target)

{

clearInterval(obj,timer);

}

},10)

}

29.轮播图

*{ padding:0; margin:0; list-style:none; border:0;}

.all{

width:500px;

height:200px;

padding:7px;

border:1px solid #ccc;

margin:100px auto;

position:relative;

}

.screen{

width:500px;

height:200px;

overflow:hidden;

position:relative;

}

.screen li{ width:500px; height:200px; overflow:hidden; float:left;}

.screen ul{ position:absolute; left:0; top:0px; width:3000px;}

.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}

.all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}

.all ol li.current{ background:yellow;}

<div class="all" id='all'>

<div class="screen">

<ul id="ul">

<li><img src="image/1000.jpg" width="500" height="200" /></li>

<li><img src="image/2000.jpg" width="500" height="200" /></li>

<li><img src="image/3000.jpg" width="500" height="200" /></li>

<li><img src="image/4000.jpg" width="500" height="200" /></li>

<li><img src="image/5000.jpg" width="500" height="200" /></li>

</ul>

</div>

</div>

function $(id){return document.getElementById(id);function animate(obj,target){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var step=(target-obj.offsetLeft)/10;

step=step>0?Math.ceil(step):Math.floor(step);

obj.style.left=obj.offsetLeft+step+"px";

if(obj.offsetLeft==target)

{

clearInterval(obj,timer);

}

},10)

}

// 克隆第一个ullis元素

var ul=$("ul");

var ulLis=ul.children;

console.log(ulLis.length);

// 如果不在图片最后添加第一张图片，70、101需要改动ulLis.length,key=0,一样可以实现轮播效果，只是会跳到第一张不是滑到第一张

ul.appendChild(ul.children[0].cloneNode(true));

console.log(ulLis.length);

// 创建ol

var ol=document.createElement("ol");

$("all").appendChild(ol);

for(var i=0;i<ulLis.length-1;i++)

{

var li=document.createElement("li");

li.innerHTML=i+1;

ol.appendChild(li);

}

ol.children[0].className="current";

// 开始动画

var olLis=ol.children;

for(var i=0;i<olLis.length;i++)

{

olLis[i].index=i;

olLis[i].onmouseover=function(){

for(var j=0;j<olLis.length;j++)

{

olLis[j].className="";

}

this.className="current";

animate(ul,-this.index*500);

square=key=this.index;

}

}

// 设置定时器

var timer=null;

var square=0,key=0;

timer=setInterval(autoPlay, 1000);

function autoPlay(){

key++;

if(key>ulLis.length-1)

{

ul.style.left=0;

key=1;

}

animate(ul,-key*500);

square++;

if(square>olLis.length-1)

{

square=0;

}

for(var i=0;i<olLis.length;i++)

{

olLis[i].className="";

}

olLis[square].className="current";

}

// 经过时关闭定时器

$("all").onmouseover=function(){

clearInterval(timer);

}

// 离开时触发定时器

$("all").onmouseout=function(){

timer=setInterval(autoPlay, 500);

}

30.图片旋转

<head lang="en">

<meta charset="UTF-8">

<title>旋转木马轮播图</title>

<!-- <link rel="stylesheet" href="css/css.css"/> -->

<style>

/*初始化 reset*/

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}

body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}

ol,ul{list-style:none}

a{text-decoration:none}

fieldset,img{border:0;vertical-align:top;}

a,input,button,select,textarea{outline:none;}

a,button{cursor:pointer;}

.wrap{

width:1200px;

margin:100px auto;

}

.slide {

height:500px;

position: relative;

}

.slide li{

position: absolute;

left:200px;

top:0;

}

.slide li img{

width:100%;

}

.arrow{

opacity: 0;

position: relative;

z-index:100;

}

.prev,.next{

width:76px;

height:112px;

position: absolute;

top:50%;

margin-top:-56px;

background: url(image/prev.png) no-repeat;

z-index: 99;

}

.next{

right:0;

background-image: url(image/next.png);

}

</style>

</head>

<body>

<div class="wrap" id="wrap">

<div class="slide" id="slide">

<ul>

<li><a href="#"><img src="image/00001.jpg" alt=""/></a></li>

<li><a href="#"><img src="image/00002.jpg" alt=""/></a></li>

<li><a href="#"><img src="image/00003.jpg" alt=""/></a></li>

<li><a href="#"><img src="image/00004.jpg" alt=""/></a></li>

<li><a href="#"><img src="image/00005.jpg" alt=""/></a></li>

</ul>

<div class="arrow" id="arrow">

<a href="javascript:;" class="prev"></a>

<a href="javascript:;" class="next"></a>

</div>

</div>

</div>

</body>

</html>

<script src=" animate.js" type="text/javascript"></script>

<script>

var wrap = document.getElementById("wrap"); // 大盒子

var arrow = document.getElementById("arrow"); // 三角

var slider = document.getElementById("slide");

var lis = slider.getElementsByTagName("li"); // 所有要操作的盒子

wrap.onmouseover = function() { // 鼠标经过显示和隐藏 左右两个箭头

animate(arrow,{'opacity':100});

}

wrap.onmouseout = function() {

animate(arrow,{'opacity':0});

}

// 存储了每个图片的信息

var json = [

{ // 1

width:400,

top:20,

left:50,

opacity:20,

z:2

},

{ // 2

width:600,

top:70,

left:0,

opacity:80,

z:3

},

{ // 3

width:800,

top:100,

left:200,

opacity:100,

z:4

},

{ // 4

width:600,

top:70,

left:600,

opacity:80,

z:3

},

{ //5

width:400,

top:20,

left:750,

opacity:20,

z:2

}

];

var jieliu=true;

var as=arrow.children;

change();

for(var k in as)

{

as[k].onclick=function(){

if(this.className=="prev")

{

if(jieliu==true)

{

change(true);

jieliu=false;

}

}

else

{

if(jieliu==true)

{

change(false);

jieliu=false;

}

}

}

}

function change(flag){

if(flag)

{

json.unshift(json.pop());

}

else

{

json.push(json.shift());

}

for(var i=0;i<lis.length;i++)

{

animate(lis[i],{

width: json[i].width,

top: json[i].top,

left: json[i].left,

opacity:json[i].opacity,

zIndex:json[i].z

},function(){jieliu=true;})

}

}

</script>

31.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。

/** * 对象克隆 * 支持基本数据类型及对象 * 递归方法 */function clone(obj) { var o; switch (typeof obj) { case "undefined": break; case "string": o = obj + ""; break; case "number": o = obj - 0; break; case "boolean": o = obj; break; case "object": // object 分为两种情况 对象（Object）或数组（Array） if (obj === null) { o = null; } else { if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") { o = []; for (var i = 0; i < obj.length; i++) { o.push(clone(obj[i])); } } else { o = {}; for (var k in obj) { o[k] = clone(obj[k]); } } } break; default: o = obj; break; } return o;}