Fatal编程技术网
  • javascript/
  • Javascript 如何使JQuery在HTA应用程序中工作

Javascript 如何使JQuery在HTA应用程序中工作

javascript jquery html css

Javascript 如何使JQuery在HTA应用程序中工作,javascript,jquery,html,css,hta,Javascript,Jquery,Html,Css,Hta,我想将我的web应用程序转换为HTA应用程序 这是我的整个HTA文件： <!DOCTYPE html> <html lang="en-US"> <HTA:APPLICATION applicationname="Test" border="no" caption="yes" showintaskbar="no" singleinstance="yes" sysmenu="yes" selection="no" innerborder="no" scroll="yes

我想将我的web应用程序转换为HTA应用程序

这是我的整个HTA文件：

<!DOCTYPE html>
<html lang="en-US">
<HTA:APPLICATION applicationname="Test" border="no" caption="yes" showintaskbar="no" singleinstance="yes" sysmenu="yes" selection="no" innerborder="no" scroll="yes"/>



<head>
<title>Test</title>
<meta http-equiv="x-ua-compatible" content="ie=11"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

var numRows = 2,
  ti = 5;
var tableCount = 1;
var index = 1;

window.standBy = function() {
  var sum = 0;
  $(".Standby").each(function(index, stand) {
    sum += parseFloat($(stand).val());
  })

  $(".grandtotal").val(sum)
}

function calculate() {
  var tr = $(this).closest('tr');

  var hours = parseInt($(".Time2", tr).val().split(':')[0], 10) - parseInt($(".Time1", tr).val().split(':')[0], 10);
  if (hours < 0) hours = 24 + hours;
  $(".Hours", tr).val(hours);

  if (hours <= 4) $(".Standby", tr).val("0.5");
  if (hours == 4) $(".Standby", tr).val("0.5");
  if (hours > 4 && hours < 8) $(".Standby", tr).val("1");
  if (hours == 8) $(".Standby", tr).val("1");
  if (hours > 8 && hours < 12) $(".Standby", tr).val("1.5");
  if (hours == 12) $(".Standby", tr).val("1.5");
  if (hours > 12 && hours < 16) $(".Standby", tr).val("2");
  if (hours == 16) $(".Standby", tr).val("2");
  if (hours > 16 && hours < 20) $(".Standby", tr).val("2.5");
  if (hours == 20) $(".Standby", tr).val("2.5");
  if (hours > 20 && hours < 24) $(".Standby", tr).val("3");
  if (hours == 24) $(".Standby", tr).val("3");
  if (hours > 24) alert("You cannot exceed a 24 hour period.");



}
$('#table').on('change', ".Time1,.Time2", calculate);
$('#table').find(".Time1").trigger('change')


window.addTime = function() {
  tableCount++;
  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
  $('#timeTable' + tableCount).find("input").val("");
  index++;
  $('#timeTable' + tableCount + ' .increment').html(tableCount);

};


$(document).on('click', 'button.removeTime', function() {
  var closestTable = $(this).closest('table');
  if (closestTable.attr('id') != "timeTable") {
    closestTable.remove();
  }
  tableCount--;
  if (tableCount < 1) {
    tableCount = 1;
  }

  standBy();
  return false;
});
</script>
</head>



<body>

<h1 class="text-center">Compensatory Time for Standby Hours Calculator</h1>
<br>
<br>
<br>

<h3>
Time format is in 24h
</h3>
<h6><I>Example: If you want to type in "8 AM", the correct format would be: "8". <br> If you want to type in "8 PM", the correct format would be "20".</I></h6>

<div id="table">
  <table id="timeTable" class="tg table table-striped table-bordered table-condensed tab_logic">
    <tr class="headings">
      <th class="tg-yw41"></th>
      <th class="tg-yw41"></th>
      <th class="tg-yw4l">Standby Start Time</th>
      <th class="tg-yw4l">Standby End Time</th>
      <th class="tg-yw4l">Hours in total</th>
      <th class="tg-yw4l">Compensatory Hours Earned</th>
    </tr>
    <tr>
      <td class="increment headings">1</td>
      <td class="tg-yw4l headings">
        <button class="removeTime btn btn-danger">Remove Time</button>
      </td>

      <td class="tg-yw4l headings">
        <input class="Time1 form-control input-md " value="" placeholder="Enter your start time" />
      </td>
      <td class="tg-yw4l headings">
        <input class="Time2 form-control input-md" value="" placeholder="Enter your end time" />
      </td>
      <td class="tg-yw4l headings">
        <input type="text" class="Hours form-control input-md" value="0" readonly="" />
      </td>
      <td class="tg-yw4l headings">
        <input type="text" class="Standby form-control input-md" value="0" readonly="" />
      </td>
    </tr>
  </table>
