以角度计算div1和div2之间的距离

Question

我使用了这段代码。

 namespace TestCoin2
{

class Program
{
    public enum CoinSides { Heads = 0, Tails = 1 }

    static void Main(string[] args)
    {
        string userInput;// This will hold all my user input/ answers.
        Console.WriteLine("Hello, Pick Heads or Tails:");
        userInput = Console.ReadLine();

        int coin;// this will hold my random int numbers.
        Random rng = new Random();
        coin = rng.Next(0, 2);

        if (coin == Convert.ToInt32(CoinSides.Heads) && userInput == CoinSides.Heads.ToString("D"))
        {
            Console.WriteLine("You picked Right! Heads! YOU WIN!");
        }
        else if (coin == Convert.ToInt32(CoinSides.Tails) && userInput == CoinSides.Tails.ToString("D"))
        {
            Console.WriteLine("You picked Right! Tails! YOU WIN!");
        }
        else
        {
            Console.WriteLine("You picked Wrong! it was..." + myString);
        }

        Console.ReadLine();
    }
}
}

试图获得2个div之间的距离。我使用此代码执行此操作，但我的页面会自动刷新，第二个div为零。还有另一种计算距离的方法吗？

我在jquery中这样做了。或许存在另一种方法。

Answer 1

通常我这样做是为了调整中间位置以将页脚推到页面底部。

为此，我采取window.height并删除页眉和页脚元素的高度。然后我将一个监听器绑定到对象窗口的resize事件，以便在需要时重新计算高度。

如果我们想要使它一般，这意味着取父元素的高度并减去第一个和最后一个，并在父元素的整个高度上添加一个$ watch。

然而，javascript（甚至是jquery）中的高度和宽度属性都很棘手。他们不计算元素占据的整个高度。边距和边界不包括在内。

因此，为了获得正确的东西，你必须用内部填充物包裹你的元素

<section id="header">
    <div id="header-content">[content]</div>
</section>

标题上有填充属性（如果需要），标题内容有边框（如果需要）。然后，您可以通过查找高度元素来获得标题的高度。

这与angular没有任何关系，唯一的一件事就是$ watch部分来检测变化。但如果像我这样的页眉/页脚，你可以使用原始的javascript来监听窗口调整大小。

Answer 2

在一个函数中执行它以便您可以重用它

function getDistance() { 
    var div1 = $('.hd-termometro');
    var div2 = $('.ft-termometro');
    return div2.offset().top - (div1.offset().top + div1.height())
}

第一次使用

$scope.distance = getDistance();

距离变化时更新范围

$(window).resize(function(){
   $scope.distance = getDistance();
});