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

时间:2012-03-07 14:44:50

标签: javascript jquery html

所以基本上我需要添加到这个表单 - 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 $

此总和应自动添加文本字段“Price”。如果我更改日期,价格也会自动更改。有没有简单的方法来创建这样的东西?如果您有任何问题 - 请问,我很乐意回答,所以您可以帮我更轻松地解决这个问题。

1 个答案:

答案 0 :(得分:4)

实例: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}
    }        
};

第一个很简单。第二个我只修改了bike3,因为它是你在你的例子中使用的那个。 12& 3表示季节,t1 - t3代表付款等级,t1硬编码为1-2天,t2为3-7和{{ 1}}为8 +。

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

t3

另一个获得指定季节中指定自行车的指定天数的总价格:

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;
}

最后一部分是将它连接起来,以便在下拉列表的任何变化时重新计算。 jQuery是你的朋友。我为所有应该导致重新计算的元素提供了一个类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; } ,为所有元素添加了id以使它们更容易引用,并且挂钩到recalc事件以构建参数并调用方法:

change

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