Js模拟三角函数曲线

来源：互联网发布：行动派琦琦知乎编辑：程序博客网时间：2024/04/28 22:00
http://bbs.blueidea.com/viewthread.php?tid=2893888
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta name="description" content="javascript特效，正弦函数，余弦函数" /> 
<meta name="copyright" content="http://hi.baidu.com/lpj1985" /> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS模拟三角函数</title> 
<script type="text/javascript"> 
function $(id){ 
  return document.getElementById(id);} 
function gt(obj,tag){ 
  return obj.getElementsByTagName(tag);} 
</script> 
<style type="text/css"> 
body,html{margin:0; background:#666} 
#container,#container1{position:absolute; width:600px; height:60px; left:50%; top:50%; margin:-30px 0 0 -300px; background:#bbb; border:1px #fff solid;} 
#container1{margin:-90px 0 0 -300px; border-bottom:none;} 
#container div.sin,#container div.cos{position:absolute; width:2px; height:2px; background:#900; overflow:hidden;} 
#container div.cos{background:#036} 
#opt{width:600px; height:20px; position:absolute; left:50%; top:50%; margin:60px 0 0 -300px; background:#ccc;} 
#opt span{font-family:Arial; font-size:12px; display:block; float:right; background:#888; height:20px; width:40px; line-height:20px; overflow:hidden;margin-left:1em; text-align:center; cursor:pointer;} 
#opt .sin,#opt .cos{color:#900; float:left; margin-left:0; margin-right:1em;} 
#opt .cos{color:#036;} 
</style> 
</head> 
<body onselectstart="return false"> 
<div id="container1"></div> 
<div id="container"></div> 
<div id="opt"> 
    <span class="sin" onclick="shCur('sin')">sinX</span> 
    <span class="cos" onclick="shCur('cos')">cosX</span> 
    <span onclick="clearTimeout(timer)">Stop</span> 
    <span onclick="mCur()">Play</span> 
    <span onclick="spl('b')">PL+</span> 
    <span onclick="spl('s')">PL-</span> 
    <span onclick="szf('b')">ZF+</span> 
    <span onclick="szf('s')">ZF-</span> 
</div> 
<script type="text/javascript"> 
var zf=50; pl=0.05;x=0; 
//绘制曲线 
function drawCur(zf,pl){ 
$('container').innerHTML=""; 
rX=0; 
rY=0; 
for(i=1;i<=200;i++){ 
    var dsin=document.createElement("div"); 
    dsin.setAttribute("id","sin"+i); 
    dsin.className="sin"; 
    dsin.style.left=rX+"px"; 
    dsin.style.top=Math.sin((i+x)*pl)*zf+"px"; 
    var dcos=document.createElement("div"); 
    dcos.setAttribute("id","cos"+i); 
    dcos.className="cos"; 
    dcos.style.left=rX+"px"; 
    dcos.style.top=Math.cos((i+x)*pl)*zf+"px"; 
    rX+=3; 
    rY+=pl; 
    $('container').appendChild(dsin); 
    $('container').appendChild(dcos);} 
    } 
drawCur(zf,pl); 
//隐藏曲线 
function shCur(cur){ 
var cdiv=gt($('container'),"div"); 
for(i=0;i<cdiv.length;i++){ 
   if(cdiv[i].id.substring(0,3)==cur){ 
      cdiv[i].style.display=(cdiv[i].style.display=="block")?"none":"block";} 
   } 
} 
//设置振幅、频率 
function szf(flag){ 
if(flag=="b")zf+=5; 
if(flag=="s")zf-=5; 
drawCur(zf,pl);} 
function spl(flag){ 
if(flag=="b")pl+=0.05; 
if(flag=="s")pl-=0.05; 
drawCur(zf,pl);} 
//让曲线动起来 
//不要变化太快，否则会吃尽内存的 
var timer; 
function mCur(){ 
var cdiv=gt($('container'),"div"); 
for(i=0;i<cdiv.length;i++){ 
   cid=parseInt(cdiv[i].id.substring(3,cdiv[i].id.length)); 
   if(cdiv[i].id.substring(0,3)=="sin"){ 
      cdiv[i].style.top=Math.sin((cid+x)*pl)*zf+"px";} 
   if(cdiv[i].id.substring(0,3)=="cos"){ 
      cdiv[i].style.top=Math.cos((cid+x)*pl)*zf+"px";} 
   } 
x++; 
timer=setTimeout(mCur,200) 
} 
mCur(); 
var opt=gt($('opt'),"span"); 
for(i=0;i<opt.length;i++){ 
   opt[i].onmouseover=function(){this.style.background="#aaa";} 
   opt[i].onmouseout=function(){this.style.background="#888";} 
   } 
</script> 
</body> 
</html> 