<!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. BZOJ 3931 Dijkstra+网络流

    思路: (我能说按照题意模拟么) 用long long inf 要开大--. //By SiriusRen #include <queue> #include <cstdio> ...

  2. poj2823/hdu3415 - 数据结构 单调队列

    poj2823 题目链接 长度为N的数组,求宽度k的滑动窗口在数组上滑动时窗口内的最大值或最小值 如果用单调队列做,求最小值时,队列应该严格递增的.所以插入时,队尾大于等于插入值的元素都应被舍弃,因为 ...

  3. redis动态修改参数

    通过 config get 命令可以查看参数. 通过config set 可以修改某些参数 动态关闭redis的aof功能:(不要忘了也修改配置文件中的aof选项使其保持一致) 127.0.0.1:6 ...

  4. url链接打开本地应用（测试通过）

    基于windows!! 类比mailto://XXXX 主要参考: https://www.cnblogs.com/snow365/p/6428212.html 应用 1.在网页上本地办公 网页应用越 ...

  5. [洛谷P1156][codevs1684]垃圾陷阱

    题目大意:一头奶牛掉进了深度为d的坑里,现在有g个垃圾在特定时刻ti扔进来.奶牛可以吃垃圾以获得体力,吃第i个垃圾能获得mi的体力,也可以堆放垃圾以逃生,第i个垃圾高度为hi.当高度≥d时奶牛成功逃生 ...

  6. MySQL 使用自增ID主键和UUID 作为主键的优劣比較具体过程（从百万到千万表记录測试）

      主键类型 SQL语句 运行时间 (秒)   (1)模糊范围查询1000条数据,自增ID性能要好于UUID 自增ID SELECT SQL_NO_CACHE t.* FROM test.`UC_US ...

  7. poj1014 hdu1059 Dividing 多重背包

    有价值为1~6的宝物各num[i]个,求能否分成价值相等的两部分. #include <iostream> #include <cstring> #include <st ...

  8. HDU 1730 Northcott Game

    简单的尼姆博弈.想到了非常easy! 就拿一行举例.怎么赢.? 就是死劲挨着对方移,当然假设本身就是挨着的,又轮到你移动了,那么对于这一行来讲.你就是输的!! 由此可见每一行的棋子起始距离就显得尤为重 ...

  9. Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

    Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...

  10. hdoj--1034--Hidden String（dfs）

    Hidden String Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) ...