javascript-初级-day05js函数传参

JS基础-01 函数传参、参数类型-1

<!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);

}

// 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>

JS基础-02 函数传参、重用

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

fn1(100);

fn1('miaov');

fn1(function (){ alert(1); });

function fn1(a){

    if( typeof a === 'number' && a === a ){

        alert( a+20 );

    } else if ( typeof a === 'string' ) {

        alert( a.charAt(2) );

    } else if ( typeof a === 'function' ) {

        a();

    }

}

</script>

</head>

<body>

</body>

</html>

JS基础-03 函数传参、重用的应用

<!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>

/*

    重用代码：

        1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素

        2、把核心主程序实现，用函数包起来

        3、把每组里不同的值找出来，通过传参实现

*/

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>

左边是点击事件，又是鼠标滑入事件

JS基础-04 计算价格：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

/*

    重用代码：

        1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素

        2、把核心主程序实现，用函数包起来

        3、把每组里不同的值找出来，通过传参实现

*/

window.onload = function (){

    var oUl = document.getElementById('list');

    //获取一组li值

    var aLi = oUl.getElementsByTagName('li');

    //一组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 + '元';

            p.n1+= parseFloat(oSpan.innerHTML);

        };

        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>

</body>

</html>

javascript-初级-day05js函数传参的更多相关文章

【JS学习笔记】函数传参
比如仅仅改变背景的颜色函数传参:参数就是占位符. 那么在什么时候用传参呢?函数里定不下来的东西. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
c# 内存的具体表现- 通用类型系统深拷贝浅拷贝函数传参
c# 通用类型系统及变量在深拷贝浅拷贝函数传参中的深层次的表现在编程中遇到了一些想不到的异常,跟踪发现,自己对于c#变量在内存上的表现理解有偏差,系统的学习并通过代码实验梳理了各种情况下, ...
函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
x64汇编第三讲,64位调用约定与函数传参.
目录 x64汇编第三讲,64位调用约定与函数传参. 一丶复习X86传参二丶x64汇编 2.1汇编详解 x64汇编第三讲,64位调用约定与函数传参. 一丶复习X86传参在x86下我们汇编的传参如下: ...
VC与JavaScript交互(三) --- CWebPage类调用javascript函数(给js函数传参，并取得返回值)
①需要一个别人写好的类CWebPage,将其对于的两个文件WebPage.h和WebPage.cpp添加到工程中. ②添加WebBrowser控件,在视图/对话框类的头文件中#include &quo ...
VC/MFC中通过CWebPage类调用javascript函数(给js函数传参，并取得返回值)
转自:http://www.cnblogs.com/javaexam2/archive/2012/07/14/2632959.html ①需要一个别人写好的类CWebPage,将其对于的两个文件Web ...
JavaScript函数传参
函数传参一: <html> <head> <meta charset="utf-8"> <title>无标题文档</title ...
js函数传参
函数传参:重用代码,首先保持html代码相对一致,把核心主程序用函数包起来,把每组不同的值找出来,通过传参的方式减少代码的使用下面代码是我早期练习的,大家随便看看就好 <!DOCTYPE ht ...
JS之arguments属性解读函数传参？
Arguments 该对象代表正在执行的函数和调用他的函数的参数. arguments属性:为当前执行中的 Function 对象返回 arguments 对象和参数. [function.] ...

随机推荐

「软件测试实战教程系列（三）」弃繁就简，接口测试神器Postman｜收藏版
软件测试实战教程系列(三)弃繁就简,接口测试神器Postman|收藏版 Postman主要帮我们干了三件事: 1.把相关集合放到一个集合当中方便管理. 2.对指定接口发送请求. 3.断言下面我们使用 ...
java的加载与执行原理详解
java程序从开发到最终运行经历了什么? (31) 编译期: 第一步:在硬盘某个位置(随意),新建一个xxx.java文件第二步:使用记事本或者其他文本编辑器例如EditPlus打开xxx.java ...
【Spring】IoC容器 - Spring Bean作用域Scope（含SpringCloud中的RefreshScope ）
前言上一章学习了[依赖来源],本章主要讨论SpringBean的作用域,我们这里讨论的Bean的作用域,很大程度都是默认只讨论依赖来源为[Spring BeanDefinition]的作用域,因为在 ...
网络通信IO的演变过程（二）（一个门外汉的理解）
2.NIO 当与别人谈论NIO时,一定要弄清楚别人说的NIO是指哪个含义? NIO有2种含义: 1.NonBlocking IO,基于操作系统谈 2.Java New IO,基于Java谈我们这里主 ...
vue3.x相对于vue2.x生命周期改动
vue3.x已经正式发布了,部分小伙伴已经用了vue3.x开发,部分小伙伴还在观望中,下面是两个影响比较大的改动 1.beforeDestroy和destroyed不能用了. 这个应该是vue2.x项 ...
Codeforces1575D
思路分析此题采用dfs,注意X选中了之后所有的X值相同,所以需要一个flag来存储X的值. 注意前导0要单独讨论,然后就是当'X'或者'_'在第一位时不能选0,其它位可以选0 - 9 任意一个数. ...
mysql all_ip_test局域网IP测试工具,有需要的改一改.
1 import threading 2 import subprocess 3 import pymysql 4 # threading.Lock() 5 6 7 class Link(object ...
OO第四单元作业总结及课程总结
一.本单元作业架构设计 1.第一次作业本单元首次接触到UML以及相关概念,在面对第一次作业时首先花了很大功夫去阅读官方接口中各种UmlElement的代码,才理解了输入的模型元素中各属性的含义.总的 ...
[CSP-S2021] 回文
链接: P7915 题意: 给出一个长度为 \(2n\) 的序列 \(a\),其中 \(1\sim n\) 每个数出现了 2 次.有 L,R 两种操作分别是将 \(a\) 的开头或末尾元素加入到初始为 ...
greenplum分布键的hash值计算分析
greenplum 数据分布策略 greenplum 是一个 MPP 架构的数据库,由一个 master 和多个 segment 组成(还可选配置一个 standby master),其数据会根据设置 ...

javascript-初级-day05js函数传参

javascript-初级-day05js函数传参的更多相关文章

随机推荐

热门专题