Question

我有一个新的建筑网站，我想用计算器帮助我们的客户，以便他们可以估计他们的项目需要多少袋水泥。他们应该能够输入墙/体积的长度，宽度和高度。这应该产生他们需要的袋子数量。

我只是在寻找简单的东西，移动友好是关键。最后它应该将它们保持在同一页面上，没有重定向或任何东西，这样他们就可以更改它而不必返回。

Javascript可能是最佳选择，但如果有更好的系统，我会接受它。

为简单起见，一袋混凝土填充1立方英尺。

Answer 1

这是一个简单的解决方案，有3个输入

＆＃13;

from django.core.paginator import Paginator

def events_view(request):
    # range of queryset sent in request params

    start_time = int(request.GET.get('start_time'))
    end_time = int(request.GET.get('end_time'))
    page_no = int(request.GET.get('page_no', 1))

    objects = Event.objects.filter(event_time__gte = start_time,
                         event_time__lte = end_time).order_by('event_time')
    p = Paginator(objects, 10)

    requested_page = p.page(page_no)
    requested_objects_list = requested_page.object_list #  required objects list

    return HttpResponse(status=200)

＆＃13;

$('input').on('keyup',function(){
  if($('#height').val().length>0&&$('#width').val().length>0&&$('#depth').val().length>0){
    console.log($('#height').val()*$('#width').val()*$('#depth').val());
    $('#bags').html($('#height').val()*$('#width').val()*$('#depth').val());
  }
});

＆＃13;

Answer 2

你似乎对堆栈溢出和Web开发都是新手，所以请考虑这是你的freebe。我建议去W3学校并深入了解html输入控件以及Javascript。

一旦你有了理解，我就会看看Chrome开发者工具的教程。每个网站的html，css和javascript（通常）都是公开可见的，任何人都可以查看。谷歌搜索“混凝土计算器”我发现了大量具有类似过程的网站。从他们的“右键点击” - ＆gt; “inspect element - ＆gt;打开”Sources“选项卡 - ＆gt;导航”js“文件夹，你可以使用某人编写的确切代码来执行相同的操作。http://www.concretenetwork.com/concrete/howmuch/calculator.htm有一个非常容易阅读的JQuery示例。 / p>

function change(){
    var length = document.getElementById('length').value;
    var width = document.getElementById('width').value;
    var height = document.getElementById('height').value;
    var cubicFeet = (length * width * height)
    var weight = cubicFeet * 133
    var numOfBags = weight / 60
    document.getElementById("cubicFeet").innerHTML = cubicFeet + " cubic feet";
    document.getElementById("weight").innerHTML = weight + " lbs";
    document.getElementById("numOfBags").innerHTML = numOfBags + " bags (60 lbs per bag)";
}

<center>
  <form>
    Length:<br>
    <input type="text" id="length" onkeyup="change()" />
    <br>
    Width:<br>
    <input type="text" id="width" onkeyup="change()" />
    <br>  
    Height:<br>
    <input type="text" id="height" onkeyup="change()" />
  </form>
  <div id="cubicFeet"></div>
  <div id="weight"></div>
  <div id="numOfBags"></div>
</center>

如何为HTML网站制作移动友好计算器

2 个答案: