undefined

函数传参

发表于 | 分类于 ，
字数统计: 1,119 | 阅读时长 ≈ 6

函数传参

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    /*
    	函数传递参数
    	参数=JS的数据类型：
    		数字、字符串、布尔、函数、对象、未定义
    */

    fn1(100, 'px');

    function fn1(a, b) {
        // alert( a+b );
    }

    fn2('miaov');
    fn2('妙味课堂');

    function fn2(a) {
        // alert(a.charAt(2));
    }

    //传递一个有名字的函数，不用带括号
    function fn4() {
        alert(4);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    fn3(fn4);
    fn3(function(a) { alert(a); });

    function fn3(fn) {
        fn(100);
        fn();
    }

    //传递对象
    fn5(window, document);

    function fn5(w, d) {
        w.onload = function() {
            d.body.innerHTML = 123;
        };
    }
    </script>
</head>

<body>
</body>

</html>

代码重用

1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
2、把核心主程序实现，用函数包起来
3、把每组里不同的值找出来，通过传参实现 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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;
    }

    .box {
        width: 400px;
        height: 500px;
        position: relative;
        background: url(img/loader_ico.gif) no-repeat center #fff;
        float: left;
        margin-right: 60px;
    }

    .box img {
        width: 400px;
        height: 500px;
    }

    .box ul {
        width: 40px;
        position: absolute;
        top: 0;
        right: -50px;
    }

    .box li {
        width: 40px;
        height: 40px;
        margin-bottom: 4px;
        background: #666;
    }

    .box .active {
        background: #FC3;
    }

    .box span {
        top: 0;
    }

    .box p {
        bottom: 0;
        margin: 0;
    }

    .box p,
    .box span {
        position: absolute;
        left: 0;
        width: 400px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        background: #000;
    }
    </style>
    <script>

    window.onload = function() {
        fnTab('pic1', ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png'], ['小宠物', '图片二', '图片三', '面具'], 'onclick');
        fnTab('pic2', ['img/2.png', 'img/3.png', 'img/4.png'], ['图片二', '图片三', '面具'], 'onmouseover');
    };

    function fnTab(id, arrUrl, arrText, evt) {
        var oDiv = document.getElementById(id);
        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 num = 0;

        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][evt] = function() {
                num = this.index;
                fnTab();
            };
        }
    }
    </script>
</head>

<body>
    <div id="pic1" class="box">
        <img src="" />
        <span>数量正在加载中……</span>
        <p>文字说明正在加载中……</p>
        <ul></ul>
    </div>
    <div id="pic2" class="box">
        <img src="" />
        <span>数量正在加载中……</span>
        <p>文字说明正在加载中……</p>
        <ul></ul>
    </div>
</body>

</html>

应用：仿淘宝购物车计算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
 
    window.onload = function() {
        var oUl = document.getElementById('list');
        var aLi = oUl.getElementsByTagName('li');

        for (var i = 0; i < aLi.length; i++) {
            fn1(aLi[i]);
        }

        function fn1(oLi) {
            var aBtn = oLi.getElementsByTagName('input');
            var oStrong = oLi.getElementsByTagName('strong')[0];
            var oEm = oLi.getElementsByTagName('em')[0];
            var oSpan = oLi.getElementsByTagName('span')[0];
            var n1 = Number(oStrong.innerHTML); //动态获取 '0'		=>   0
            var n2 = parseFloat(oEm.innerHTML); //动态获取   '12.5元' => 12.5

            aBtn[0].onclick = function() {
                n1--;
                if (n1 < 0) {
                    n1 = 0;
                }
                oStrong.innerHTML = n1;
                oSpan.innerHTML = n1 * n2 + '元';
            };
            aBtn[1].onclick = function() {
                n1++;
                oStrong.innerHTML = n1;
                oSpan.innerHTML = n1 * n2 + '元';
            };
        }
    };
    </script>
</head>

<body>
    <ul id="list">
        <li>
            <input type="button" value="-" />
            <strong>0</strong>
            <input type="button" value="+" /> 单价：
            <em>12.5元</em> 小计：
            <span>0元</span>
        </li>
        <li>
            <input type="button" value="-" />
            <strong>0</strong>
            <input type="button" value="+" /> 单价：
            <em>10.5元</em> 小计：
            <span>0元</span>
        </li>
        <li>
            <input type="button" value="-" />
            <strong>0</strong>
            <input type="button" value="+" /> 单价：
            <em>8.5元</em> 小计：
            <span>0元</span>
        </li>
        <li>
            <input type="button" value="-" />
            <strong>0</strong>
            <input type="button" value="+" /> 单价：
            <em>8元</em> 小计：
            <span>0元</span>
        </li>
        <li>
            <input type="button" value="-" />
            <strong>0</strong>
            <input type="button" value="+" /> 单价：
            <em>14.5元</em> 小计：
            <span>0元</span>
        </li>
    </ul>
    <p>
        商品合计共：0件，共花费了：0元
        <br /> 其中最贵的商品单价是：0元
    </p>
</body>

</html>

觉得本站不错，请作者吃根辣条
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多