Question

因此，我正在尝试求解一个方程，该方程涉及鼠标单击/触摸动作和移动的相互作用。的工作原理与滑块非常相似，但是它将使动画逐帧运行，这就是为什么我只需要数字。

<html>
    <header>
        <!-- By the way, this is not the actual html file, just a generic example. -->
        <style>
            #box{
                border:1px solid red; 
                height:500px;
                width:500px;
            }
        </style>
    </header>
    <body>
        <div id="box" onclick="posInicial()" onmousemove="posMove()"></div>
        <div id="Z" ></div>

        <script>
            function posInicial() {
                var posX = event.offsetX;
                return posX;
            };

            function posMove() {
                var posY = event.offsetX;
                return posY;
            };

            var z = posY - posX;

            document.getElementById("Z").innerHTML =  z;
        </script>
    </body>
</html>

每当我编写下面的代码时，我都可以在HTML中实时显示和更新数字，但是我需要动画框架控件的“减号”操作中的实际值

function posInicial() {
    var posX = event.offsetX;
    document.getElementById("Z").innerHTML = posX;
};

有人可以救我吗？

Answer 1

使用Number.parseInt。来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt

Answer 2

如果要从字符串中解析整数，请使用Number()或parseInt()：

#include <script name here>.ahk

Answer 3

您的函数将不起作用，因为您的变量作用域是局部的。您的var posX仅可在poInicial()中访问。一个简单的解决方法是使它们像这样：

var posX;
var posY;

function posInicial() {
    posX = event.offsetX;
};

function posMove() {
    posY = event.offsetX;
};

var z = posY - posX;

document.getElementById("Z").innerHTML =  z;

但是它将不起作用，因为您document.getElementById("Z").innerHTML = z;仅在脚本加载时被调用。您不需要返回任何东西，因为您不是在使用函数来获取值而是设置一个值。

// Global variables
var posX;
var posY;

function posInicial() {
    posX = event.offsetX;
    writePosition();
};

function posMove() {
    posY = event.offsetX;
    writePosition();
};

function writePosition() {
    var z = posY - posX; // Local since we just need the value to write in Z element.
    document.getElementById("Z").innerHTML =  z;
}

这是一个可以帮助您解决范围的链接：https://www.w3schools.com/js/js_scope.asp

Answer 4

这些值已经是数字，但是您的代码有几个问题。主要是，计算posY - posX仅在显示页面时执行一次。您需要将其放入函数中，然后从posMove()事件中调用它：

<html>
<header>
  <style>
    #box {
      border: 1px solid red;
      height: 500px;
      width: 500px;
    }
  </style>
</header>
<body>
  <div id="box" onclick="posInicial()" onmousemove="posMove()"></div>
  <div id="Z"></div>
  <script>
    var posX = 0;

    function posInicial() {
      posX = event.offsetX;
    };

    function posMove() {
      posDisplay(event.offsetX);
    };

    function posDisplay(posY) {
      var z = posY - posX;
      document.getElementById("Z").innerHTML = z;
    }
  </script>
</body>
</html>

从offsetX值中获取数值

4 个答案: