簡體   English   中英

如何在這些選項之間專門放置文本“或”一詞?

[英]How do I place text specifically the word "Or" in-between these options?

有一個計算器可以從輸入字段中推出這些選項。 如何在每個顯示的選項之間添加單詞“或”? 這是我試圖修改的特定代碼。

<div style="width: 100%">
   <div style="height: 100px;">
      <h2>FOAM DENSITY</h2>
      <select id="density" style="display: inline-block;float:right;" >
         <option value="standard">Standard (1.75 lbs per cubic feet)</option>
         <option value="open">Open Cell (0.75 lbs per cubic feet)</option>
         <option value="high">High (2.8 lbs per cubic feet)</option>
      </select>
   </div>
   <div  style="height: 100px;">
      <h2>FOAM THICKNESS</h2>
      <input id="thickness" name="thickness" type="text" placeholder="Inches" style="display: inline-block;float:right;"/>
   </div>
   <div style="height: 100px;">
      <h2>SQUARE FOOTAGE</h2>
      <input id="area" name="area" type="text" placeholder="Square Feet" style="display: inline-block;float:right;"/>
   </div>
   <div style="height: 100px;transition-timing-function: ease-in-out;" align="center">
      <button id ="calc" onclick="calc()" >Calculate</button>
   </div>
   <div id="opn" style="display: none">
      <p id="sys31"></p>
      <p id="sys100"></p>
   </div>
   <div id="stndrd" style="display: none">
      <p id="sys1"></p>
      <p id="sys9"></p>
      <p id="sys15"></p>
      <p id="sys50"></p>
   </div>
   <div id="hgh" style="display: none">
      <p id="sys10">h</p>
      <p id="sys33">h</p>
   </div>
   <style>
      h2{
      color:#3a55a7;display: inline-block;float:left;line-height: 0;
      }
      input[type=text]{
      width: 200px;height: 35%;padding-left: 15px; background-color: rgba(0,0,0,0.00); border-radius: 5px; border-color:#f21d28;border-style:solid;font-family:'Nexa';text-transform:uppercase;line-height: 10px;outline: none;
      }
      select{
      height: 35%;font-family: 'Nexa'; background-color: rgba(0,0,0,0.00); border-radius: 5px;border-color:#f21d28;outline: none; border-style:solid; border-width: 2px;
      }
      #calc{
      background-color: #f21d28;border: none;color: white;padding: 15px 32px;text-align: center;font-size: 16px;text-transform:uppercase; font-family:'Nexa'; display: block; border-radius: 5px; letter-spacing: 2px;-webkit-transition: background-color .25s;transition: background-color .25s;transition-timing-function: ease-in-out;outline: none;
      }
      #calc:hover{
      color: #f21d28;background-color: #fff;
      } 
   </style>
   <script>
      function calc(){
        document.getElementById("opn").style.display = "none";
        document.getElementById("stndrd").style.display = "none";
        document.getElementById("hgh").style.display = "none";
        var den = document.getElementById("density").value;
        var thck = document.getElementById("thickness").value;
        var area = document.getElementById("area").value;
        var totalarea = area * thck;
        if(den == "open"){
            var sys31 = parseFloat(totalarea / 380).toFixed(2);
            var sys100 = parseFloat(totalarea / 1200).toFixed(2);
            document.getElementById("sys31").innerHTML = "System 31 Kits: "+sys31;
            document.innerHTML = "or";
            document.getElementById("sys100").innerHTML ="System 100 Kits: "+sys100;
            document.getElementById("opn").style.display = "block";
        }
        else if(den == "standard"){
            var sys1 = parseFloat(totalarea / 12).toFixed(2);
            var sys9 = parseFloat(totalarea / 108).toFixed(2);
            var sys15 = parseFloat(totalarea / 200).toFixed(2);
            var sys50 = parseFloat(totalarea / 600).toFixed(2);
            document.getElementById("sys1").innerHTML = "System I Kits: "+sys1;
            document.getElementById("sys9").innerHTML = "System 9 Kits: "+sys9;
            document.getElementById("sys15").innerHTML = "System 15 Kits: "+sys15;
            document.getElementById("sys50").innerHTML = "System 50 Kits: "+sys50;
            document.getElementById("stndrd").style.display = "block";
        }
        else{
            var sys10 = parseFloat(totalarea / 120).toFixed(2);
            var sys33 = parseFloat(totalarea / 396).toFixed(2);
            document.getElementById("sys10").innerHTML = "System 10 Kits: "+sys10;
            document.getElementById("sys33").innerHTML = "System 33 Kits: "+sys33;
            document.getElementById("hgh").style.display = "block";
        }
      }
   </script>
</div>

在前端,我只是想在屏幕上顯示單詞或在列出的結果之間顯示,所以目前它是這樣的。

System I Kits
System 9 Kits 
System 15 Kits
System 50 Kits

