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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6.  
  7. <script>
  8. /*
  9.     函数传递参数
  10.     参数=JS的数据类型：
  11.         数字、字符串、布尔、函数、对象、未定义
  12. */
  13.  
  14. fn1(100, 'px');
  15. function fn1(a, b){
  16.     // alert( a+b );
  17. }
  18.  
  19. fn2('miaov');
  20. fn2('妙味课堂');
  21. function fn2(a){
  22.     // alert(a.charAt(2));
  23. }
  24.  
  25. function fn4(){
  26.     alert(4);
  27. }
  28. // fn3( fn4 );
  29. // fn3( function ( a ){ alert(a); } );
  30. function fn3( fn ){
  31.     // fn(100);
  32.     fn();
  33. }
  34.  
  35. fn5( window, document );
  36. function fn5( w, d ){
  37.     w.onload = function (){
  38.         d.body.innerHTML = 123;
  39.     };
  40. }
  41.  
  42. </script>
  43.  
  44. </head>
  45.  
  46. <body>
  47. </body>
  48. </html>

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6.  
  7. <script>
  8.  
  9. fn1(100);
  10. fn1('miaov');
  11. fn1(function (){ alert(1); });
  12.  
  13. function fn1(a){
  14.     if( typeof a === 'number' && a === a ){
  15.         alert( a+20 );
  16.     } else if ( typeof a === 'string' ) {
  17.         alert( a.charAt(2) );
  18.     } else if ( typeof a === 'function' ) {
  19.         a();
  20.     }
  21. }
  22.  
  23. </script>
  24.  
  25. </head>
  26.  
  27. <body>
  28. </body>
  29. </html>

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. ul { padding:0; margin:0; }
  8. li { list-style:none; }
  9. body { background:#333; }
  10. .box { width:400px; height:500px; position:relative; background:url(img/loader_ico.gif) no-repeat center #fff; float:left; margin-right:60px; }
  11. .box img { width:400px; height:500px; }
  12. .box ul { width:40px; position:absolute; top:0; right:-50px; }
  13. .box li { width:40px; height:40px; margin-bottom:4px; background:#666; }
  14. .box .active { background:#FC3; }
  15. .box span { top:0; }
  16. .box p { bottom:0; margin:0; }
  17. .box p,.box span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
  18. </style>
  19. <script>
  20.  
  21. /*
  22.     重用代码：
  23.         1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
  24.         2、把核心主程序实现，用函数包起来
  25.         3、把每组里不同的值找出来，通过传参实现
  26. */
  27.  
  28. window.onload = function (){
  29.     fnTab( 'pic1', [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ], [ '小宠物', '图片二', '图片三', '面具' ], 'onclick' );
  30.     fnTab( 'pic2', [ 'img/2.png', 'img/3.png', 'img/4.png' ], [ '图片二', '图片三', '面具' ], 'onmouseover' );
  31. };
  32.  
  33. function fnTab( id, arrUrl, arrText, evt ){
  34.     var oDiv = document.getElementById(id);
  35.     var oImg = oDiv.getElementsByTagName('img')[0];
  36.     var oSpan = oDiv.getElementsByTagName('span')[0];
  37.     var oP = oDiv.getElementsByTagName('p')[0];
  38.     var oUl = oDiv.getElementsByTagName('ul')[0];
  39.     var aLi = oUl.getElementsByTagName('li');
  40.     var num = 0;
  41.  
  42.     for( var i=0; i<arrUrl.length; i++ ){
  43.         oUl.innerHTML += '<li></li>';
  44.     }
  45.  
  46.     // 初始化
  47.     function fnTab(){
  48.         oImg.src = arrUrl[num];
  49.         oSpan.innerHTML = 1+num+' / '+arrUrl.length;
  50.         oP.innerHTML = arrText[num];
  51.         for( var i=0; i<aLi.length; i++ ){
  52.             aLi[i].className = '';
  53.         }
  54.         aLi[num].className = 'active';
  55.     }
  56.     fnTab();
  57.  
  58.     for( var i=0; i<aLi.length; i++ ){
  59.         aLi[i].index = i;            // 索引值
  60.         aLi[i][evt] = function (){
  61.             num = this.index;
  62.             fnTab();
  63.         };
  64.     }
  65. }
  66. </script>
  67. </head>
  68.  
  69. <body>
  70.  
  71. <div id="pic1" class="box">
  72.     <img src="" />
  73.   <span>数量正在加载中……</span>
  74.   <p>文字说明正在加载中……</p>
  75.   <ul></ul>
  76. </div>
  77.  
  78. <div id="pic2" class="box">
  79.     <img src="" />
  80.   <span>数量正在加载中……</span>
  81.   <p>文字说明正在加载中……</p>
  82.   <ul></ul>
  83. </div>
  84.  
  85. </body>
  86. </html>

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

JS基础-04 计算价格：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. /*
  8.     重用代码：
  9.         1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
  10.         2、把核心主程序实现，用函数包起来
  11.         3、把每组里不同的值找出来，通过传参实现
  12. */
  13. window.onload = function (){
  14.     var oUl = document.getElementById('list');
  15.     //获取一组li值
  16.     var aLi = oUl.getElementsByTagName('li');
  17.     //一组li的值进行遍历
  18.     for( var i=0; i<aLi.length; i++ ){
  19.         fn1(aLi[i]);
  20.     }
  21.  
  22.     function fn1(oLi){
  23.  
  24.         var aBtn = oLi.getElementsByTagName('input');
  25.         var oStrong = oLi.getElementsByTagName('strong')[0];
  26.         var oEm = oLi.getElementsByTagName('em')[0];
  27.         var oSpan = oLi.getElementsByTagName('span')[0];
  28.         var n1 = Number(oStrong.innerHTML);            // '0'        =>   0
  29.         var n2 = parseFloat(oEm.innerHTML);                // '12.5元' => 12.5
  30.         //点击事件
  31.  
  32.         aBtn[0].onclick = function (){
  33.             n1 --;
  34.             if ( n1 < 0 ) {
  35.                 n1 = 0;
  36.             }
  37.             oStrong.innerHTML = n1;
  38.             oSpan.innerHTML = n1*n2 + '元';
  39.             p.n1+= parseFloat(oSpan.innerHTML);
  40.  
  41.         };
  42.         aBtn[1].onclick = function (){
  43.             n1 ++;
  44.             oStrong.innerHTML = n1;
  45.             oSpan.innerHTML = n1*n2 + '元';
  46.  
  47.         };
  48.     }
  49. };
  50.  
  51. </script>
  52. </head>
  53.  
  54. <body>
  55.  
  56. <ul id="list">
  57.     <li>
  58.       <input type="button" value="-" />
  59.     <strong>0</strong>
  60.       <input type="button" value="+" />
  61.     单价：<em>12.5元</em>
  62.     小计：<span>0元</span>
  63.   </li>
  64.     <li>
  65.       <input type="button" value="-" />
  66.     <strong>0</strong>
  67.       <input type="button" value="+" />
  68.     单价：<em>10.5元</em>
  69.     小计：<span>0元</span>
  70.   </li>
  71.     <li>
  72.       <input type="button" value="-" />
  73.     <strong>0</strong>
  74.       <input type="button" value="+" />
  75.     单价：<em>8.5元</em>
  76.     小计：<span>0元</span>
  77.   </li>
  78.     <li>
  79.       <input type="button" value="-" />
  80.     <strong>0</strong>
  81.       <input type="button" value="+" />
  82.     单价：<em>8元</em>
  83.     小计：<span>0元</span>
  84.   </li>
  85.     <li>
  86.       <input type="button" value="-" />
  87.     <strong>0</strong>
  88.       <input type="button" value="+" />
  89.     单价：<em>14.5元</em>
  90.     小计：<span>0元</span>
  91.   </li>
  92. </ul>
  93.  
  94. </body>
  95. </html>

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

  1. 【JS学习笔记】函数传参

    比如仅仅改变背景的颜色 函数传参:参数就是占位符. 那么在什么时候用传参呢?函数里定不下来的东西. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  2. c# 内存的具体表现- 通用类型系统 深拷贝 浅拷贝 函数传参

    c# 通用类型系统 及变量在 深拷贝 浅拷贝 函数传参 中的深层次的表现 在编程中遇到了一些想不到的异常,跟踪发现,自己对于c#变量在内存上的表现理解有偏差,系统的学习并通过代码实验梳理了各种情况下, ...

  3. 函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. x64汇编第三讲,64位调用约定与函数传参.

    目录 x64汇编第三讲,64位调用约定与函数传参. 一丶复习X86传参 二丶x64汇编 2.1汇编详解 x64汇编第三讲,64位调用约定与函数传参. 一丶复习X86传参 在x86下我们汇编的传参如下: ...

  5. VC与JavaScript交互(三) --- CWebPage类调用javascript函数(给js函数传参，并取得返回值)

    ①需要一个别人写好的类CWebPage,将其对于的两个文件WebPage.h和WebPage.cpp添加到工程中. ②添加WebBrowser控件,在视图/对话框类的头文件中#include &quo ...

  6. VC/MFC中通过CWebPage类调用javascript函数(给js函数传参，并取得返回值)

    转自:http://www.cnblogs.com/javaexam2/archive/2012/07/14/2632959.html ①需要一个别人写好的类CWebPage,将其对于的两个文件Web ...

  7. JavaScript函数传参

    函数传参一: <html> <head> <meta charset="utf-8"> <title>无标题文档</title ...

  8. js函数传参

    函数传参:重用代码,首先保持html代码相对一致,把核心主程序用函数包起来,把每组不同的值找出来,通过传参的方式减少代码的使用 下面代码是我早期练习的,大家随便看看就好 <!DOCTYPE ht ...

  9. JS之arguments属性解读函数传参？

    Arguments 该对象代表正在执行的函数 和 调用他的函数的参数. arguments属性:为当前执行中的 Function 对象返回 arguments 对象 和 参数. [function.] ...

随机推荐

  1. 题解 「JOISC 2016 Day 3」电报

    题目传送门 题目大意 给出一个\(n\)个点\(n\)条边的图,每个点有且仅有一个出边,改变每条边都会有对应的花费.求最小的花费使得整个图强连通. 思路 很显然,最后的图就是一个环.那我们要求的答案实 ...

  2. docsify + Gitee Pages服务搭建开源项目网站

    前言 base-admin从开源至今,已经收获了2k Stat,而我们一直都没有一份像样的在线文档,最近写了一个博客园随笔备份Java脚本,将博客随笔备份到本地,格式是md文档格式,就有意去找将md文 ...

  3. C++编译Dlib库出现LNK2001错误（原因是在Python中安装过Dlib）

    问题 使用CMake编译Dlib库,编译得到lib文件后,新建一个VS工程想使用Dlib,却出现LNK2001:无法解析的外部符号的错误,且都与JPEG和PNG相关: 1>dlib19.17.9 ...

  4. py3.8安装

    ubantu python3.8# 命令下载wget https://www.python.org/ftp/python/3.8.1/Python-3.8.1.tar.xz#解压tar -xvJf P ...

  5. 解决git clone慢问题

    解决git clone慢 关于Git克隆或是上传代码龟速的问题真是让人很恼火,这里对于网上的两种解决方案进行摘录. 利用码云克隆github项目 亲测有效 进入码云,新建一个仓库: 在创建的最后选择导 ...

  6. Alpha发布声明

    项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 Alpha-发布声明 我们是谁 删库跑路对不队 我们在做什么 题士 进度如何 进度总览 一.功能与特性 1. ...

  7. Beta阶段第七次会议

    Beta阶段第七次会议 时间:2020.5.23 完成工作 姓名 工作 难度 完成度 ltx 1.修改小程序页面无法加载bug2.修改条件语句,使得页面能够正常显示 中 90% xyq 1.根据api ...

  8. 数位dp & 热身训练7

    数位dp 数位dp是一种计数用的dp,一般就是要统计一段区间$[L,R]$内,满足一定条件的数的个数,或者各个数位的个数. 数位dp使得暴力枚举变为满足一定状态的记忆化,更加优秀. 数位dp常常会考虑 ...

  9. 计算机中的contex理解

    原文链接  https://www.xuebuyuan.com/2016635.html 1.其实简单的说就是跟当前主题有关的所有内容. 2.如说到程序的上下文,就是当前这段程序之上和之下的程序段.因 ...

  10. Python reload(sys) NameError: name 'reload' is not defined

    转载:Python reload(sys) NameError: name 'reload' is not defined - vercont - 博客园 (cnblogs.com) 对于 Pytho ...