html代码没有在记事本++上运行

html code not running on notepad++

本文关键字：运行 记事本 代码 html      更新时间：2023-09-26

我尝试在chrome上通过notepad++运行HTML代码，但似乎不起作用。这个代码基本上是一个围绕一个更大的圆圈旋转的圆圈动画。出于某种奇怪的原因，我的代码没有运行动画。这是我的代码：

<html>
    <head>
    <style type="text/css">
        div {
  border-radius: 50%;
  border: 2px solid #000;
  position: fixed;
}
#center {
  width: 200px;
  height: 200px;
  left: 100px;
  top: 100px;
}
#sat0,
#sat1,
#sat2,
#sat3,
#sat4 {
  width: 50px;
  height: 50px;
}

        </style>
</head>
    <body>
    <div id="center"></div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>

        <script language="JavaScript"  type="text/javascript">

            var pos = $('#center').position(),
  radiusSat = $('#sat1').width() * 0.5,
  radius = $('#center').width() * 0.5,
  cx = pos.left + radius,
  cy = pos.top + radius,
  x, y, angle = 0,
  angles = [],
  spc = 360 / 5,
  deg2rad = Math.PI / 180,
  i = 0;
for (; i < 5; i++) {
  angles.push(angle);
  angle += spc;
}
/// space out radius
radius += (radiusSat + 10);
loop();
function loop() {
  for (var i = 0; i < angles.length; i++) {
    angle = angles[i];
    x = cx + radius * Math.cos(angle * deg2rad);
    y = cy + radius * Math.sin(angle * deg2rad);
    $('#sat' + i).css({
      left: x - radiusSat,
      top: y - radiusSat
    });
    angles[i] = angles[i] + 1;
    if (angles[i] > 360) angles[i] = 0;
  }
  requestAnimationFrame(loop);
}


        </script>   
    </body>
</html>

我找不到我可能犯的任何错误。请帮忙。非常感谢。

您没有在文件中添加jQuery引用。

将此添加到您的<head>标签中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

这很简单。您正在尝试在不包含jQuery库的情况下使用jQuery（$）。请插入此

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

在此之前：

<script language="JavaScript"  type="text/javascript">

或者更好地位于<head></head>标签

内
相关文章：