</div>







<hr>

<button class="btn btn-success pull-left" onclick="addTime();"><span class="glyphicon glyphicon-plus-sign">Add Time</span></button>
<br>
<br>

<button class="btn btn-primary" onclick="standBy();">Calculate Total Compensatory Hours Earned</button>

<caption>Total Compensatory Hours:</caption>&nbsp;
<input class="grandtotal" value="" readonly="" />



</body>

</html>


试验
var numRows=2，
ti=5；
var tableCount=1；
var指数=1；
window.standBy=函数（）{
var总和=0；
$（“.Standby”）。每个功能（索引、支架）{
sum+=parseFloat（$（stand.val（））；
})
美元（“.grandtotal”）.val（总和）
}
函数计算（）{
var tr=$（this.nexist（'tr'）；
var hours=parseInt（$（“.Time2”，tr）.val（）.split（'：'）[0]，10）-parseInt（$（“.Time1”，tr.val（）.split（'：'）[0]，10）；
如果（小时<0）小时=24+小时；
$（“.Hours”，tr）.val（小时）；
如果（4小时和<8小时）$（“.Standby”，tr）.val（“1”）；
如果（小时==8）$（“.Standby”，tr）.val（“1”）；
如果（小时数>8和小时数<12）$（“备用”，tr）.val（“1.5”）；
如(小时数==12)$（“.Standby”，tr）.val(1.5)）；
如果（小时数>12和小时数<16）$（“备用”，tr）.val（“2”）；
如果（小时==16）$（“.Standby”，tr）.val（“2”）；
如果（小时数>16和小时数<20）$（“备用”，tr）.val（“2.5”）；
若(小时数==20)$（“.Standby”，tr）.val(2.5);；
如果（小时数>20和小时数<24）$（“备用”，tr）.val（“3”）；
如果（小时==24）$（“.Standby”，tr）.val（“3”）；
如果（小时>24）警报（“您不能超过24小时期限”）；
}
$（“#表”）.on（'change'，“.Time1，.Time2”，calculate）；
$（“#表”）.find（“.Time1”）.trigger（'change'））
window.addTime=函数（）{
tableCount++；
$（“#时间表”）.clone（）.attr（'id'，“时间表”+tableCount）.appendTo（“#表格”）；
$（“#时间表”+表格计数）。查找（“输入”）.val（“”）；
索引++；
$（“#时间表”+tableCount+”.increment'）.html（tableCount）；
};
$（document）.on（'click'，'button.removeTime'，function（）{
var closestTable=$（this）.closest（'table'）；
if（closestTable.attr（'id'）！=“时间表”）{
closestTable.remove（）；
}
表计数--；
如果（tableCount<1）{
tableCount=1；
}
待机（）；
返回false；
});
待机时间计算器的补偿时间






时间格式为24小时
例如：如果你想输入“8AM”，正确的格式应该是：“8”
如果你想输入“8pm”，正确的格式应该是“20”。
待机开始时间
待机结束时间
总小时数
获得的补偿工时
1.
删除时间


加时




计算获得的总补偿小时数
总补假时间：
我还有一个web应用程序的JSFIDLE，我想将其转换为HTA应用程序：

HTA文件中JQuery的全部功能都运行得很好，唯一不起作用的是计算小时数。这意味着每当我输入待机开始时间和待机结束时间时，累计小时数和补偿小时数显示“0”。这不算什么

我想知道你们社区中是否有人知道解决这个问题的方法

谢谢你抽出时间

