gongchengketang
  • Kvera 发布于2016年08月14日 20:47
    【作业】JS-作业2-Kvera
    一开始觉得这个作业挺容易的,但还是花了挺多时间,因为一直忽略输入的是字符串,作比较时把输入值当做数字处理,结果总是不对。
    后来,利用console.log(‘i=%d’,i)这样的格式化输出查看每一步结果(PS:有什么好的JS调试器推荐吗?可以单步调试查看结果,
    因为一行一行加console.log()单步查看真的好鸡肋T_T……),发现输出了NaN,恍然大悟,将字符串转换为数字类型后,结果正确。
    最终,用了两种思路完成:
    1)先从小到大排序,再查找排在倒数第二位置的数字,即所有数字中第二大的数字,代码如下:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.         <title>JS作业2</title>
    5.         <meta http-equiv="content-type" content="text/html;charset=utf-8">
    6.         <style type="text/css">
    7.                 form {
    8.                         font-size: 14px;
    9.                         line-height: 1.5em;
    10.                         width: 425px;
    11.                         margin: 10px auto;
    12.                         margin-top: 200px;
    13.                         padding: 20px;
    14.                         background-color: #ddd;
    15.                         border-radius: 10px;
    16.                 }
    17.                 span { font-weight: bold; }
    18.                 button {
    19.                         width: 80px;
    20.                         margin-top: 6px;
    21.                 }
    22.         </style>
    23. </head>
    24. <body>
    25.         <form>
    26.                 <table>
    27.                         <tr>
    28.                                 <td>请输入一串数字(以英文逗号隔开):</td>
    29.                                 <td><input id="input" type="text" name="number" placeholder="请输入数字"></td>
    30.                         <tr>
    31.                                 <td></td>
    32.                                 <td><button type="button" onclick="search();">查找</button></td>
    33.                         </tr>
    34.                         </tr>
    35.                                 <td>输入数字中第二大的是:</td>
    36.                                 <td><span id="result_num"></span></td>
    37.                         </tr>
    38.                 </table>
    39.         </form>       

    40.         <script type="text/javascript">
    41.                 function search(){
    42.                         var input = document.getElementById('input').value;
    43.                         var number = input.split(',');
    44.                         for( var i = 0; i < number.length; i++ )    // 将单个数字字符转化为数字
    45.                         {
    46.                                 number[i] = parseInt(number[i]);
    47.                         }
    48.                         var length = number.length;
    49.                         for( var j = 0; j < length-1; j++ )         //冒泡排序
    50.                         {       
    51.                                 for( var k = 0; k < length-1-j; k++ )
    52.                                 {
    53.                                         if( number[k] > number[k+1] )
    54.                                         {
    55.                                                 var x = number[k];
    56.                                                 number[k] = number[k+1];
    57.                                                 number[k+1] = x;
    58.                                         }
    59.                                 }
    60.                         }
    61.                         var result_num = document.getElementById('result_num');
    62.                         result_num.innerHTML = number[length-2];    //排序数组的倒数第二个值就是第二大数字
    63.                 }
    64.                
    65.         </script>
    66. </body>
    67. </html>
    复制代码
    2)逐个比较,找出第二大值,代码如下:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.         <title>JS作业2</title>
    5.         <meta http-equiv="content-type" content="text/html;charset=utf-8">
    6.         <style type="text/css">
    7.                 form {
    8.                         font-size: 14px;
    9.                         line-height: 1.5em;
    10.                         width: 425px;
    11.                         margin: 10px auto;
    12.                         margin-top: 200px;
    13.                         padding: 20px;
    14.                         background-color: #ddd;
    15.                         border-radius: 10px;
    16.                 }
    17.                 span { font-weight: bold; }
    18.                 button {
    19.                         width: 80px;
    20.                         margin-top: 6px;
    21.                 }
    22.         </style>
    23. </head>
    24. <body>
    25.         <form>
    26.                 <table>
    27.                         <tr>
    28.                                 <td>请输入一串数字(以英文逗号隔开):</td>
    29.                                 <td><input id="input" type="text" name="number" placeholder="请输入数字"></td>
    30.                         <tr>
    31.                                 <td></td>
    32.                                 <td><button type="button" onclick="search();">查找</button></td>
    33.                         </tr>
    34.                         </tr>
    35.                                 <td>输入数字中第二大的是:</td>
    36.                                 <td><span id="result_num"></span></td>
    37.                         </tr>
    38.                 </table>
    39.         </form>       

    40.         <script type="text/javascript">
    41.                 function search(){
    42.                         var input = document.getElementById('input').value;
    43.                         var number = input.split(',');
    44.                         for(var i = 0;i < number.length;i++)    // 将单个数字字符转化为数字
    45.                         {
    46.                                 number[i] = parseInt(number[i]);
    47.                         }
    48.                         var first_max = number[0];              //最大值
    49.                         var second_max = number[1];             //第二大值
    50.                         if( first_max < second_max )            //正确排序最大值和第二大值
    51.                                 {
    52.                                         var x;
    53.                                         x = first_max;
    54.                                         first_max = second_max;
    55.                                         second_max = x;
    56.                                 }
    57.                         for(var j = 2;j < number.length;j++)    //for循环从j=2开始
    58.                         {
    59.                                 if( number[j] > first_max )         //更新最大值和第二大值
    60.                                         {
    61.                                                         second_max = first_max;
    62.                                                         first_max = number[j];
    63.                                         }
    64.                                 else if (number[j] > second_max)    //更新第二大值
    65.                                 {
    66.                                          second_max = number[j];
    67.                                 }       
    68.                         }
    69.                         var result_num = document.getElementById('result_num');
    70.                         result_num.innerHTML = second_max;
    71.                 }
    72.                
    73.         </script>
    74. </body>
    75. </html>
    复制代码



    2个回答
  • 牛小k 发表于2016-08-15 14:54
    作业完成的很好,用两种方式实现,用到了冒泡排序

    这个作业相对简单,但是遇到字符串忘记转换的问题,所以在现实开发中,如果需要对数字计算,使用parseInt或者praseFloat是一个很好的习惯。
    另外调试,自己学习开发的时候,一方面看console.log,一方面看浏览器console有何报错,另一方面不同ide写代码的时候一般都有debug模式,设置断点,一步一步看数据检查错误
  • Kvera 发表于2016-08-15 16:13
    好的~谢谢老师的指导
上一页 第1页/共32页 下一页
社区VIP账号 做作业巩固知识 拿6k以上offer