<!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. 1.MySQL与MongoDB的操作对比，以及区别

    转自:https://www.cnblogs.com/chris-oil/p/4982490.html MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoD ...

  2. LeetCode（6）ZigZag Conversion

    题目如下: C++代码: #include <iostream> #include <string> using namespace std; class Solution { ...

  3. WIFI 测试和调试

    WIFI测试和调试 本文将介绍如何使用 ASOP 中提供的工具测试和调试 WLAN 实现. 测试 为了测试 WLAN 框架,AOSP 提供了一系列单元测试.集成测试 (ACTS) 和 CTS 测试. ...

  4. Windows Server 2012 r2 显示计算机图标

    在 Windows Server 2012 R2 系统中,微软取消了服务器桌面个性化选项,如何重新调出配置界面,在桌面上显示计算机图标,本文为大家介绍一下! Win2012我的电脑怎么显示到桌面? 一 ...

  5. Mac安装composer安装Yii2项目

    [注释:]本人原创,如需转载请注明来源链接! 通过安装Composer方式安装Yii 如果还没有安装 Composer,你可以按 getcomposer.org 中的方法安装. 在 Linux 和 M ...

  6. CentOS7.3 下开放防火墙的端口

    CentOS 7.3默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1:关闭firewall: systemctl stop firewalld.service system ...

  7. php异常处理的深入

    引出 如果你调一个类,调用时数据验证时报了个错,你会以什么方式返回 数组,布尔值? 数组这个可以带错误原因回来,那布尔值呢? 返回了个 false, 报错时把错误放在类变量里?还是专门用一个获取错误的 ...

  8. 钩子(hooks)—webhook-使用钩子自动触发部署

    钩子(hooks)-webhook http://fighter.blog.51cto.com/1318618/1670667 https://www.lovelucy.info/auto-deplo ...

  9. 一种基于RBAC模型的动态访问控制改进方法

    本发明涉及一种基于RBAC模型的动态访问控制改进方法,属于访问控制领域.对原有RBAC模型进行了权限的改进和约束条件的改进,具体为将权限分为静态权限和动态权限,其中静态权限是非工作流的权限,动态权限是 ...

  10. 【android】getCacheDir()、getFilesDir()、getExternalFilesDir()、getExternalCacheDir()的作用

    getCacheDir()方法用于获取/data/data/<application package>/cache目录 getFilesDir()方法用于获取/data/data/< ...