您需要在正文之后而不是之前添加脚本，这就是它不起作用的原因

        <!DOCTYPE html>
    <html lang="en-US">
    <HTA:APPLICATION applicationname="Test" border="no" caption="yes" showintaskbar="no" singleinstance="yes" sysmenu="yes" selection="no" innerborder="no" scroll="yes"/>



    <head>
    <title>Test</title>
    <meta http-equiv="x-ua-compatible" content="ie=11"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    </head>



    <body>

    <h1 class="text-center">Compensatory Time for Standby Hours Calculator</h1>
    <br>
    <br>
    <br>

    <h3>
    Time format is in 24h
    </h3>
    <h6><I>Example: If you want to type in "8 AM", the correct format would be: "8". <br> If you want to type in "8 PM", the correct format would be "20".</I></h6>

    <div id="table">
      <table id="timeTable" class="tg table table-striped table-bordered table-condensed tab_logic">
        <tr class="headings">
          <th class="tg-yw41"></th>
          <th class="tg-yw41"></th>
          <th class="tg-yw4l">Standby Start Time</th>
          <th class="tg-yw4l">Standby End Time</th>
          <th class="tg-yw4l">Hours in total</th>
          <th class="tg-yw4l">Compensatory Hours Earned</th>
        </tr>
        <tr>
          <td class="increment headings">1</td>
          <td class="tg-yw4l headings">
            <button class="removeTime btn btn-danger">Remove Time</button>
          </td>

          <td class="tg-yw4l headings">
            <input class="Time1 form-control input-md " value="" placeholder="Enter your start time" />
          </td>
          <td class="tg-yw4l headings">
            <input class="Time2 form-control input-md" value="" placeholder="Enter your end time" />
          </td>
          <td class="tg-yw4l headings">
            <input type="text" class="Hours form-control input-md" value="0" readonly="" />
          </td>
          <td class="tg-yw4l headings">
            <input type="text" class="Standby form-control input-md" value="0" readonly="" />
          </td>
        </tr>
      </table>
    </div>







    <hr>

    <button class="btn btn-success pull-left" onclick="addTime();"><span class="glyphicon glyphicon-plus-sign">Add Time</span></button>
    <br>
    <br>

    <button class="btn btn-primary" onclick="standBy();">Calculate Total Compensatory Hours Earned</button>

    <caption>Total Compensatory Hours:</caption>&nbsp;
    <input class="grandtotal" value="" readonly="" />



    </body>
    <script type="text/javascript">

    var numRows = 2,
      ti = 5;
    var tableCount = 1;
    var index = 1;

    window.standBy = function() {
      var sum = 0;
      $(".Standby").each(function(index, stand) {
        sum += parseFloat($(stand).val());
      })

      $(".grandtotal").val(sum)
    }

    function calculate() {
      var tr = $(this).closest('tr');

      var hours = parseInt($(".Time2", tr).val().split(':')[0], 10) - parseInt($(".Time1", tr).val().split(':')[0], 10);
      if (hours < 0) hours = 24 + hours;
      $(".Hours", tr).val(hours);

      if (hours <= 4) $(".Standby", tr).val("0.5");
      if (hours == 4) $(".Standby", tr).val("0.5");
      if (hours > 4 && hours < 8) $(".Standby", tr).val("1");
      if (hours == 8) $(".Standby", tr).val("1");
      if (hours > 8 && hours < 12) $(".Standby", tr).val("1.5");
      if (hours == 12) $(".Standby", tr).val("1.5");
      if (hours > 12 && hours < 16) $(".Standby", tr).val("2");
      if (hours == 16) $(".Standby", tr).val("2");
      if (hours > 16 && hours < 20) $(".Standby", tr).val("2.5");
      if (hours == 20) $(".Standby", tr).val("2.5");
      if (hours > 20 && hours < 24) $(".Standby", tr).val("3");
      if (hours == 24) $(".Standby", tr).val("3");
      if (hours > 24) alert("You cannot exceed a 24 hour period.");



    }
    $('#table').on('change', ".Time1,.Time2", calculate);
    $('#table').find(".Time1").trigger('change')


    window.addTime = function() {
      tableCount++;
      $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
      $('#timeTable' + tableCount).find("input").val("");
      index++;
      $('#timeTable' + tableCount + ' .increment').html(tableCount);

    };


    $(document).on('click', 'button.removeTime', function() {
      var closestTable = $(this).closest('table');
      if (closestTable.attr('id') != "timeTable") {
        closestTable.remove();
      }
      tableCount--;
      if (tableCount < 1) {
        tableCount = 1;
      }

      standBy();
      return false;
    });
    </script>

    </html>
