JavaScript高级

其他 2018-05-16 20:11:20 阅读次数: 3

JavaScript高级

函数传参 – return关闭

函数’return’关键字
函数中’return’关键字的作用：
1、返回函数中的值或者对象
2、结束函数的运行 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
        var input = document.getElementById("value");
        alert(input.innerHTML);


        var oDiv = document.getElementById("div1");
        var oBtn = document.getElementById("btn");

        function fnChange(sColor, sSize){
            oDiv.style.color = sColor;
            oDiv.style.fontSize = sSize;
        }

        // 如果函数没有返回值 那么返回undefined

        oBtn.onclick = function(){fnChange('red', '30px');}

        }

        function fnAdd(iNum01, iNum02){
            var result = iNum01 + iNum02;
            document.getElementById("demo").innerHTML=result;

            return; // 只写一个return 作用是在这一句函数结束运行
            }

        var oDiv = document.getElementById("div1");
        var oBtn = document.getElementById("btn");

        function fnChange(sColor, sSize){
            oDiv.style.color = sColor;
            oDiv.style.fontSize = sSize;
        }

        // 如果函数没有返回值 那么返回undefined

        // oBtn.onclick = function(){fnChange('red', '30px');}
        oBtn.onclick = "fnChange('red', '30px')";

    </script>
</head>

<body>
    <div id="value" >计算10+12</div>
    <p id="demo">结果</p>
    <input type="button" onclick="fnAdd(10,12)" value="点击计算">

    <input type="button" id="btn" value="change css">
    <div id="div1">这是一个div</div>
</body>
</html>

数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
定义数组的方法

    //对象的实例创建
    var aList = new Array(1,2,3);

    //直接量创建
    var aList2 = [1,2,3,'asd'];
    //属性 .length
    //方法 push pop reverse indexOf splice join

<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 创建数组的第一种方法 面向对象
        var aList01 = new Array(1, 2, 3);

        // 创建数组方法2 直接量的方式
        var aList02 = ['a', 'b', 'c', 'd'];

        // 数组的方法与属性

        // 获取数组成员的个数 -- 属性
        var iLen = aList02.length;

        alert(iLen);

        // 操作数组的某个成员
        alert(aList02[2]);

        // 从数组后面增加成员 push()
        aList02.push("e");
        alert(aList02);

        // 从数组后删除成员 pop()
        aList02.pop();
        alert(aList02);

        // 将数组反转  reverse()
        aList02.reverse();
        alert(aList02);

        // 获取某个成员在数组中第一次出现的索引值 indexOf()
        var aList3 = ['a', 'b', 'c', 'd', 'c', 'd'];
        var iPos = aList3.indexOf("c");
        var iPos2 = aList3.indexOf("e")

        alert(iPos);
        alert(iPos2); // 数组中不存在该值时 就返回-1


        // 在数组中增加或删除成员  splice()
        aList3.splice(2, 1, 7, 8, 9); // 从第2个元素开始 删除1个元素 增加7 8 9
        alert(aList3);

        // join()将数组成员通过一个分隔 join()
        var sTr = aList3.join("-");
        var sTr2 = aList3.join("");
        alert(sTr);
        alert(sTr2);

        // 多维度数组
        var aList = [[1,2,3], ['a', 'b', 'c', 'd']];
        alert(aList[0][1]);

    </script>
</head>
<body>

</body>
</html>

循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var aList = ['a', 'b', 'c', 'd', 'e'];
        var iLen = aList.length;

        // i++ 相当于 i+=1
        for(var i=0;i<iLen;i++){
            alert(aList[i])
        }


    </script>
</head>
<body>

</body>
</html>

循环去重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var aList = ['a', 'b', 'c', 'd', 'e', 'f', 'b', 'a', 'd', 'f'];

        var aList2 = [];

        for(var i=0;i<aList.length;i++){
            if(aList.indexOf(aList[i])==i){
                aList2.push(aList[i]);
            }
        };
        alert(aList2);
    </script>
