前端技术分享-码匠 极客编程技术分享

您当前位于：原生JS实战开发 ——> 函数封装、简单计算器交互、点击按钮实现求和
上一篇：如何让网页文章中的代码可以点击运行 下一篇：没有了

函数封装、简单计算器交互、点击按钮实现求和

2016/07/17 16:23:57 | 作者：HTML5学堂（码匠） | 分类：原生JS实战开发 | 关键词：函数封装,计算,页面交互,求和,JS

HTML5学堂：在项目开发中会遇到各种各样的页面交互效果，那我们如何去实现一个页面交互效果？在实现页面交互效果的时候，会根据效果的实现思路来进行分析和实现，这也是我们文章中的一个重点。下面的文章内容主要是根据效果实现思路来分析点击按钮实现求和功能。

本文内容概要

1 点击按钮实现求和的效果图

2 实现页面交互效果的思路

3 用自己的语言进行功能的描述

4 仔细查看功能，并根据基本功能构建结构样式

5 细化功能描述并转换为JS语言或命令

6 JS具体编码以及代码优化，回顾成品代码

7 课程小结

8 课后作业

1 点击按钮实现求和的效果图

JavaScript简单页面交互实战 - HTML5学堂

2 实现页面交互效果的思路

——>用自己的语言进行功能的描述

——>仔细查看功能，并根据基本功能构建结构样式

——>细化功能描述并转换为JS语言或命令

——>JS具体编码以及代码优化，回顾成品代码

Tips：对于初学者来说，小编建议根据上面的实现思路来分析和实现页面交互效果。

3 第一步：用自己的语言进行功能的描述

我们需要用自己的语言进行详细的功能描述，因为后面需要根据功能的描述来搭建结构与样式，它会直接影响后期JS交互效果的实现。

具体的功能描述如下：

用鼠标点击“按钮”时，将两个文本框中输入的数字进行加和运算，并将加和的结果显示在“求和结果”的后面。

4 第二步：仔细查看功能，并根据基本功能构建结构样式

标签选择分析：

1 在功能描述中“将两个文本框中输入的数字进行加和运算”，可以让用户提交数据的标签也只能是表单元素，在这边明显是input元素；

2 为了优化input元素的用户体验，使用label元素来扩大聚焦的点击区域，也就是说点击label元素光标会自动聚焦到input元素里面；

3 在功能描述中“用鼠标点击‘按钮’时”，按钮我们是使用了input类型的按钮（也可以使用其它按钮）；

4 在功能描述中“加和的结果显示在‘求和结果’的后面”，为了后期JS方便的操作，最终的求和结果显示在em标签里面；

