Rumah > Artikel > hujung hadapan web > JS实现生成会变大变小的圆环的方法介绍

JS实现生成会变大变小的圆环的方法介绍

巴扎黑asal: 2017-09-14 11:52:322363semak imbas

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

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

运行效果如下图所示：

具体代码如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml">
&lt;head>
&lt;style>
#p1 {width:2px; height:2px; position:absolute; background:red; left:150px; top:200px;}
p {width:3px; height:3px; position:absolute; background:black;}
&lt;/style>
&lt;title>JS圆环&lt;/title>
&lt;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&lt;n;i++)
 {
  op=document.createElement("p");
  ap.push(op);
  document.body.appendChild(op);
 }
 calcDrg();
 function calcDrg()
 {
  for(i=0;i&lt;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&lt;=0 || r>=100)
  {
   a=!a;
  }
  calcDrg();
 }, 10);
};
&lt;/script>
&lt;/head>
&lt;body>
&lt;p id="p1">
&lt;/p>
&lt;/body>
&lt;/html>

Atas ialah kandungan terperinci JS实现生成会变大变小的圆环的方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：用JavaScript算出某天是星期几的方法介绍Artikel seterusnya：如何使用JavaScript绘制圆形和矩形

Artikel berkaitan

Lihat lagi