</head>
<body>

</body>
</html>

字符串的处理方法

    字符串合并操作：“ + ” 
    parseInt() 将数字字符串转化为整数 
    parseFloat() 将数字字符串转化为小数 
    split() 把一个字符串分隔成字符串组成的数组 
    indexOf() 查找字符串是否含有某字符 
    substring() 截取字符串 用法： substring(start,end)（不包括end） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script>
        window.onload = function(){
            var iNum01 = 12;
            var sNum01 = '12';
            var sNum02 = '12.45';

            alert(iNum01 + 10); // 加法运算 22

            alert(sNum01 + 10); // 字符串拼接 '1210' 如果有一边是字符串就做字符串拼接

            // parseInt 将字符串转化为数值型数据
            alert(parseInt(sNum01) + 10);
            // parseFloat 将字符串转化为浮点数
            alert(parseFloat(sNum02) + 10);


            var sTr = '2018-05-07';
            // split 拆分字符串为数组 -- 列表
            var aList = sTr.split("-");
            alert(aList);

            var aList2 = sTr.split("");
            alert(aList2);

            // indexOf 获取某小段字符串在大段字符串里面的索引值
            var sTr2 = 'abcdefg123456';
            var iPos = sTr2.indexOf('e');
            var iPos2 = sTr2.indexOf('-1');

            alert(iPos);
            alert(iPos2);

            // substring 截取字符串
            var sTr3 = sTr2.substring(3, 6);
            alert(sTr3);

            // 字符串反转
            var sTr4 = sTr2.split("").reverse().join("");
            alert(sTr4);
        }

    </script>
</head>
<body>

</body>
</html>

创建定时器

主要用于 移动动画 无缝滚动

定时器：
setTimeout  只执行一次的定时器 
clearTimeout 关闭只执行一次的定时器
setInterval  反复执行的定时器
clearInterval 关闭反复执行的定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function fnMyalert(){
            alert("吃屎啦");
        }

        // fnMyalert();

        // 设置定时器
        // 创建只执行依次的定时器
        // setTimeout(函数名称, 毫秒)
        setTimeout(fnMyalert, 2000);
        var oTimer = setTimeout(fnMyalert, 2000);


        // 创建反复执行的定时器
        var oTimer2 = setInterval(fnMyalert, 2000);

        // 关闭反复执行的定时器
        clearInterval(oTime2)
    </script>
</head>
<body>

</body>
</html>

定时器动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 500px;
            background:gold;
            position: fixed;
            left: 0px;
            top: 100px;
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("box")
            var iLeft  = 0;
            var iSpeed = 3;

            setInterval(fnMove, 30)
            var oTimer = setInterval(fnMove, 30)
            function fnMove(){
                iLeft += iSpeed;
                oDiv.style.left = iLeft + 'px';

                if(iLeft>600){
                    iSpeed = -3;
                }

                if(iLeft<0){
                    iSpeed = 3;
                }
            }

            // fnMove();
        }
    </script>
</head>
<body>
    <div class="box" id="box">xxx</div>
</body>
</html>

