recherche

Maison  >  Article  >  interface Web  >  Introduction à la méthode de génération d'un cercle qui deviendra de plus en plus petit en utilisant JS

Introduction à la méthode de génération d'un cercle qui deviendra de plus en plus petit en utilisant JS

巴扎黑
巴扎黑original
2017-09-14 11:52:322406parcourir

本文实例讲述了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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction à la façon de calculer quel jour de la semaine se trouve un certain jour à l'aide de JavaScriptArticle suivant：Introduction à la façon de calculer quel jour de la semaine se trouve un certain jour à l'aide de JavaScript

Articles Liés

Voir plus