我需要协助将此功能放入我的html页面

时间:2019-01-28 05:33:45

标签: javascript jquery html

我想将此函数放入html中,但我不确定如何编写HTML帮助。

function showindialog() {
    var showoutput = "";
    showoutput += "<div id=\"result\">";
    showoutput += "    <div id=\"line\">You are " + weightclass + "<\/div>";
    showoutput += "    <p><b>BMI: <\/b>" + calculateBMI + "<\/p>";
    showoutput += "    <p><b>BMR: <\/b" + calculateBMR + "<\/p>";
    showoutput += "    <p><b>Calories to maintain weight: <\/b><br><br>" + calculateBMRwE + "<\/<p>";
    showoutput += "<\/div>";

    $("#showdialog").html(showoutput);
}

它应该在对话框中弹出一些东西。

1 个答案:

答案 0 :(得分:1)

如果您阅读一些文档,学习并尝试自己做,那将是很好的。然后,您可以发布您尝试过的内容以及面临的问题,这里的人们将很乐意为您提供帮助。也许您可以从这里开始:https://www.tutorialspoint.com/javascript/

无论如何,这是您的操作方法。您可以将JS代码放在html页面中的标签内,

<div id="showdialog"></div>
<script type="text/javascript">
  function showindialog() {
      var showoutput = "", weightclass, calculateBMI, calculateBMR, calculateBMRwE;
      showoutput += "<div id=\"result\">";
      showoutput += "    <div id=\"line\">You are " + weightclass + "<\/div>";
      showoutput += "    <p><b>BMI: <\/b>" + calculateBMI + "<\/p>";
      showoutput += "    <p><b>BMR: <\/b" + calculateBMR + "<\/p>";
      showoutput += "    <p><b>Calories to maintain weight: <\/b><br><br>" + calculateBMRwE + "<\/<p>";
      showoutput += "<\/div>";

      document.querySelector("#showdialog").innerHTML = showoutput;
  }

  window.onload = function() {
    showindialog();
  }
</script>

<style type="text/css">
  #showdialog {
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  #result{
    background:#ccc;
    border: 1px solid #aaa;
    padding: 10px;
  }
</style>

当您开始编写更多JS代码时,最好将它们保存在单独的文件中,并像这样包含它:

<script src="path/to/your/js/file.js" type="text/javascript"></script>
相关问题