javascript-初级-day08

return

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>

// return 返回值
// 数字、字符串、布尔、函数、对象（元素\[]\{}\null）、未定义

// fn1();            =>   100
// alert( fn1().length );
// alert( typeof fn1() );
function fn1(){
    // return 100;
    return 'miaov';
}

// alert( fn2() );

// fn2(20)(10);
function fn2(a){
    return function (b){
        alert(a+b);            // 嘿嘿，我是注释~
    };
}

fn3().onload = function (){
    document.body.innerHTML = 123;
};

function fn3(){
    return window;
}

// alert(fn4());
function fn4(){
    // return ;
}

// alert( fn5() );
function fn5(){
    return 123;
    
    alert(520);
}

/*
    return：返回值
        1) 函数名+括号：fn1()    ==>  return 后面的值；
        2) 所有函数默认返回值：未定义；
        3) return 后面任何代码都不执行了；
*/

</script>

</head>

<body>
</body>
</html>
复制代码

2-getId()

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div { width:100px; height:100px; background:red; }
</style>
<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>
</head>

<body>

<input id="btn1" type="button" value="按钮" />
<div id="div1">123</div>

</body>
</html>
复制代码

3-$符的简化版

miaov.js

复制代码
// JavaScript Document

function $( v ){
    if( typeof v === 'function' ){
        window.onload = v;
    } else if ( typeof v === 'string' ) {
        return document.getElementById(v);
    } else if ( typeof v === 'object' ) {
        return v;
    }
}

function getStyle( obj, attr ){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
复制代码
复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="miaov.js"></script>
<script>
/*
$( function(){
    $('#btn1').click(function(){
        $(this).css('background', 'red');
    });
});
*/

$(function(){
    $('btn1').onclick = function(){
        $( this ).style.background = 'yellow';
    };
});

</script>
</head>

<body>

<input id="btn1" type="button" value="按钮" />

</body>
</html>
复制代码

4-return应用

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>

// alert( fn1( 5 ) );            // [ 1,2,3,4,5 ]
// alert( fn1( 7 ) );            // [ 1,2,3,4,5,6,7 ]

function fn1( n ){
    var arr = [];
    for( var i=1; i<=n; i++ ){
        arr.push(i);
    }
    return arr;
}



</script>

</head>

<body>
</body>
</html>
复制代码

5-arguments

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>

fn1( 1,2,3 );                                        // 实参——实际传递的参数
// function fn1( a,b,c ){        // 形参——形式上，abc这些名代表123
function fn1(){
    // arguments => [ 1,2,3 ] —— 实参的集合
    // alert( arguments );
    // alert( arguments.length );
    // alert( arguments[arguments.length-1] );
}

// 当函数的参数个数无法确定的时候：用 arguments
// alert( sum( 1,2,3 ) );                // 6
// alert( sum( 1,2,3,4 ) );            // 10
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);                                                // 3
    var a = 2;
    alert( arguments[0] );    // 2
}
fn2(a);
alert(a);                                                    // 1                     

</script>

</head>

<body>
</body>
</html>
复制代码

6-获取元素样式

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div { width:100px; height:120px; background:red; }
</style>
<script src="miaov.js"></script>
<script>
$(function(){
    
    // $('div1').style.width = '300px';
    
    
    $('btn1').onclick = function  (){
        // alert( $('div1').style.width );
        // $('div1').style.cssText = 'width:350px;';
        
        // alert( getComputedStyle( $('div1') ).width );            // IE6 7 8 不兼容
        
        // alert( $('div1').currentStyle.width );                                        // 标准浏览器不兼容
        /*
        if( $('div1').currentStyle ){
            alert( $('div1').currentStyle.width );
        } else {
            alert( getComputedStyle( $('div1'), 250 ).width );
            // FF 4.0 之前
        }
        */
        
        // alert( getStyle( $('div1'), 'width' ) );
        // alert( getStyle( $('div1'), 'height' ) );
        
        alert( getStyle( $('div1'), 'marginRight' ) );
        
        /*
                获取到的是计算机（浏览器）计算后的样式
                
                background: url() red ……        复合样式（不要获取）
                backgroundColor                                    单一样式（不要用来做判断）
                
                不要有空格
                
                不要获取未设置后的样式：不兼容
        */
    };
});


</script>
</head>

<body>

<input id="btn1" type="button" value="按钮" />
<div id="div1"></div>

</body>
</html>
复制代码

7-定时器

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
/*
    定时器：时间概念
        var timer = setInterval( 函数, 毫秒 );                    重复执行（发动机）
        clearInterval( timer );                                                                    清除
        
        var timer = setTimeout( 函数, 毫秒 );                执行一次（炸弹）
        clearTimeout( timer );
*/

// for(var i=0; i<3; i++){ document.title = i; }            // 瞬间完成，没有时间根据

i = 0;

var timer = null;

function fn1(){
    i++;
    document.title = i;
    
    if( i === 10 ){
        clearInterval( timer );
    }
}
timer = setInterval( fn1, 200 );
// fn1();        // 直接调用
// document.onclick = fn1;            // 事件调用
</script>

</head>

<body>
</body>
</html>
复制代码

8-替换背景

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>

<input type="button" value="换背景吧" />
<input type="button" value="停" />

<script>
var aBtn = document.getElementsByTagName('input');
var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
var num = 0;
var timer = null;

var oBody = document.body;

aBtn[0].onclick = function (){
    
    clearInterval( timer );            // null、未定义
    
    timer = setInterval(function(){
        oBody.style.background  = 'url('+ arrUrl[num] +')';
        num++;
        num%=arrUrl.length;
    }, 1000);
};
aBtn[1].onclick = function (){
    clearInterval( timer );
};

// oBody.style.background  = 'url('+ arrUrl[num] +')';

</script>

</body>
</html>
复制代码

广告案例

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body { background:url(img/sina.jpg) no-repeat center 0; text-align:center; }
img { display:none; }
</style>
<script>
window.onload = function (){
    var miaov = document.getElementById('miaov');
    
    setTimeout( function(){
        miaov.style.display = 'inline-block';
        
        setTimeout(function(){
            miaov.style.display = 'none';
        }, 3000);
        
    },  2000);
};
</script>
</head>

<body>

<img id="miaov" src="img/miaov.jpg" />

</body>
</html>
复制代码

10-图片自动切换实例

复制代码
<!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;
    
    ////////////////////////////////////////////////////////////////////////
    
    for( var i=0; i<arrUrl.length; i++ ){
        oUl.innerHTML += '<li></li>';
    }
    
    // 初始化
    function fnTab(){
        oImg.src = arrUrl[num];
        oSpan.innerHTML = 1+num+' / '+arrUrl.length;
        oP.innerHTML = arrText[num];
        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>
复制代码

11-setTimeout实例-模仿qq查看资料效果

复制代码
<!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>
复制代码

 

posted @   三号小玩家  阅读(241)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
Title
快
乐
三号小玩家的 Mail: 17612457115@163.com, 联系QQ: 1359720840 微信: QQ1359720840

喜欢请打赏

扫描二维码打赏

支付宝打赏

了解更多

点击右上角即可分享
微信分享提示
SQL AI 助手