<!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. [NOI2013模拟] BZOJ4705 棋盘游戏 解题报告(组合计数)

    莫名打不开这道题的链接,请读者自行搜索 Description 有一个N*M的棋盘,初始每个格子都是白色的.行操作是指选定某一行,将这行所有格子的颜色取反(黑白互换).列操作是指选定某一列,将这列所有 ...

  2. 机器学习规则:ML工程最佳实践----rule_of_ml section 3【翻译】

    作者:黄永刚 ML Phase III: 缓慢提升.精细优化.复杂模型 第二阶段就已经接近结束了.首先你的月收益开始减少.你开始要在不同的指标之间做出平衡,你会发现有的涨了而有的却降了.事情变得有趣了 ...

  3. shell call python

    python -c "import os; p=os.getcwd(); print(p);print(p);print(p);print('test over')"

  4. GoldenGate 日常监控

    正确启动数据库 源端启动数据库 SQL>  startup 源端启动goldengate GGSCI >  start mgr GGSCI >  start * 目标端启动数据库 S ...

  5. WLAN 感知

    WLAN 感知 通过 Android 8.0 中新增的 WLAN 感知功能,支持设备可以直接使用 WLAN 感知协议发现其他设备.与其他设备进行互连,以及将覆盖范围扩展到其他设备(Android 9 ...

  6. javascript--记忆函数

    function memory(val) { if(!memory.cached) {//判断是否创建了缓存 memory.cached = {}; } if(memory.cached[val] ! ...

  7. caioj 1082 动态规划入门（非常规DP6：火车票）

    f[i]表示从起点到第i个车站的最小费用 f[i] = min(f[j] + dist(i, j)), j < i 动规中设置起点为0,其他为正无穷 (貌似不用开long long也可以) #i ...

  8. MyBatis学习总结（17）——Mybatis分页插件PageHelper

    如果你也在用Mybatis,建议尝试该分页插件,这一定是最方便使用的分页插件. 分页插件支持任何复杂的单表.多表分页,部分特殊情况请看重要提示. 想要使用分页插件?请看如何使用分页插件. 物理分页 该 ...

  9. Spring Cloud学习笔记【四】断路器Hystrix

    雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因 “服务提供者” 的不可用导致 “服务消 ...

  10. IPMI远程管理一点记录

    http://www.07net01.com/storage_networking/IPMIyuanchengguanliyidianjilu_53093_1357975254.html