javascript - 自动计算表单的价格 jquery/javascript 函数

Question

所以基本上我需要添加到这个表单 - http://jsfiddle.net/tSsvb/自动计算价格。例如参数是这些——(3 辆自行车只是测试，可能有 100 甚至 200 辆)。所以基本上 -

Bike 1 -
Price for 1 - 2 days in Season 1 - 5$ per day.
Price for 1 - 2 days in Season 2 - 10$ per day.
Price for 1 - 2 days in Season 3 - 20$ per day.
Price for 3 - 7 days in Season 1 - 4$ per day.
Price for 3 - 7 days in Season 2 - 7$ per day.
Price for 3 - 7 days in Season 3 - 15$ per day.
Price for 8+ days in Season 1 - 3$ per day.
Price for 8+ days in Season 2 - 5$ per day.
Price for 8+ days in Season 3 - 12$ per day.

Bike 2 -
Price for 1 - 2 days in Season 1 - 10$ per day.
Price for 1 - 2 days in Season 2 - 20$ per day.
Price for 1 - 2 days in Season 3 - 30$ per day.
Price for 3 - 7 days in Season 1 - 7$ per day.
Price for 3 - 7 days in Season 2 - 15$ per day.
Price for 3 - 7 days in Season 3 - 25$ per day.
Price for 8+ days in Season 1 - 5$ per day.
Price for 8+ days in Season 2 - 12$ per day.
Price for 8+ days in Season 3 - 22$ per day.

Bike 3 -
Price for 1 - 2 days in Season 1 - 3$ per day.
Price for 1 - 2 days in Season 2 - 5$ per day.
Price for 1 - 2 days in Season 3 - 10$ per day.
Price for 3 - 7 days in Season 1 - 2$ per day.
Price for 3 - 7 days in Season 2 - 3$ per day.
Price for 3 - 7 days in Season 3 - 7$ per day.
Price for 8+ days in Season 1 - 1$ per day.
Price for 8+ days in Season 2 - 2$ per day.
Price for 8+ days in Season 3 - 5$ per day.

季节日期是 -

Season 1: 1 January to 10 June and 21 September to 31 December
Season 2: 11 June to 30 June and 1 September to 20 September
Season 3: 1 July to 31 August

那么我们来做一个测试计算。如果我选择从 7 月 1 日到 9 月 25 日的日期，自行车 3 的计算如下 -

62*5 + 20*2 + 5*1 = 310 + 40 + 5 = 355$

并且此金额应自动添加到文本字段“价格”中。如果我更改日期，价格也会自动更改。有什么简单的方法可以创建这样的东西吗？如果您有任何问题 - 请提出，我很乐意回答，这样您就可以帮助我更轻松地解决这个问题。

Answer 1

实例:http://jsfiddle.net/tSsvb/1/

我从代表 2 个变量开始

• 一系列不同的季节
• 代表定价矩阵的对象

---

var seasonLookup = [
    {startDay: 1, startMonth:1, endDay: 10, endMonth: 6, season:1},
    {startDay: 21, startMonth:9, endDay: 31, endMonth: 12, season:1},
    {startDay: 11, startMonth:6, endDay: 30, endMonth: 6, season:2},
    {startDay: 1, startMonth:9, endDay: 20, endMonth: 9, season:2},
    {startDay: 1, startMonth:7, endDay: 31, endMonth: 8, season:3},    
    ];

var priceMatrix = {
    bike3: {
        1: { t1: 2, t2: 2, t3: 1},
        2: { t1: 5, t2: 3, t3: 2},
        3: { t1: 10, t2: 3, t3: 5}
    }        
};

---

第一个非常简单。第二个我只 retrofit 了 bike3，因为它是您在示例中使用的那个。 1,2 & 3代表赛季，t1 - t3代表等级t1 硬编码为 1-2 天，t2 为 3-7，t3 为 8+。

然后我创建了 2 个函数。获取指定日期的季节:

function getSeason(date){
    var day = date.getDate();
    var month = date.getMonth()+1;
    var year = date.getFullYear();
    for(var i=0;i<seasonLookup.length;i++){
        var s = seasonLookup[i];
        var startDate = new Date(year, s.startMonth-1,s.startDay);
        var endDate = new Date(year, s.endMonth-1,s.endDay);
        if(date >= startDate && date <= endDate)
            return s.season;
    }
    return null;
}

另一个获取指定季节指定天数内指定自行车的总价:

function getPrice(bike, season, days){
  var tier = "";
  if(days <=2)
    tier = "t1";
  else if(days <=7)    
      tier = "t2";
   else
       tier = "t3"
   return priceMatrix[bike][season][tier] * days;
}

---

下一步是根据开始日期、结束日期和自行车进行实际计算的方法:

function calculatePrice(startDate, endDate, bike)
{
   var currentSeason = getSeason(startDate);
   var totalPrice = 0;
   var daysInSeason = 0;
   var currentDate = startDate;
   while(currentDate<=endDate){
       var season = getSeason(currentDate);
       if(season != currentSeason){
              totalPrice += getPrice(bike,currentSeason,daysInSeason);
              currentSeason = season;
              daysInSeason = 0;
       }
       daysInSeason++;
       currentDate.setDate(currentDate.getDate()+1);        
   }
    totalPrice += getPrice(bike,currentSeason,daysInSeason);
    return totalPrice;
}

最后一部分是将其连接起来，以便它根据下拉菜单的任何变化重新计算。 jQuery 是你的 friend 。我为所有应该导致重新计算的元素添加了一个类 recalc，为所有元素添加了 id 以便于引用，并连接到 change 事件中以构建参数并调用方法:

$('.recalc').change(function(){
    var startDate = new Date(parseInt($('#yd').val(),10),parseInt($('#md').val(),10)-1,parseInt($('#dd').val(),10) );
    var endDate = new Date(parseInt($('#yr').val(),10),parseInt($('#mr').val(),10)-1,parseInt($('#dr').val(),10));
    var bike = $('#bike').val();

    var price = calculatePrice(startDate,endDate,bike);
    $('#price').val(price);

});

希望对您有所帮助，您可能需要从 PHP 生成定价矩阵，但这对您来说只是一个练习:)