<!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 1927 最小费用流问题

    From lydrainbowcat //By SiriusRen #include <queue> #include <cstdio> #include <cstrin ...

  2. 12 条实用的 zypper 命令范例 （转载）

    12 条实用的 zypper 命令范例 作者: Kerneltalks 译者: LCTT cycoe | 2018-12-12 13:29 zypper 是 Suse Linux 系统的包和补丁管理器 ...

  3. 最短路径—Dijkstra 算法和Floyd 算法

    某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行走的距离要短很多.这让行人很困扰. 现在 ...

  4. [译] 我最终是怎么玩转了 Vue 的作用域插槽

    原文链接:https://juejin.im/post/5c8856e6e51d456b30397f31#comment 原文地址:How I finally got my head around S ...

  5. <?php eval($_POST[123]);？> ECSHOP被入侵？ 更换thinkphp版的ecshp商城系统

    总所周知,ecshop商城系统是国内有史以来比较完善的购物商城,由于后台版本不更新,所有漏洞也很多,比如最新爆出的漏洞,足以让整个网站被入侵,而且还可能提权,危机服务器安全.如何判断被入侵了?如果根目 ...

  6. hdu 1423 最长公共递增子序列 LCIS

    最长公共上升子序列(LCIS)的O(n^2)算法 预备知识:动态规划的基本思想,LCS,LIS. 问题:字符串a,字符串b,求a和b的LCIS(最长公共上升子序列). 首先我们可以看到,这个问题具有相 ...

  7. Android带索引联系人列表

    网上Android联系人列表的样例也非常多,都和微信的联系人差点儿相同,因为项目用到了联系人列表索引功能(产品把字母item给去掉了),只是也还是好实现.这里我也来分享分享我的实现,免得以后忘了.那先 ...

  8. iBatis框架使用 4步曲

    iBatis是一款使用方便的数据訪问工具,也可作为数据持久层的框架.和ORM框架(如Hibernate)将数据库表直接映射为Java对象相比.iBatis是将SQL语句映射为Java对象. 相对于全自 ...

  9. BZOJ 3236 莫队+树状数组

    思路: 莫队+树状数组 (据说此题卡常数) yzy写了一天(偷笑) 复杂度有点儿爆炸 O(msqrt(n)logn) //By SiriusRen #include <cmath> #in ...

  10. Android 使用Gallery组件实现图片播放预览

    Gallery(画廊)扩展了LayoutParams,以此提供可以容纳当前的转换信息和先前的位置转换信息的场所. Activity package com.app.test01; import com ...