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.] ...
随机推荐
- NOI2018屠龙勇士（扩展CRT + splay(multiset)）
QWQ 一到假期就颓废 哎 今年新鲜出炉的NOI题,QwQ同步赛的时候写的,后来交了一发洛谷,竟然过了 首先 根据题目,我们很容易得到,假设对应每一条龙的剑的攻击力是\(atk\)的话 \[a_i-x ...
- 极速上手 VUE 3 —— teleport传送门组件
一.teleport 介绍 teleport 传送门组件,提供一种简洁的方式,可以指定它里面的内容的父元素.通俗易懂地讲,就是 teleport 中的内容允许我们控制在任意的DOM中,使用简单. 使用 ...
- python2和python3并存下的pip使用
py -2 -m pip install *.whl py -3 -m pip intall *.wl
- 关于麦克风的参数介绍 - 驻极体麦克风（ECM）和硅麦（MEMS）
1.麦克风的分类1.1.动圈式麦克风(Dynamic Micphone)原理:基本构造包含线圈.振膜.永久磁铁三部分.当声波进入麦克风,振膜受到声波的压力而产生振动,与振膜在一起的线圈则开始在磁场中移 ...
- JVM：Java内存区域与内存溢出异常
Java 虚拟机在执行 Java 程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁时间,有些区域随着虚拟机进程的启动而存在,有些区域依赖用户线程的启动和 ...
- 【JavaScript基础】Js的定时器（你想看的原理也在哟）
[JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...
- python文件读写及修改
转载:https://www.cnblogs.com/zhxwind/p/8761618.html 文件的读写有三种形式:读.写和追加. 一.读模式 r 和读写模式 r+ 1.读模式 r 读模式r特点 ...
- 通用 Makefile（及makefile中的notdir,wildcard和patsubst）
notdir,wildcard和patsubst是makefile中几个有用的函数,以前没留意过makefile中函数的用法,今天稍微看看~ 1.makefile里的函数 makefile里的函数使用 ...
- 超过1W字深度剖析JVM常量池（全网最详细最有深度）
面试题:String a = "ab"; String b = "a" + "b"; a == b 是否相等 面试考察点 考察目的: 考察对 ...
- 【java+selenium3】多窗口window切换及句柄handle获取(四)
一 .页面准备 1.html <html> <head> <title>主页面 1</title> </head> <body> ...