连接字符串并格式化输出

Concatenate strings and format output

本文关键字：格式化 输出 串并 字符串 字符 连接      更新时间：2023-09-26

我正在尝试执行计算并在html上动态显示它。

如何仅在选定区域设置文本输出格式。

计算()，生成分配变量power的值。

如何在html中显示以下格式的结果。如果可能的话，正确的方法在Jquery和纯js版本。

额定功率:18瓦。

http://jsbin.com/yajoju 

function calculation() {
  var num1 = document.getElementById("num1");
  var num2 = document.getElementById("num2");
  var power = (parseFloat(num1.value) * parseFloat(num2.value));
  console.log("Power = " + power + " watts");
  /* html output  */
  $("#resultpad").text("Rated Power :" + power + " watts");
  // Is it possible only to display the value of Variable power in bold text <strong>power</strong> watts
}
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<body>
  <div id="inputForm">
    <p>Fill electrical ratings</p>
    <p>Voltage:
      <input type="text" name="num1" id="num1" />
    </p>
    <p>Current:
      <input type="text" name="num2" id="num2" />
    </p>
    <p id="resultpad"></p>
    <!-- outout generated by calculation() -->
    <p>
      <button onclick="calculation()">Submit</button>
    </p>
  </div>
</body>

使用html()方法代替text()

$("#resultpad").html("Rated Power :<strong>" + power + "</strong> watts");

或不使用jquery

document.getElementById("resultpad").innerHtml = "Rated Power :<strong>" + power + "</strong> watts";

在这种情况下，你必须把你的文本包装成这样的标签:

$("#resultpad").html("Rated Power :<strong>" + power + "</strong> watts");

(1) 在label: class中指定class将更有帮助，因为您可以在单个class

中添加更多的css
$("#resultpad").html("Rated Power :<span class='calculationText'>" + power + "</span > watts");
<style>
.calculationText
{
    font-weight:bold;
}

(2) 将html分配给元素而不是文本，并更改函数如下。

function calculation() {
    var num1 = document.getElementById("num1");
    var num2 = document.getElementById("num2");
    var power = (parseFloat(num1.value) * parseFloat(num2.value));
    console.log("Power = " + power + " watts");
    /* html output  */
    $("#resultpad").html("Rated Power :<strong>" + power + "</strong> watts");
    // Is it possible only to display the value of Variable power in bold text <strong>power</strong> watts
}
相关文章：