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.] ...
随机推荐
- SpringBoot入门02-配置类
引入 Spring Boot的底层已经有了Spring MVC Spring Boot习惯优先的思想,很多配置都是可省的 不需要配置web.xml文件 不需要服务层的xml配置 不需要dao层的xml ...
- pycharm中设置自己的文件模板
File>>Settings>>Editor>>File and Code Templates 选择文件类型Python Scripts,输入文件模板类型 #!/u ...
- Go语言核心36讲（Go语言基础知识六）--学习笔记
06 | 程序实体的那些事儿 (下) 在上一篇文章,我们一直都在围绕着可重名变量,也就是不同代码块中的重名变量,进行了讨论.还记得吗? 最后我强调,如果可重名变量的类型不同,那么就需要引起我们的特别关 ...
- 从C过渡到C++需要了解的“新特性”
第一个C++程序 #include <iostream> using namespace std; //编译指令 int main() { cout << "Hell ...
- 浅尝装饰器和AOP
[写在前面] 参考文章:https://www.cnblogs.com/huxi/archive/2011/03/01/1967600.html[从简单的例子入手进行讲解,由浅入深,很到位] 装饰器部 ...
- 【数学】快速傅里叶变换（FFT）
快速傅里叶变换(FFT) FFT 是之前学的,现在过了比较久的时间,终于打算在回顾的时候系统地整理一篇笔记,有写错的部分请指出来啊 qwq. 卷积 卷积.旋积或褶积(英语:Convolution)是通 ...
- python收集参数与解包
收集任意数量的实参 def make_pizza(*toppings): """打印顾客点的所有配料""" print(toppings) ...
- 平分的直线 牛客网 程序员面试金典 C++ Python
平分的直线 牛客网 程序员面试金典 C++ Python 题目描述 在二维平面上,有两个正方形,请找出一条直线,能够将这两个正方形对半分.假定正方形的上下两条边与x轴平行. 给定两个vecotrA和B ...
- hdu 2199 Can you solve this equation?（二分法求多项式解）
题意 给Y值,找到多项式 8*x^4 + 7*x^3 + 2*x^2 + 3*x + 6 == Y 在0到100之间的解. 思路 从0到100,多项式是单调的,故用二分法求解. 代码 double c ...
- 应对gitee容量超限. 保留star/fork/评论
应对gitee容量超限 进入企业版,"管理"-"仓库管理",点"清空仓库". 在E:\gitee目录上右击,"git bash h ...