根据功能描述搭建的结构与样式

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>HTML5Course - 梦幻雪冰 | 陈能堡</title>
  6.     <link rel="stylesheet" type="text/css" href="css/reset.css" />
  7.     <style type="text/css">
  8.         .wrap div {
  9.             margin-bottom: 5px;
  10.         }
  11.         .wrap input[type=button] {
  12.             width: 80px;
  13.             height: 26px;
  14.         }
  15.         .show-result {
  16.             line-height: 26px;
  17.             font-size: 20px;
  18.             font-weight: bold;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="wrap">
  24.         <form action="">
  25.             <div>
  26.                 <label for="firstNum">第一个值：</label><input type="text" id="firstNum"/>
  27.             </div>
  28.             <div>
  29.                 <label for="secondNum">第二个值：</label><input type="text" id="secondNum"/>
  30.             </div>
  31.             <div>
  32.                 <input type="button" value="点击求和" id="sumBtn"/>
  33.             </div>
  34.             <div  class="show-result">求和的结果：<em id="resulut">200</em></div>
  35.         </form>
  36.     </div>
  37. </body>
  38. </html>

5 第三步：细化功能描述并转换为JS语言或命令

用鼠标点击“按钮”

网页中存在着各种标签，需要利用document.getElementById(id)方法获取“按钮”元素，才能针对“按钮”元素进行相应的操作；

鼠标点击“按钮”，需要为“按钮”元素绑定点击事件，可以用eleObj.onclick = function(){}；来绑定点击事件；

获取到两个文本框中输入的内容

网页中存在着各种标签，需要利用document.getElementById(id)方法获取“文本框”元素，才能针对“文本框”元素进行相应的操作；

前面我们学过了用innerHTML的属性来获取标签的内容，但是对于表单元素来说，获取表单的内容需要使用value的属性，如：eleObj.value；

实例：

  1. <form action="">
  2.     <label for="ipt">请输入值：</label><input type="text" id="ipt"/>
  3.     <input type="button" value="点击按钮" id="btn"/>
  4. </form>
  5. <script type="text/javascript">
  6.     var iptObj = document.getElementById('ipt'),
  7.         btnObj = document.getElementById('btn');
  8.  
  9.     btnObj.onclick = function() {
  10.         console.log('用value属性获取=' + iptObj.value);
  11.         console.log(typeof iptObj.value);
  12.         console.log('用innerHTML属性获取=' + iptObj.innerHTML);
  13.     }
  14. </script>

结果：

代码分析：

1 表单元素使用value属性可以获取到表单的内容，使用innerHTML属性获取不到表单的内容；

2 通过value属性获取到的表单内容是属于字符串类型；

对两个文本框中内容进行加和运算

现在已经知道通过value属性获取到的内容是字符串类型，然后再对内容进行加法操作，结果会如何？具体看下面的例子。

实例：

  1. <script type="text/javascript">
  2.      // 实例中的命名只是为了大家方便理解，请勿模仿
  3.     var num1 = '13';
  4.     var num2 = 14;
  5.  
  6.     console.log(num1 + num2);
  7.  
  8.     var num3 = '5';
  9.     var num4 = '20';
  10.  
  11.     console.log(num3 + num4);
  12. </script>

结果：1314 520

代码分析：

1 只要“+”操作符的任意一侧出现字符串，它就从加法运算的功能变成连字符的功能；

2 为了保证“+”不受字符串的影响，可以通过parseInt()方法把字符串的内容转成数字，这样就能正常的加法运算；

将加和结果显示在“求和结果”后面

对于获取/设置非表单元素的内容，我们可以通过eleObj.innerHTML来进行操作；

6 第四步：JS具体编码以及代码优化，回顾成品代码

成品代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>HTML5Course - 独行冰海 | 刘国利</title>
  6.     <link rel="stylesheet" type="text/css" href="css/reset.css" />
  7.     <style type="text/css">
  8.         .wrap div {
  9.             margin-bottom: 5px;
  10.         }
  11.         .wrap input[type=button] {
  12.             width: 80px;
  13.             height: 26px;
  14.         }
  15.         .show-result {
  16.             line-height: 26px;
  17.             font-size: 20px;
  18.             font-weight: bold;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="wrap">
  24.         <form action="">
  25.             <div>
  26.                 <label for="firstNum">第一个值：</label><input type="text" id="firstNum"/>
  27.             </div>
  28.             <div>
  29.                 <label for="secondNum">第二个值：</label><input type="text" id="secondNum"/>
  30.             </div>
  31.             <div>
  32.                 <input type="button" value="点击求和" id="sumBtn"/>
  33.             </div>
  34.             <div class="show-result">求和的结果：<em id="resulut"></em></div>
  35.         </form>
  36.     </div>
  37.     <script type="text/javascript">
  38.         // 获取标签
  39.         var firstEle = document.getElementById('firstNum'),
  40.             secondEle = document.getElementById('secondNum'),
  41.             btnEle = document.getElementById('sumBtn'),
  42.             resultEle = document.getElementById('resulut');
  43.  
  44.         // 按钮绑定点击事件
  45.         btnEle.onclick = function() {
  46.             // 操作标签的内容
  47.             // 利用parseInt()方法把字符串转成数字，保证能正常的加法运算
  48.             resultEle.innerHTML = parseInt(firstEle.value) + parseInt(secondEle.value);            
  49.         }
  50.     </script>
  51. </body>
  52. </html>

效果：

到目前为止，我们已经完成了点击按钮实现求和功能。但是，我们能否继续优化里面的代码？我们来想一个问题，假如页面中出现了多个点击按钮实现求和功能，你是把代码复制黏贴一遍还是进行代码的封装？我想你应该知道怎么做了吧~

优化代码

  1. <script type="text/javascript">
  2.     // 获取标签
  3.     var firstEle = document.getElementById('firstNum'),
  4.         secondEle = document.getElementById('secondNum'),
  5.         btnEle = document.getElementById('sumBtn'),
  6.         resultEle = document.getElementById('resulut');
  7.  
  8.     // 按钮绑定点击事件
  9.     btnEle.onclick = function() {
  10.         // 显示求和的结果
  11.         resultEle.innerHTML = sum(firstEle.value, secondEle.value);    
  12.     }
  13.  
  14.     /*
  15.      * [sum 实现两数求和的功能]
  16.      * @param  {[数字 | 字符串]} firstNum  [第一个数]
  17.      * @param  {[数字 | 字符串]} secondNum [第二个数]
  18.      * @return {[数字]}     [返回值]
  19.      * @author 陈能堡
  20.      */
  21.     function sum(firstNum, secondNum) {
  22.         // 利用parseInt()方法把字符串转成数字，保证能正常的加法运算
  23.         return parseInt(firstNum) + parseInt(secondNum);
  24.     }
  25. </script>

代码分析：封装好的sum功能函数在其它地方当中也能正常使用，这样可以减少代码冗余，提升代码的可读性和复用性；

Tips：代码优化是贯穿于整个过程，而不是到最后才进行代码的优化；

7 课程小结

掌握作用域能够避免一些因变量造成的问题，才能更灵活的去操作变量或函数；另外，掌握作用域可以帮助你更好的去理解后面要学的闭包；

掌握页面交互效果的实现思路（分析方法），能够更清楚的去分析和实现页面交互效果。

8 课后作业

欢迎沟通交流~HTML5学堂

HTML5学堂微信~欢迎扫码关注

HTML5学堂微信

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇：如何让网页文章中的代码可以点击运行 下一篇：没有了