您需要在正文之后而不是之前添加脚本，这就是它不起作用的原因

        <!DOCTYPE html>
    <html lang="en-US">
    <HTA:APPLICATION applicationname="Test" border="no" caption="yes" showintaskbar="no" singleinstance="yes" sysmenu="yes" selection="no" innerborder="no" scroll="yes"/>



    <head>
    <title>Test</title>
    <meta http-equiv="x-ua-compatible" content="ie=11"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    </head>



    <body>

    <h1 class="text-center">Compensatory Time for Standby Hours Calculator</h1>
    <br>
    <br>
    <br>

    <h3>
    Time format is in 24h
    </h3>
    <h6><I>Example: If you want to type in "8 AM", the correct format would be: "8". <br> If you want to type in "8 PM", the correct format would be "20".</I></h6>

    <div id="table">
      <table id="timeTable" class="tg table table-striped table-bordered table-condensed tab_logic">
        <tr class="headings">
          <th class="tg-yw41"></th>
          <th class="tg-yw41"></th>
          <th class="tg-yw4l">Standby Start Time</th>
          <th class="tg-yw4l">Standby End Time</th>
          <th class="tg-yw4l">Hours in total</th>
          <th class="tg-yw4l">Compensatory Hours Earned</th>
        </tr>
        <tr>
          <td class="increment headings">1</td>
          <td class="tg-yw4l headings">
            <button class="removeTime btn btn-danger">Remove Time</button>
          </td>

          <td class="tg-yw4l headings">
            <input class="Time1 form-control input-md " value="" placeholder="Enter your start time" />
          </td>
          <td class="tg-yw4l headings">
            <input class="Time2 form-control input-md" value="" placeholder="Enter your end time" />
          </td>
          <td class="tg-yw4l headings">
            <input type="text" class="Hours form-control input-md" value="0" readonly="" />
          </td>
          <td class="tg-yw4l headings">
            <input type="text" class="Standby form-control input-md" value="0" readonly="" />
          </td>
        </tr>
      </table>
    </div>







    <hr>

    <button class="btn btn-success pull-left" onclick="addTime();"><span class="glyphicon glyphicon-plus-sign">Add Time</span></button>
    <br>
    <br>

    <button class="btn btn-primary" onclick="standBy();">Calculate Total Compensatory Hours Earned</button>

    <caption>Total Compensatory Hours:</caption>&nbsp;
    <input class="grandtotal" value="" readonly="" />



    </body>
    <script type="text/javascript">

    var numRows = 2,
      ti = 5;
    var tableCount = 1;
    var index = 1;

    window.standBy = function() {
      var sum = 0;
      $(".Standby").each(function(index, stand) {
        sum += parseFloat($(stand).val());
      })

      $(".grandtotal").val(sum)
    }

    function calculate() {
      var tr = $(this).closest('tr');

      var hours = parseInt($(".Time2", tr).val().split(':')[0], 10) - parseInt($(".Time1", tr).val().split(':')[0], 10);
      if (hours < 0) hours = 24 + hours;
      $(".Hours", tr).val(hours);

      if (hours <= 4) $(".Standby", tr).val("0.5");
      if (hours == 4) $(".Standby", tr).val("0.5");
      if (hours > 4 && hours < 8) $(".Standby", tr).val("1");
      if (hours == 8) $(".Standby", tr).val("1");
      if (hours > 8 && hours < 12) $(".Standby", tr).val("1.5");
      if (hours == 12) $(".Standby", tr).val("1.5");
      if (hours > 12 && hours < 16) $(".Standby", tr).val("2");
      if (hours == 16) $(".Standby", tr).val("2");
      if (hours > 16 && hours < 20) $(".Standby", tr).val("2.5");
      if (hours == 20) $(".Standby", tr).val("2.5");
      if (hours > 20 && hours < 24) $(".Standby", tr).val("3");
      if (hours == 24) $(".Standby", tr).val("3");
      if (hours > 24) alert("You cannot exceed a 24 hour period.");



    }
    $('#table').on('change', ".Time1,.Time2", calculate);
    $('#table').find(".Time1").trigger('change')


    window.addTime = function() {
      tableCount++;
      $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
      $('#timeTable' + tableCount).find("input").val("");
      index++;
      $('#timeTable' + tableCount + ' .increment').html(tableCount);

    };


    $(document).on('click', 'button.removeTime', function() {
      var closestTable = $(this).closest('table');
      if (closestTable.attr('id') != "timeTable") {
        closestTable.remove();
      }
      tableCount--;
      if (tableCount < 1) {
        tableCount = 1;
      }

      standBy();
      return false;
    });
    </script>

    </html>
“唯一不起作用的是计算小时数”，好的，继续。它怎么不起作用？你有错误吗？你是否得到了你意想不到的结果？你期望结果是什么？@PatrickEvans嗨，Patrick，很抱歉说得含糊不清，我编辑了我的问题。因此，每当我输入待机开始时间和待机结束时间时，累计小时数和累计补偿小时数显示“0”。它不计算任何东西。“唯一不起作用的是计算小时数”，好的，继续。它怎么不起作用？你有错误吗？你是否得到了你意想不到的结果？你期望结果是什么？@PatrickEvans嗨，Patrick，很抱歉说得含糊不清，我编辑了我的问题。因此，每当我输入待机开始时间和待机结束时间时，累计小时数和累计补偿小时数显示“0”。这不算什么。