<!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函数 定时器的更多相关文章

  1. [概念] js的函数节流和throttle和debounce详解

    js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...

  2. 超全面的JavaWeb笔记day03<JS对象&函数>

    1.js的String对象(****) 2.js的Array对象 (****) 3.js的Date对象 (****) 获取当前的月 0-11,想要得到准确的月 +1 获取星期时候,星期日是 0 4.j ...

  3. JS中的定时器

    在JS中的定时器分两种: 1,setTimeout() 2,setInterval() setTimeout(): 只在指定时间后执行一次: function hello(){ alert('hell ...

  4. js 中的定时器

    在js中的定时器分两种:1.setTimeout() 2.setInterval() 1.setTimeOut() 只在指定时间后执行一次 /定时器 异步运行 function hello(){ al ...

  5. JS回调函数全解析教程

    转自:http://blog.csdn.net/lulei9876/article/details/8494337 自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速g ...

  6. 学习js回调函数

    <!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title> ...

  7. 如何理解JS回调函数

    1.回调函数英文解释: A callback is a function that is passed as an argument to another function and is execut ...

  8. Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针

    Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针   1.1. java方法引用(Method References) 与c#委托与脚本语言js ...

  9. 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数

    来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...

  10. js引出函数概念的案例

    js引出函数概念的案例   1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...

随机推荐

  1. 31.ng-init 指令初始化 AngularJS 应用程序变量。

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. <html> <head> <meta charset="utf ...

  2. BZOJ 4552 排序 Heoi2016

    记得当年省选的时候 这道题连暴力都没写对(尴尬ing) (当年天真的认为sort是左闭右闭的hhhhhh) 思路: 首先 二分答案 线段树 首先二分答案,然后需要知道进行m次排序后p位置上的数字是否大 ...

  3. SharePoint InfoPath 保存无法发布问题

    设计完表单以后提示以下错误 错误描述 InfoPath无法保存下列表单:******* 此文档库已被重命名或删除,或者网络问题导致文件无法保存.如果此问题持续存在,请于网络管理员联系. 可参考网站 & ...

  4. Asp.Net 中使用 水晶报表（上）

    Asp.Net中使用水晶报表(上) 在我们对VS.Net中的水晶报表(Crystal Reports)进行研究之前,我和我朋友对如何将这个复杂的东东加入我们的Web应用有着非常的好奇心.一周以后,在阅 ...

  5. [HAOI2016]找相同字符 广义后缀自动机_统计出现次数

    题目描述:给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两个子串中有一个位置不同. 输入输出格式输入格式:两行,两个字符串 s1,s2,长度分别为n ...

  6. Hadoop集群配置搭建

    环境:Centos 6.9,Hadoop 2.7.1,JDK 1.8.0_161,Maven 3.3.9 前言: 1.配置一台master服务器,两台或多台slave服务器.    2.master可 ...

  7. 高并发MYSQL如何优化处理?

    1)代码中sql语句优化 2)数据库字段优化,索引优化 3)加缓存,redis/memcache等 4)主从,读写分离 5)分区表 6)垂直拆分,解耦模块 7)水平切分

  8. CF546E Soldier and Traveling（网络流，最大流）

    CF546E Soldier and Traveling 题目描述 In the country there are \(n\) cities and \(m\) bidirectional road ...

  9. 题解 P2068 【统计和】

    这是一道单点修改,区间查询的线段树. 需要实现的操作有三个:建树,更新与查询. 首先,线段树用结构体维护,如下: struct node { int l, r; int val; } tree[max ...

  10. 【ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined) D】Tree

    [链接] 我是链接,点我呀:) [题意] 让你在树上找一个序列. 这个序列中a[1]=R 然后a[2],a[3]..a[d]它们满足a[2]是a[1]的祖先,a[3]是a[2]的祖先... 且w[a[ ...