HTML：通过 javascript (jquery) 进行实时计算，包括带有初始化的变量

Question

我是 JS 的新手，遇到以下问题：

我希望在答案旁边的数字框中转换值的任何更改。包括来自 HTML 元素的变量 NP0、NP1 和 DP0。

------------------------更新 1-------------------- --------

要在 javascript 中使用 html 变量，我们可以通过 data-* 属性来实现。感谢卢卡

但是，当页面第一次加载时，我该如何启动计算呢？

如何在值发生任何变化时执行计算？

    $(".slide").on('change mousemove', function() { 
      $(this).next(".text").text(this.value)
    });
    $(".calc").on('change paste keyup', function() {  
      $(this).next(".text").text((128+(this.value*0.0625))/1)
    });

<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>

<input name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range"><label class="text">0.25</label>

<br>
<br>
<input name="period" class="calc" value="0" min="0" max="4096" type="number" NP0="128" NP1="0.00625" DP0="1">= <label class="text"></label> km/h

Answer 1

您需要 data-* 属性，所以您的 HTML 应该是

<input name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range"><label class="text">0.25</label>
<br>
<br>
<input name="period" class="calc" value="0" min="0" max="4096" type="number" data-NP0="128" data-NP1="0.00625" data-DP0="1">= <label class="text"></label> km/h

和你的剧本

 $(".slide").on('change mousemove', function() { 
      $(this).next(".text").text(this.value)
 });
$(".calc").on('change paste keyup', function() {  
  $(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"))
});

更新 1

要在您订阅所需事件时立即计算您的价值，您可以使用触发器强制执行一个 "change" 事件，因此您的脚本应该是

  $('.calc').on('change paste keyup', function(){
    $(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"));
  }).trigger('change');

对不起，我漏掉了一点:) 要在使用按钮旋转时获得连续计算，您可以添加 "input" 事件，因此您的代码变为

  $('.calc').on('change paste keyup input', function(){
    $(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"));
  }).trigger('change');

我更新了 fiddle，再次

Here a jsfiddle

Answer 2

     <html>
        <head> 
            <script src="http://code.jquery.com/jquery-2.2.2.min.js">/script>
            <script type="text/javascript">
    function Load(){
            $(document).ready(function(){
                 $(".slide").on('change mousemove', function() {
                 $(this).next(".text").text(this.value);

                 });
                     $(".calc").on('change paste keyup', function() {
                     var value = $('#abc').val();  
                    $(this).next(".text").text((128+ value*0.0625)/1)
                });
            });
}
            </script>
        </head>
        <body onLoad="Load()">
            <input id="period" name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range">

            <label class="text">0.25</label>        <br><br>

            <input id ="abc" name="period" class="calc" value="0" min="0" max="4096" type="number" NP0="128" NP1="0.00625" DP0="1">= 
            <label class="text"></label> km/h
        </body>
    </html>

您可以使用 id 并通过它获取值将更新希望它会有所帮助

HTML：通过 javascript (jquery) 进行实时计算，包括带有初始化的变量

HTML: live calculation via javascript (jquery) including variables with initialization

html

javascript

variables

jquery

live