suchen

Heim >Web-Frontend >js-Tutorial >Einführung in die Methode zum Erzeugen eines Kreises, der mit JS größer und kleiner wird

Einführung in die Methode zum Erzeugen eines Kreises, der mit JS größer und kleiner wird

巴扎黑
巴扎黑Original
2017-09-14 11:52:322447Durchsuche

本文实例讲述了JS实现生成会变大变小的圆环。分享给大家供大家参考。具体如下：

这里使用javascript生成圆环，会变大变小，对于研究如何利用JavaScript生成动画效果，这是个很好的范例。

运行效果如下图所示：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#p1 {width:2px; height:2px; position:absolute; background:red; left:150px; top:200px;}
p {width:3px; height:3px; position:absolute; background:black;}
</style>
<title>JS圆环</title>
<script type="text/javascript">
var n=30;
var r=100;
var a=true;
window.onload=function ()
{
 var op1=document.getElementById("p1");
 var ap=[];
 var op=null;
 var j=0;
 var i=0;
 for(i=0;i<n;i++)
 {
  op=document.createElement("p");
  ap.push(op);
  document.body.appendChild(op);
 }
 calcDrg();
 function calcDrg()
 {
  for(i=0;i<n;i++)
  {
   var degress=360*i/n+j;
   var a=Math.sin(degress*Math.PI/180)*r;
   var b=Math.cos(degress*Math.PI/180)*r;
   ap[i].style.left=op1.offsetLeft+b+"px";
   ap[i].style.top=op1.offsetTop-a+"px";
  }
 }
 setInterval(function (){
  j++;
  var s=0.3;
  a?r-=s:r+=s;
  if(r<=0 || r>=100)
  {
   a=!a;
  }
  calcDrg();
 }, 10);
};
</script>
</head>
<body>
<p id="p1">
</p>
</body>
</html>

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Erzeugen eines Kreises, der mit JS größer und kleiner wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in die Berechnung des Wochentags eines bestimmten Tages mithilfe von JavaScriptNächster Artikel：Einführung in die Berechnung des Wochentags eines bestimmten Tages mithilfe von JavaScript

In Verbindung stehende Artikel

Mehr sehen