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.] ...
随机推荐
- 微信小程序_快速入门02
01我们学习了环境的准备和简单的demo,现在是时候来学习简单的页面编写了,首先我们来学习一些常用的基础标签: 一.view盒子,就是类似于div的盒子,可以用来存其他元素的容器. 二.text 文本 ...
- appium操作安卓应用所需要的数据准备
操作系统.系统版本如下所示: desired_caps={} desired_caps["platformName"]="Android" desired_ca ...
- Java 创建PDF打印小册子
概述 PDF打印小册子是指将PDF格式文档在打印成刊物前需要提前进行的页面排版,以便在打印后装订成册.下面以Java代码展示如何来实现.这里调用Free Spire.PDF for Java中的Pdf ...
- 一文了解MySQL性能测试及调优中的死锁处理方法，你还看不明白？
一文了解MySQL性能测试及调优中的死锁处理方法,你还看不明白? 以下从死锁检测.死锁避免.死锁解决3个方面来探讨如何对MySQL死锁问题进行性能调优. 死锁检测 通过SQL语句查询锁表相关信息: ( ...
- Java 读取PDF中的表格
一.概述 本文以Java示例展示读取PDF中的表格的方法.这里导入Spire.PDF for Javah中的jar包,并使用其提供的相关及方法来实现获取表格中的文本内容.下表中整理了本次代码使用到的主 ...
- 【UE4】Windows 的几种打包方式
简述 自动化工具(Unreal Automation Tool,简称 UAT) 自动化工具使用特定的命令 BuildCookRun 封装流程包含 构建(Build):该阶段将为所选择的平台编译可执行文 ...
- Java：创建对象小记
Java:创建对象小记 对 Java 中的创建对象的内容,做一个微不足道的小小小小记 创建对象的方式概述 使用 new 关键字:Person person = new Person(); 反射创建:使 ...
- 微信小程序的发布流程
一.背景 在中大型的公司里,人员的分工非常仔细,一般会有不同岗位角色的员工同时参与同一个小程序项目.为此,小程序平台设计了不同的权限管理使得项目管理者可以更加高效管理整个团队的协同工作 以往我们在开发 ...
- STM32直流电机启动(一)驱动电路的介绍
驱动电路 典型的H桥驱动电路如下:要使电机旋转只需导通对角线上的两个三极管即可,如导通Q1,Q4,关闭Q2,Q4即可驱动电机正转:若想电机反向转动,即导通三极管Q2,Q3,关闭Q1,Q4.此时电路图可 ...
- sum-root-to-leaf-numbers leetcode C++
Given a binary tree containing digits from0-9only, each root-to-leaf path could represent a number. ...