无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style type="text/css">
        body,ul{
            margin:0;
            padding:0;
        }

        .list_con{

            width:1000px;
            height:200px;
            border:1px solid #000;
            margin:10px auto 0;
            background-color:#f0f0f0;
            position:relative;
            overflow:hidden;
        }

        .list_con ul{
            list-style:none;
            width:2000px;
            height:200px;
            position:absolute;
            left:0;
            top:0;
        }


        .list_con li{
            width:180px;
            height:180px;
            float:left;
            margin:10px;
        }

        .btns_con{
            width:1000px;
            height:30px;
            margin:50px auto 0;
            position:relative;
        }

        .left,.right{
            width:30px;
            height:30px;
            background-color:gold;
            position:absolute;
            left:-40px;
            top:124px;
            font-size:30px;
            line-height:30px;
            color:#000;
            font-family: 'Arial';
            text-align:center;
            cursor:pointer;
            border-radius:15px;
            opacity:0.5;
        }
        .right{
            left:1010px;            
            top:124px;          
        }
    </style>
    <script type="text/javascript">
            window.onload = function(){
                var oLeft = document.getElementById("btn01");
                var oRight = document.getElementById("btn02");
                var oUl = document.getElementById("list");
                var oSlide = document.getElementById("slide");
                // 将ul中的五个li复制一份
                oUl.innerHTML = oUl.innerHTML + oUl.innerHTML

                var iLeft = 0;
                var iSpeed = -3;

                // 定义一个变量存储 iSpeed值
                var iLastSpeed = 0;

                var oTimer = setInterval(fnMove, 30)
                function fnMove(){
                    iLeft += iSpeed;

                    oUl.style.left = iLeft + 'px';

                    if(iLeft<-1000){
                        iLeft = 0

                    }

                    if(iLeft>0){
                        iLeft = -1000;
                    }

                    // 切换滚动的方法 点击左右箭头
                    oLeft.onclick = function(){
                        iSpeed = -3;

                    }

                    oRight.onclick = function(){
                        iSpeed = 3;
                    }

                    // 移入滚动停止 移出滚动继续
                    oSlide.onmouseover = function(){
                        // clearInterval(oTimer);
                        iLastSpeed = iSpeed;
                        iSpeed = 0;
                    }


                    oSlide.onmouseout = function(){
                        // oTimer = setInterval(fnMove, 30);
                        iSpeed = iLastSpeed;
                    }
                }
            }
    </script>
</head>
<body>
    <div class="btns_con">
        <div class="left" id="btn01">&lt;</div>
        <div class="right" id="btn02">&gt;</div>
    </div>
    <div class="list_con" id="slide">
        <ul id="list">
        <li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
        </ul>

    </div>
</body>
</html>

变量作用域

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 定义全局变量
        var iNum01 = 12;

        function fnMyalert(){
            // 定义局部变量
            var iNum02 = 24; // 函数内部定义局部变量 相当于在函数内部定义局部变量

            iNum03 = 36; // 内部定义一个变量 相当于在函数内部定义全局变量


            // 使用全局变量
            alert('函数内部调用的全局变量'+iNum01);
            alert('函数内部调用的局部变量'+iNum02);

            iNum01 = 13;

        }
        fnMyalert();

        alert('函数外部调用全局变量'+iNum01); // 13
        alert("函数外部调用全局变量"+iNum03); // 这里不加var 他就是一个全局变量
    </script>
</head>
<body>

</body>
</html>

封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
函数体提前执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/touzi.js"></script>
    <script src="js/tishi.js"></script>
    <script>
        fnTouzi();
    </script>
</head>
<body>

</body>
</html>

js文件

/*
function fnWrap(){
    function fnTouzi(){
    alert("亲, 请关注网站新的产品!");
}

fnTouzi();

}
fnWrap();
*/

// 上面的定义方法 函数名称还可能同名 可以改写成下面封闭函数的形式
;;;;;

// 一个分号代表一个空的js语句

;(function(){
    function fnTouzi(){
    alert("亲, 请关注网站新的产品!");
}

fnTouzi();

})();
// ()函数体 () 执行
// 封闭函数 没有名称 函数体提前


// 牛逼
/*
;!function(){
    function fnTouzi(){
    alert("亲, 请关注网站新的产品!");
}

fnTouzi();

}();
*/
;~function(){
    function fnTouzi(){
    alert("亲, 请关注网站新的产品!");
}

fnTouzi();

}();

js文件

function fnTouzi(){
    alert("请输入投资金额：")
}

猜你喜欢

转载自blog.csdn.net/troysps/article/details/80271035
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022