我正在尝试创建一个从英寸到英尺的转换器,但只显示小数

时间:2016-01-11 19:15:29

标签: javascript html css3

由于标题声明我试图将英寸转换为英尺,但不是像5.02那样显示小数,而是希望它显示5'2“。

这是GUI的样子enter image description here

我希望“转换为英尺”显示标准英尺“格式”。

我的代码HTML

<form class="form-inline">
                                        <div class="form-group">
                                            <label for="width">Width:</label>
                                            <input type="text" class="form-control" id="width" placeholder="">
                                        </div>
                                        <div class="form-group">
                                            <label for="height">Height:</label>
                                            <input type="text" class="form-control" id="height" placeholder="">
                                        </div>
                                        <div class="form-group">
                                            <label for="measurement">Measurement:</label>
                                            <select class="form-control" id="measurement" placeholder="">
                                                <option value="1">Inches</option>
                                                <option value="2">Feet</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <input type="button" class="btn btn-info" value="Submit" onclick="myFunction()">
                                        </div>
                                        <div class="form-group">
                                            <input type="button" class="btn btn-danger" value="Clear" onclick="clearFunction()">
                                        </div>
                                    </form>

                                    <table class="table table-bordered table-background" id="contentTable">
                                        <thead>
                                            <tr>
                                                <th>Type</th>
                                                <th>Surface Area</th>
                                                <th>Conversion to Inches</th>
                                                <th>Conversion to Feet</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td id="type"></td>
                                                <td id="area"></td>
                                                <td id="conInch"></td>
                                                <td id="conFeet"></td>
                                            </tr>
                                        </tbody>
                                    </table>

这是我的JavaScript

function myFunction() 
            {
                var width = document.getElementById('width').value;
                var height = document.getElementById('height').value;
                var measurment;
                var area;
                var widthFeet;
                var heightFeet;
                var widthInches;
                var heightFeet;
                var type;

                if(document.getElementById('measurement').value == 1){
                    measurment = 1;
                    type = "Inches"
                    area = width * height;
                    widthFeet = width / 12;
                    heightFeet = height / 12;
                    widthInches = width;
                    heightInches = height;
                } else if(document.getElementById('measurement').value == 2){
                    measurment = 2;
                    type = "Feet"
                    area = width * height;
                    widthInches = width * 12;
                    heightInches = height * 12;
                    widthFeet = width;
                    heightFeet = height;
                }

                document.getElementById('type').innerHTML = type;
                document.getElementById('area').innerHTML = area + "(" + width + "x" + height + ")";
                document.getElementById('conInch').innerHTML = widthInches + " X " + heightInches;
                document.getElementById('conFeet').innerHTML = widthFeet.toFixed(2) + " X " + heightFeet.toFixed(2);
            }

            function clearFunction(){
                document.getElementById('type').innerHTML = "";
                document.getElementById('area').innerHTML = "";
                document.getElementById('conInch').innerHTML = "";
                document.getElementById('conFeet').innerHTML = "";
            }

1 个答案:

答案 0 :(得分:1)

假设输入变量 width height 以英寸为单位,我想你可以得到你要求的数字如下:

widthFeet = Math.floor(width / 12);
widthInches = width%12;
heightFeet = Math.floor(height / 12);
heightInches = height%12;