Javascript 根据鼠标X倾斜线 我试图创建一个页面，在屏幕中间有一条黑线，当我把鼠标移到X轴上时，直线应该倾斜——随着时间的推移，它应该越来越倾斜，直到它最终达到90度。
这是我到目前为止的代码，警告javascript有一个while（true）循环，可能导致浏览器冻结： 在此处复制粘贴代码：Javascript 根据鼠标X倾斜线 我试图创建一个页面，在屏幕中间有一条黑线，当我把鼠标移到X轴上时，直线应该倾斜——随着时间的推移，它应该越来越倾斜，直到它最终达到90度。,javascript,html,Javascript,Html,这是我到目前为止的代码，警告javascript有一个while（true）循环，可能导致浏览器冻结： 在此处复制粘贴代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XYZ</title> <style> body, html { height: 100%; } </style> </head> &l
<!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>
应该最终旋转线条。当循环没有中断条件时，它将无限运行，并且在浏览器中不会呈现任何内容。您可能误解了代码和呈现的交互方式。当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.
setInterval（函数（）{
if（随机数校正<随机数发生器）{
randomizerCorrection=randomizerCorrection+0.1；
}
if（随机数校正>随机数发生器）{
randomizerCorrection=randomizerCorrection-0.1；
}
[等等]
}，13）//其中第二个参数是调用之间的毫秒数。
新的学习方式是使用，但我现在只想使用setInterval，直到您习惯了这些概念。while loop没有中断条件，因此它将无限运行，并且在浏览器中不会呈现任何内容。您可能误解了代码和呈现的交互方式。当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.
setInterval（函数（）{
if（随机数校正<随机数发生器）{
randomizerCorrection=randomizerCorrection+0.1；
}
if（随机数校正>随机数发生器）{
randomizerCorrection=randomizerCorrection-0.1；
}
[等等]
}，13）//其中第二个参数是调用之间的毫秒数。