我喜歡它像這樣顯示

System I Kits 
or 
System 9 Kits
or 
System 15 Kits 
or 
System 50 Kits 

它目前垂直顯示。

我能夠使用以下 html 解決此問題

<div style="width: 100%">
<div style="height: 100px;">
    <h2>FOAM DENSITY</h2><select id="density" style="display: inline-block;float:right;" >
        <option value="standard">Standard (1.75 lbs per cubic feet)</option>
        <option value="open">Open Cell (0.75 lbs per cubic feet)</option>
        <option value="high">High (2.8 lbs per cubic feet)</option>
    </select>
</div>
<div  style="height: 100px;">
    <h2>FOAM THICKNESS</h2><input id="thickness" name="thickness" type="text" placeholder="Inches" style="display: inline-block;float:right;"/>
</div>
<div style="height: 100px;">
    <h2>SQUARE FOOTAGE</h2><input id="area" name="area" type="text" placeholder="Square Feet" style="display: inline-block;float:right;"/>
</div>
<div style="height: 100px;transition-timing-function: ease-in-out;" align="center">
    <button id ="calc" onclick="calc()" >Calculate</button>
</div>
<div id="opn" style="display: none">
    <p id="sys31"></p>
    <p class="or_space">OR</p>
    <p id="sys100"></p>
</div>
<div id="stndrd" style="display: none">
    <p id="sys1"></p>
    <p class="or_space">OR</p>
    <p id="sys9"></p>
    <p class="or_space">OR</p>
    <p id="sys15"></p>
    <p class="or_space">OR</p>
    <p id="sys50"></p>
</div>
<div id="hgh" style="display: none">
    <p id="sys10">h</p>
    <p class="or_space">OR</p>
    <p id="sys33">h</p>
</div>  
<style>
    h2{
        color:#3a55a7;display: inline-block;float:left;line-height: 0;
    }
    input[type=text]{
        width: 200px;height: 35%;padding-left: 15px; background-color: rgba(0,0,0,0.00); border-radius: 5px; border-color:#f21d28;border-style:solid;font-family:'Nexa';text-transform:uppercase;line-height: 10px;outline: none;
    }
    select{
        height: 35%;font-family: 'Nexa'; background-color: rgba(0,0,0,0.00); border-radius: 5px;border-color:#f21d28;outline: none; border-style:solid; border-width: 2px;
    }
    #calc{
        background-color: #f21d28;border: none;color: white;padding: 15px 32px;text-align: center;font-size: 16px;text-transform:uppercase; font-family:'Nexa'; display: block; border-radius: 5px; letter-spacing: 2px;-webkit-transition: background-color .25s;transition: background-color .25s;transition-timing-function: ease-in-out;outline: none;
    }
    #calc:hover{
        color: #f21d28;background-color: #fff;
    }
    .or_space{
        margin: -10px 0 5px 0;            
    }
</style>
<script>
    function calc() {
        document.getElementById("opn").style.display = "none";
        document.getElementById("stndrd").style.display = "none";
        document.getElementById("hgh").style.display = "none";
        var den = document.getElementById("density").value;
        var thck = document.getElementById("thickness").value;
        var area = document.getElementById("area").value;
        var totalarea = area * thck;
        if (den == "open") {
            var sys31 = parseFloat(totalarea / 380).toFixed(2);
            var sys100 = parseFloat(totalarea / 1200).toFixed(2);
            document.getElementById("sys31").innerHTML = "System 31 Kits: " + sys31;
            document.innerHTML = "or";
            document.getElementById("sys100").innerHTML = "System 100 Kits: " + sys100;
            document.getElementById("opn").style.display = "block";
        } else if (den == "standard") {
            var sys1 = parseFloat(totalarea / 12).toFixed(2);
            var sys9 = parseFloat(totalarea / 108).toFixed(2);
            var sys15 = parseFloat(totalarea / 200).toFixed(2);
            var sys50 = parseFloat(totalarea / 600).toFixed(2);
            document.getElementById("sys1").innerHTML = "System I Kits: " + sys1;
            document.getElementById("sys9").innerHTML = "System 9 Kits: " + sys9;
            document.getElementById("sys15").innerHTML = "System 15 Kits: " + sys15;
            document.getElementById("sys50").innerHTML = "System 50 Kits: " + sys50;
            document.getElementById("stndrd").style.display = "block";
        } else {
            var sys10 = parseFloat(totalarea / 120).toFixed(2);
            var sys33 = parseFloat(totalarea / 396).toFixed(2);
            document.getElementById("sys10").innerHTML = "System 10 Kits: " + sys10;
            document.getElementById("sys33").innerHTML = "System 33 Kits: " + sys33;
            document.getElementById("hgh").style.display = "block";
        }
    }
</script>

感謝大家嘗試提供幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM