根據鼠標的傾斜線X

我試圖創建一個頁面，在屏幕中間有一條黑線，當我將鼠標移動到x軸上時，線條應該傾斜 - 隨着時間的推移它應該越來越傾斜，直到它最終達到90度。根據鼠標的傾斜線X

這是到目前爲止我的代碼，警告的JavaScript有一段時間（true）循環，並可能導致瀏覽器凍結：代碼https://jsfiddle.net/79ggc2hp/

複製粘貼此：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>XYZ</title> 
<style> 
body, html { 
    height: 100%; 
} 
</style> 
</head> 

<body> 

<svg height="100%" width="100%"> 
    <line x1="50%" y1="50%" x2="50%" y2="90%" style="stroke:rgb(0,0,0);stroke-width:10" /> 
</svg> 

<script> 
var pressureFactor = 10; 
var randomizerCorrection = 0; 
var randomizer = 0; 
var swingfactor = 1; 
var time = 0; 

var cursorX; 
document.onmousemove = function(e){ 
    cursorX = e.clientX; 
} 

while (true) { 
    if (randomizerCorrection < randomizer) { 
     randomizerCorrection = randomizerCorrection + 0.1; 
    } 

    if (randomizerCorrection > randomizer) { 
     randomizerCorrection = randomizerCorrection - 0.1; 
    } 

    var Faktor = ((cursorX/40) - 10) + (this._rotation/pressureFactor); 
    this._rotation = this._rotation + Faktor + randomizerCorrection * swingfactor; 
    rotationLine = this._rotation; 

    if (rotationLine > 90) { 
     this._rotation = 90; 
    } 

    if (rotationLine < (-90)) { 
     this._rotation = (-90); 
    } 

    pressureFactor = pressureFactor - 1; 
    if (pressureFactor == 1) { 
     pressureFactor = 1; 
     swingfactor =+ 1; 
    } 
    randomizer = Math.random(5) - 2; 
    time = time + 1; 
} 
</script> 

</body> 

</html>

事情呢不能正常工作，因爲你可能會看到，但我有點困擾在哪裏解決問題 - 因爲其中一些是通過Google發現的各種事情的簡單示例的複製粘貼，並且

rotationLine = this._rotation

應該最終旋轉線。

來源

2016-07-05 Kasper Nielsen

while循環沒有中斷條件，所以它將無限運行，並且在瀏覽器中不會呈現任何內容。您可能會誤解代碼和呈現如何交互。當JavaScript代碼運行完畢後，瀏覽器更新框架並呈現屏幕。但你的代碼永遠不會停止運行。認爲它需要'空氣'。我將以其他方式在多線程環境中完成演講，並且現在指出您需要停止代碼，讓瀏覽器呈現，然後再次啓動代碼。

老學校的方式做這將是一個簡單的setInterval來代替while循環：

setInterval(function() { 
    if (randomizerCorrection < randomizer) { 
     randomizerCorrection = randomizerCorrection + 0.1; 
    } 

    if (randomizerCorrection > randomizer) { 
     randomizerCorrection = randomizerCorrection - 0.1; 
    } 
    [etc...] 
}, 13) // where the second argument is the number of milliseconds between calls.

新校的方法是使用requestAnimationFrame，但我只是玩弄的setInterval現在直到你習慣了這些概念。

來源

2016-07-05 17:45:05

根據鼠標的傾斜線X

回答

相關問題