js---08函数 定时器
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <script>
// 数字、字符串、布尔、函数、对象(元素\数组\json\null)、未定义
alert( fn1().length );//
alert( typeof fn1() ); //string
function fn1(){
// return 100;
return 'miaov';
} alert( fn2() );//返回函数体 function (b){alert(a+b);};
fn2(20)(10);
function fn2(a){
return function (b){
alert(a+b); //30
};
} fn3().onload = function (){
document.body.innerHTML = 123;
};
function fn3(){
return window;
} alert(fn4());
function fn4(){
// return ; 不加return,返回未定义
} alert( fn5() );
function fn5(){
return 123;
alert(520);//不再执行
}
</script> <script>
window.onload = function (){
// var oBtn = document.getElementById('btn1');
// var oDiv = document.getElementById('div1');
$('btn1').onclick = function (){
alert( $('div1').innerHTML );
};
};
function $( id ){
return document.getElementById( id );
}
</script> <script>
fn1( 1,2,3 );
function fn1( a,b,c ){}
function fn1(){//不写形参名字,也传进来了,arguments里面,
//arguments => [ 1,2,3 ] —— 实参的集合
alert( arguments );//object
alert( arguments.length );
alert( arguments[arguments.length-1] );
} // 当函数的参数个数无法确定的时候:用 arguments
alert( sum( 1,2,3 ) ); //
alert( sum( 1,2,3,4 ) );//
function sum (){
var n = 0;
for( var i=0; i<arguments.length; i++ ){
n += arguments[i];
}
return n;
} var a = 1;
function fn2( a ){
arguments[0] = 3;
alert(a);//
var a = 2;
alert( arguments[0] );//
}
fn2(a);
alert(a);// 1
</script> <script>
window.onload = function (){
var miaov = document.getElementById('miaov');
//定时执行的嵌套,2秒后出来,3秒后关闭
setTimeout( function(){
miaov.style.display = 'inline-block';
setTimeout(function(){
miaov.style.display = 'none';
}, 3000); }, 2000);
};
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }
#pic img { width:400px; height:500px; }
#pic ul { width:40px; position:absolute; top:0; right:-50px; }
#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
#pic .active { background:#FC3; }
#pic span { top:0; }
#pic p { bottom:0; margin:0; }
#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
<script>
window.onload = function (){
var oDiv = document.getElementById('pic');
var oImg = oDiv.getElementsByTagName('img')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP = oDiv.getElementsByTagName('p')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li'); var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
var num = 0; var timer = null;
function autoPlay(){
timer = setInterval(function(){
num++;
num%=arrText.length;
fnTab();
}, 1000);
}
// autoPlay();
setTimeout( autoPlay, 2000 );
oDiv.onmouseover = function (){
clearTimeout( timer );//移开停止定时器
};
oDiv.onmouseout = autoPlay;//移上去执行定时器,autoPlay不要加括号,加括号表示返回值,
for( var i=0; i<arrUrl.length; i++ ){
oUl.innerHTML += '<li></li>';
}
// 初始化
function fnTab(){
oImg.src = arrUrl[num];//初始化为0张图片
oSpan.innerHTML = 1+num+' / '+arrUrl.length;
oP.innerHTML = arrText[num];//初始化为0个文字
for( var i=0; i<aLi.length; i++ ){
aLi[i].className = '';
}
aLi[num].className = 'active';
}
fnTab();
for( var i=0; i<aLi.length; i++ ){
aLi[i].index = i; // 索引值
aLi[i].onclick = function (){
num = this.index;
fnTab();
};
}
};
</script>
</head> <body> <div id="pic">
<img src="" />
<span>数量正在加载中……</span>
<p>文字说明正在加载中……</p>
<ul></ul>
</div> </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <style>
#qq { width:200px; height:400px; background:#F9C; }
#title { width:240px; height:180px; background:#FC6; position:absolute; top:10px; left:220px; display:none; }
</style>
<script src="miaov.js"></script>
<script>
$(function(){
var qq = $('qq');
var title = $('title');
var timer = null; qq.onmouseover = show;
qq.onmouseout = hide; title.onmouseover = show;
title.onmouseout = hide; function show(){
clearInterval( timer );//前面定时器开了,现在要关,不关显示不出来
title.style.display = 'block';
}
function hide(){
timer = setTimeout(function(){
title.style.display = 'none';
}, 200);
}
});
</script>
</head> <body> <div id="qq"></div>
<div id="title"></div> </body>
</html>
js---08函数 定时器的更多相关文章
- [概念] js的函数节流和throttle和debounce详解
js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...
- 超全面的JavaWeb笔记day03<JS对象&函数>
1.js的String对象(****) 2.js的Array对象 (****) 3.js的Date对象 (****) 获取当前的月 0-11,想要得到准确的月 +1 获取星期时候,星期日是 0 4.j ...
- JS中的定时器
在JS中的定时器分两种: 1,setTimeout() 2,setInterval() setTimeout(): 只在指定时间后执行一次: function hello(){ alert('hell ...
- js 中的定时器
在js中的定时器分两种:1.setTimeout() 2.setInterval() 1.setTimeOut() 只在指定时间后执行一次 /定时器 异步运行 function hello(){ al ...
- JS回调函数全解析教程
转自:http://blog.csdn.net/lulei9876/article/details/8494337 自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速g ...
- 学习js回调函数
<!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title> ...
- 如何理解JS回调函数
1.回调函数英文解释: A callback is a function that is passed as an argument to another function and is execut ...
- Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针
Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针 1.1. java方法引用(Method References) 与c#委托与脚本语言js ...
- 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数
来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...
- js引出函数概念的案例
js引出函数概念的案例 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...
随机推荐
- POJ 3277 线段树+扫描线
题意: 思路: 线段树求矩形面积的并...同 POJ 1151 //By SiriusRen #include <cstdio> #include <algorithm> us ...
- atom玩法
1.先用 git 下载一个 react-devtools: $ cd /some-directory$ git clone --recursive https://github.com/faceboo ...
- IT男送什么礼物给女朋友呢?
每到各种节日,加班到吐血的IT男们,总是没什么时间准备礼物给女朋友,偶尔想起又不知道送什么的好,女朋友虽然心里不说,多少有些难过.现在推荐朋友的羊毛毡手工店,每一件都是亲手制作,特别是可以个性定制,女 ...
- bootstrap如何自定义5列
废话少说,先上代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> < ...
- javascript常用收集一下
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcEl ...
- UVa 140 Bandwidth【枚举排列】
题意:给出n个节点的图,和一个节点的排列,定义节点i的带宽b[i]为i和其相邻节点在排列中的最远的距离,所有的b[i]的最大值为这个图的带宽,给一个图,求出带宽最小的节点排列 看的紫书,紫书上说得很详 ...
- Passpoint R1
Passpoint R1 自从 Android 6.0 支持从网络下载包含配置文件和凭据信息的特殊文件来配置 Passpoint R1(第 1 版)凭据,Android 就一直支持 Passpoint ...
- [NOI2003]逃学的小孩(树的直径)
[NOI2003]逃学的小孩 题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:"喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?"一听 ...
- Object-C,NumberDemo和StringDemo
晚上抽空写了2个Demo.第1个是演示字符串,第2个是演示数组和可变数组.只用到了几个基本的方法和基本语句. NSString字符串对象,NSNumber和NSMutableNumber,if语句,N ...
- COGS——T 1215. [Tyvj Aug11] 冗余电网
http://www.cogs.pro/cogs/problem/problem.php?pid=1215 ★ 输入文件:ugrid.in 输出文件:ugrid.out 简单对比时间限制: ...