js学习笔记(一)

需求

最近公司给的js任务,有如下要求：

①点击"+","-"号,改变客户价格的值，售价对应改变(售价=实际价格+客户加价)

②用户输入加价,有同样的效果

③点击"保存",更新数据库信息

实现思路

第一个比较比较好弄,给对应的按钮Onclick()事件,然后在事件里面写相应的逻辑就可以了。因为id是动态的,可以利用map_index巧妙得解决这个问题

第一个利用onblur()事件,当触发事件时首先调用ischeckNum()方法检查是否是数字,然后通过jquery、parseFloat()等方法进行计算、写入值

第三个用hibernate很轻松就完成了,这里就不写了

相关代码

 html代码

<td><div id="div1" name="div1" class="purchase_quantity"><input type="text" name="${map_index}" id="${map_index}" value="${(map['addPrice'])!''}" class="goods_nums_text w30"  onblur="onblurInput(${map_index})"><span class="add_j"><button class="decrease" type="button" onclick="increasePrice(${map_index})" >+</button><button class="decrease" type="button" onclick="decreasePrice(${map_index});" >-</button></span></div></td>

onblur事件监听方法

function onblurInput(id){         if(ischeckNum(id)){        //实际价格        var actualPrice = ${actualPrice};                var addPrice = $("#"+id).attr("value");        var a = parseFloat(addPrice);        //判断加价        if(a>=0){           var a1=toDecimal2(a);           var adPrice=$("#"+id).val(a1);        }else{               alert("加价不可为负噢!");               return;        }        //再次获得加价        var adPrice = $("#"+id).attr("value");        //售价    //var salePrice = $("."+id).text();        var s = parseFloat(adPrice)+parseFloat(actualPrice);    var salePrice = toDecimal2(s);    //alert("salePrice"+salePrice);    $("."+id).html(salePrice);    }}

由于js是弱数据语言,进行运算时会出现很离奇的事情,比如"0.1+0.1=0.200000001"(例子),所以写了个方法每次都强制转换为两位小数

强制保留两位小数,没有就补0

function toDecimal2(x) {            var f = parseFloat(x);            if (isNaN(f)) {                return false;            }            var f = Math.round(x*100)/100;            var s = f.toString();            var rs = s.indexOf('.');            if (rs < 0) {                rs = s.length;                s += '.';            }            while (s.length <= rs + 2) {                s += '0';            }            return s;          }

判断是否为数字的方法

//判断是否为数字      function ischeckNum(id) {  var num = document.getElementById(id).value;  if(num)  {   if( !isNaN( num ) )   {    //alert('是数字');    return true;   }   else   {    alert('您输入的数据不是数字!');    div1.id.select();       return false;   }  }  else  {   alert('需输入内容!');   div1.id.focus();   return false;     } }

点击"+"号时调用的方法

function increasePrice(id){     var addPrice = $("#"+id).attr("value");     var a = parseFloat(addPrice)+0.2;     var adPrice=toDecimal2(a);     $("#"+id).val(adPrice)     //售价     var salePrice = $("."+id).text();     var s= parseFloat(salePrice)+0.2;     var sPrice= toDecimal2(s);     $("."+id).html(sPrice);    }

点击"-"号调用的方法

  function decreasePrice(id){     var addPrice = $("#"+id).attr("value");     var a = parseFloat(addPrice)-0.2;     var adPrice=toDecimal2(a);          //售价     var salePrice = $("."+id).text();     var s= parseFloat(salePrice)-0.2;     var sPrice= toDecimal2(s);          if((adPrice>=0)&&(sPrice>=0)){     $("#"+id).val(adPrice);     $("."+id).html(sPrice);    }else{    alert("好像不能再低了!");    }     }

最终效果

  总结

作为一个走java路线的菜鸟来说,能完成这个需求很不容易了,以前写的java已有几万行,但js却没多少,回头一看,确实没认真写过js。通过这个需求,不那么惧怕js,以后自己也可以尝试写了

参考资料:js判断输入是否为数字

                         限制文本框只能输入数字(这个方法我好像没用)