本文介绍了JavaScript中函数的返回值特性及应用实例，并详细解释了如何使用定时器(setInterval和setTimeout)实现网页元素的动态变化，包括按钮控制图片滚动、自动轮播选项卡等效果。
js第八节-函数返回值，定时器基础
一、概念介绍
1、函数的返回值
return ...
返回的数据类型--数字，字符串，布尔，函数，对象([],null,{},元素),未定义。
return:
① 函数 + 括号：fn2()----->return后面的返回值
② 函数不加return的，后面也会默认跟一个return返回未定义的值
③ 一个函数中，return 后面的这个代码都是不执行的。
例子1：
abc(3);//3
function abc(a){
return a;
};
例子2：
abc('梦想创业俱乐部');//梦想创业俱乐部
function abc(a){
return a;
};
例子3：
abc(3 > 5);//false
function abc(a){
return a;
};
例子4：
alert(abc());//function(){alert("我是函数");};
function abc(){
return function(){alert("我是函数");};
};
例子5：
fn2().onload = function(){...};
function fn2(){return window;};
2、模仿jqury自己写一个简单的js库
function $(a){
if(typeof a === 'function'){
window.onload = a;
}else if(typeof a === 'object'){
return a;
}else if(typeof a === 'string'){
return document.getElementById(a);
}
};
3、arguments
①arguments知识点的引入
实参--实际传递的参数
function fun1(1,2,3);
形参--接受实际传递的参数
如果是这样的函数function fun1(a,b,c){}，那么a = 1;b = 2;c = 3;
如果是这样的函数function fun1(){},那参数到哪去了呢？被arguments数组存储起来了。arguments --->[1,2,3]
②arguments一般用在什么场合当中
比如说，对于函数参数的个数无法确定的时候，一般用这个
sum(1,2,'+');
sum(5,8,9,'-');
//上述的简单加减运算器的函数就可以用到我们的arguments
function sum(){
var sum = 0;
if(arguments[arguments.length - 1] === '+'){
for(var i = 0; i < arguments.length - 1;i++){
sum += arguments[i];
}
}else if(arguments[arguments.length - 1] === '-'){
sum = arguments[0];
for(var i = 1; i < arguments.length - 1;i++){
sum -= arguments[i];
}
}
}
3、获取元素的样式
①getComputedStyle( $('某某id') ).width // IE6 7 8 不兼容
②$('某某id').currentStyle.width
注意点：
/*
获取到的是计算机（浏览器）计算后的样式
background: url() red …… 复合样式（不要获取）
backgroundColor 单一样式（不要用来做判断）
不要有空格
不要获取未设置后的样式：不兼容
*/
4、定时器基础
①定时器的概念
var timer = setInterval(函数，毫秒)；//重复执行的
clearInterval(timer);//清楚
var timer = setTimeout(函数，毫秒);//想当于定时炸弹
clearTimeout(timer);
二、作业讲解
1.按钮控制商品图片上下滚动
代码分享：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>按钮控制商品图片上下滚动</title>
<script src="chen.js"></script>
<script>
$(function(){
var timer = null;
var i = 0;
$('aBottom').onmousedown = function(){
timer = setInterval(fn,10);
function fn(){
i--;
if(i > -323){
$('aCenter').style.backgroundPosition = 0 + 'px ' + i+ 'px';
}else{
i = -323;
clearInterval(timer);
}
};
};
$('aBottom').onmouseout = function(){
clearInterval(timer);
};
$('aBottom').onmouseup = function(){
clearInterval(timer);
};
$('aTop').onmousedown = function(){
timer = setInterval(fn,10);
function fn(){
i++;
if(i < 0){
$('aCenter').style.backgroundPosition = 0 + 'px ' + i+ 'px';
}else{
i = 0;
clearInterval(timer);
}
};
};
$('aTop').onmouseout = function(){
clearInterval(timer);
};
$('aTop').onmouseup = function(){
clearInterval(timer);
};
})
</script>
<style>
.div1{background:#fff;width:166px;margin:30px auto;--border:1px solid red;}
.clear{zoom:1;}
.clear:after{content:'';display:block;clear:both;}
.topLeft{width:7px;height:24px;background:url(img/1.jpg) no-repeat;float:left;}
.topRight{width:7px;height:24px;background:url(img/2.jpg) no-repeat;float:left;}
.topCenter{height:24px;width:152px;background:url(img/3.gif) repeat-x;float:left;
color:#fff;font-weight:bold;font-size:14px;line-height:24px;}
.topCenter a{text-decoration:none;color:#fff;float:right;}
.content{position:relative;border:1px solid #c0c0c0;}
.aCenter{width:166px;height:400px;background:url(img/bg.gif) no-repeat;--background-position:0 -600px;}
.aTop{width:166px;height:22px;background:#efefe7;cursor:pointer;}
.aTop img{position:absolute;left:76px;top:5px;}
.aBottom{width:166px;height:22px;background:#efefe7;cursor:pointer;}
.aBottom img{position:absolute;left:76px;bottom:5px;}
</style>
</head>
<body>
<div class="div1">
<div class="top clear">
<div class="topLeft"></div>
<div class="topCenter">梦想商城 <a href="#">>>更多</a></div>
<div class="topRight"></div>
</div>
<div class="content">
<div class="aTop" id="aTop"><img src="img/4.png" /></div>
<div class= "aCenter" id="aCenter"></div>
<div class="aBottom" id="aBottom"><img src="img/5.png" /></div>
</div>
</div>
<p id=''></p>
</body>
</html>
2.自动轮换选项卡
代码分享：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自动轮换选项卡</title>
<script src="chen.js"></script>
<script>
$(function(){
var arr = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/2.png','images/3.png'];
var arr1 = ['图片1','图片2','图片3','图片4','图片5','图片6'];
var num = 0;
var timer = null;
//加载菜单数
for(var i = 0;i < arr.length / 2 - 1;i++){
$('top').innerHTML += '<span>菜单' + (i+1) + '</span>';
}
//加载菜单内容数
function loadMenu(a){
$('top').getElementsByTagName('span')[a].style.background = 'red';
if(a == 0){
$('top').getElementsByTagName('span')[a + 1].style.background = '#c0c0c0';
for(var i = 0;i < arr.length /2;i++){
$('right').getElementsByTagName('span')[i].innerHTML = arr1[i];
}
}else if(a == 1){
$('top').getElementsByTagName('span')[a - 1].style.background = '#c0c0c0';
for(var i = 3;i < arr.length;i++){
$('right').getElementsByTagName('span')[i % 3].innerHTML = arr1[i];
}
}
}
//轮播函数
function tab1(){
//加载菜单内容数
if(num < 3){
loadMenu(0);
}else if(num < 6){
loadMenu(1);
}else{
num = 0;
//一定要继续加载，否则会出现不一样的结果。
loadMenu(0);
}
$('img1').src = arr[num];
$('right').getElementsByTagName('span')[num % 3].style.background = 'blue';
};
//初始化
tab1();
//清楚所有样式的函数
function clearAll(){
for(var i = 0;i < 3 ;i++){
$('right').getElementsByTagName('span')[i].style.background = '#c0c0c0';
}
}
//定时器自动轮播图片
timer = setInterval(fn1,1000);
function fn1(){
num++;
clearAll();
tab1();
};
})
</script>
<style>
#top span{width:80px;height:30px;display:inline-block;background:green;clear:both;border-right:1px solid #fff;text-align:center;line-height:30px;}
#left{width:200px;height:100px;float:left;}
#left img{width:200px;height:100px;}
#right{width:50px;height:100px;float:left;}
#right span{width:50px;height:32px;display:block;background:#c0c0c0;border:1px solid #fff;line-height:32px;text-align:center;}
</style>
</head>
<body>
<div id="top"></div>
<div id="left"><img src="" id="img1"/></div>
<div id="right"><span>...</span><span>...</span><span>...</span></div>
</body>
</html>
3.淘宝商品广告效果
代码分享：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>淘宝商品广告效果</title>
<script>
window.onload = function(){
var arr = ['images/a1.jpg','images/a2.jpg','images/a3.jpg','images/a4.jpg','images/a1.jpg','images/a2.jpg','images/a3.jpg','images/a4.jpg','images/a1.jpg','images/a2.jpg','images/a3.jpg','images/a4.jpg','images/a1.jpg','images/a2.jpg'];
var oWrap = document.getElementById('wrap');
var aUl = oWrap.getElementsByTagName('ul');
/*var oContent = oWrap.getElementById('content');//oWrap.getElementById('content'); is not a function?*/
var aImg = document.getElementsByTagName('img');
var timer = null;
var num = 0;
//清楚样式函数
function clearAll(){
for(var i = 0;i < aUl.length;i++){
var aLi = aUl[i].getElementsByTagName('li');
for(var j = 0;j < aLi.length;j++){
aLi[j].style.color = '#424242';
aLi[j].style.background = '#fff';
};
}
};
timer = setInterval(function(){
if(num >= 0 && num < 7){
clearAll();
var aLi1 = aUl[0].getElementsByTagName('li');
aLi1[num].style.background = '#ff8494';
aLi1[num].style.color = '#fff';
aImg[0].src = arr[num];
}else{
clearAll();
var aLi2 = aUl[1].getElementsByTagName('li');
aLi2[aLi2.length - num % aLi2.length - 1].style.background = '#ff8494';
aLi2[aLi2.length - num % aLi2.length - 1].style.color = '#fff';
aImg[0].src = arr[aLi2.length - num % aLi2.length - 1];
}
num++;
if(num == 14){
num = 0;
}
},500);
};
</script>
<style>
body,ul{margin:0;padding:0;font-size:12px;color:#424242;font-famliy:'宋体';}
li{list-style:none;}
.clear{zoom:1;}
.clear:after{content:'';display:block;clear:both;}
#wrap{width:290px;padding:8px 4px 8px 4px;border:1px solid red;margin:30px auto;}
.left{height:210px;width:50px;float:left;}
#content{width:182px;height:206px;float:left;padding:0 4px 0 4px;}
.right{height:210px;width:50px;float:left;}
li{width:48px;height:26px;border:1px solid #ffbdbd;margin-bottom:2px;text-align:center;line-height:26px;}
</style>
</head>
<body>
<div id='wrap' class='clear'>
<ul class='left'>
<li>连衣裙</li>
<li>雪纺</li>
<li>T恤</li>
<li>铅笔裤</li>
<li>婚纱</li>
<li>外套</li>
<li>连体裤</li>
</ul>
<div id="content"><img src='images/a1.jpg' /></div>
<ul class='right'>
<li>包包</li>
<li>凉鞋</li>
<li>单鞋</li>
<li>太阳镜</li>
<li>丝袜</li>
<li>帆布鞋</li>
<li>情侣装</li>
</ul>
</div>
</body>
</html>
4.延时消失的菜单
代码分享：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>延时消失的菜单</title>
<script>
window.onload = function(){
var oWrap1 = document.getElementById('wrap1');
var oHeader = document.getElementById('header');
var oA = oHeader.getElementsByTagName('a');
var aDiv = oWrap1.getElementsByTagName('div');
var timer = null;
//清除所有的样式
function clearAll(){
for(var i = 0;i < oA.length - 1;i++){
oA[i].style.background = 'none'
aDiv[i + 1].style.display = 'none';
}
};
for(var i = 0;i < oA.length - 1;i++){
oA[i].index = i;
aDiv[i + 1].index = i + 1;
oA[i].onmouseover = function(){
clearAll();
clearTimeout(timer);
oA[this.index].style.background = '#638cb5';
aDiv[this.index + 1].style.display = 'block';
};
oA[i].onmouseout = function(){
//clearAll()
var that = this;
timer = setTimeout(function(){
oA[that.index].style.background = 'none';
aDiv[that.index + 1].style.display = 'none';
},200);
};
aDiv[i + 1].onmouseover = function(){
clearInterval( timer );
oA[this.index - 1].style.background = '#638cb5';
aDiv[this.index].style.display = 'block';
};
aDiv[i + 1].onmouseout = function(){
that = this;
timer = setTimeout(function(){
oA[that.index - 1].style.background = 'none';
aDiv[that.index].style.display = 'none';
},200);
};
}
};
</script>
<style>
.wrap{width:500px;margin:30px auto;position:relative;}
.clear{zoom:1}
.clear:after{content:'';display:block;clear:both;}
#header{width:500px;height:26px;background:url(images/1.gif) repeat-x;padding:6px 10px 6px 10px;}
a{text-decoration:none;color:#fff;float:left;width:70px;height:24px;--background:#638cb5;line-height:24px;text-align:center;margin:0 6px 0 6px;}
.lastA{float:right;}
span{width:4px;height:26px;float:left;background:url(images/2.gif) no-repeat;margin:0 6px 0 6px;}
.tishi{width:264px;height:32px;background:url(images/4.png) no-repeat;position:absolute;left:-100px;display:none;}
.tishi a{text-decoration:none;color:#185a94;}
.tishi1{width:264px;height:32px;background:url(images/4.png) no-repeat;position:absolute;left:-20px;display:none;}
.tishi1 a{text-decoration:none;color:#185a94;}
.tishi2{width:264px;height:32px;background:url(images/4.png) no-repeat;position:absolute;left:60px;display:none;}
.tishi2 a{text-decoration:none;color:#185a94;}
.tishi3{width:264px;height:32px;background:url(images/4.png) no-repeat;position:absolute;left:150px;display:none;}
.tishi3 a{text-decoration:none;color:#185a94;}
</style>
</head>
<body>
<div class='wrap' id='wrap1'>
<div id='header' class='clear'>
<a href='#' >首页</a><span></span>
<a href='#' >关于我们</a><span></span>
<a href='#' >作品</a><span></span>
<a href='#' >博客</a>
<a href='#' class='lastA'>更多>></a>
</div>
<div class='tishi'>
<a href='#'>css1 |</a>
<a href='#'>html1 |</a>
<a href='#'>js教程1</a>
</div>
<div class='tishi1'>
<a href='#'>css2 |</a>
<a href='#'>html2 |</a>
<a href='#'>js教程2</a>
</div>
<div class='tishi2'>
<a href='#'>css3 |</a>
<a href='#'>html3 |</a>
<a href='#'>js教程3</a>
</div>
<div class='tishi3'>
<a href='#'>css4 |</a>
<a href='#'>html4 |</a>
<a href='#'>js教程4</a>
</div>
</div>
</body>
</html>
下一节我们带大家一起探索js定时器的管理和函数封装的内容，谢谢大家。
扫一扫
1303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
