JS数学揭密之【三角函数】

最新推荐文章于 2025-06-02 11:05:27 发布

montaellis

最新推荐文章于 2025-06-02 11:05:27 发布

阅读量1.9k

点赞数

分类专栏： javascript miaov

javascript 同时被 2 个专栏收录

33 篇文章

订阅专栏

miaov

13 篇文章

订阅专栏

本文展示了一系列基于HTML和JavaScript的交互式图形和运动效果，包括3苹果菜单、圆周运动、三维圆周运动、谷歌的睛、圆的碰撞、绘制sin图像等实例，通过动态变化展示几何形状的移动和变化过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3苹果菜单

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#div1{ width:100%; position:absolute; bottom:0; text-align:center;}
img{ width:64px;}
</style>
<script>
window.onload = function(){
	var aInput = document.getElementsByTagName('input');
	var oDiv = document.getElementById('div1');
	var aImg = oDiv.getElementsByTagName('img');
	
	
	document.onmousemove = function(ev){
		var ev = ev || window.event;
		
		for(var i=0;i<aImg.length;i++){
		
			var x = aImg[i].offsetLeft + aImg[i].offsetWidth/2;
			var y = aImg[i].offsetTop + aImg[i].offsetHeight/2 + oDiv.offsetTop;
			
			var b = ev.clientX - x;
			var a = ev.clientY - y;
			
			var c = Math.sqrt(Math.pow(b,2) + Math.pow(a,2));
			
			var scale = 1 - c/300;
			
			if(scale<0.5){
				scale = 0.5;
			}
			
			aInput[i].value = scale;
			
			aImg[i].style.width = scale * 128 + 'px';
			aImg[i].style.height = scale * 128 + 'px';
			
		}
		
	};
	
	
	
};
</script>
</head>

<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<div id="div1">
	<img src="img/1.png">
    <img src="img/2.png">
    <img src="img/3.png">
    <img src="img/4.png">
    <img src="img/5.png">
</div>
</body>
</html>

5圆周运动

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:20px; height:20px; background:red; position:absolute; left:800px; top:300px;}
.box{ border:1px #000 solid; position:absolute;}
</style>
<script>
window.onload = function(){
	var oDiv = document.getElementById('div1');
	var r = 100;
	var x = 700;
	var y = 300;
	
	var num = 0;
	
	setInterval(function(){
		
		num++
		
		//Math.sin( num*Math.PI/180 ) = a/r;
		//Math.cos( num*Math.PI/180 ) = b/r;
		
		var a = Math.sin( num*Math.PI/180 ) * r;
		var b = Math.cos( num*Math.PI/180 ) * r;
		
		oDiv.style.left = x + b + 'px';
		oDiv.style.top = y + a + 'px';
		
		var oBox = document.createElement('div');
		oBox.className = 'box';
		document.body.appendChild( oBox );
		
		oBox.style.left = oDiv.offsetLeft + 'px';
		oBox.style.top = oDiv.offsetTop + 'px';
		
	},30);
	
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

6三维圆周运动

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:20px; height:20px; background:red; position:absolute; left:800px; top:300px;}
.box{ border:1px #000 solid; position:absolute;}
</style>
<script>
window.onload = function(){
	var oDiv = document.getElementById('div1');
	var r = 100;
	var x = 700;
	var y = 300;
	
	var num = 0;
	
	setInterval(function(){
		
		num++
		
		//Math.sin( num*Math.PI/180 ) = a/r;
		//Math.cos( num*Math.PI/180 ) = b/r;
		
		var a = Math.sin( num*Math.PI/180 ) * r;
		var b = Math.cos( num*Math.PI/180 ) * r;
		
		oDiv.style.left = x + b + 'px';
		//oDiv.style.top = y + a + 'px';
		
		oDiv.style.width = a/100*30 + 50 + 'px';
		oDiv.style.height = a/100*30 + 50 + 'px';
		
		
		/*var oBox = document.createElement('div');
		oBox.className = 'box';
		document.body.appendChild( oBox );
		
		oBox.style.left = oDiv.offsetLeft + 'px';
		oBox.style.top = oDiv.offsetTop + 'px';*/
		
	},30);
	
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

8谷歌的眼睛

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#div1{ width:176px; height:91px; background:url(265.png) no-repeat; position:absolute; left:300px; top:200px;}
#div2{ border:2px #000 solid; position:absolute; left:115px; top:43px; border-radius:50%}
#div3{ border:2px #000 solid; position:absolute; left:135px; top:43px; border-radius:50%}
</style>
<script>
window.onload = function(){
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	
	var r = 5;
	var L2 = 115;
	var T2 = 43;
	var L3 = 135;
	var T3 = 43;
	
	document.onmousemove = function(ev){
		var ev = ev || window.event;
		
		change(oDiv2,ev.clientX,ev.clientY,L2,T2);
		change(oDiv3,ev.clientX,ev.clientY,L3,T3);
		
		function change(obj,x,y,l,t){
			
			var changeX = 0;
			var changeY = 0;
			
			var b = Math.abs( x - (obj.offsetLeft + obj.parentNode.offsetLeft) );
			var a = Math.abs( y - (obj.offsetTop + obj.parentNode.offsetTop) );
			
			if( x > obj.offsetLeft + obj.parentNode.offsetLeft && y < obj.offsetTop + obj.parentNode.offsetTop ){   //右上
			
				changeX = Math.sin(Math.atan(b/a)) * r;
				changeY = Math.cos(Math.atan(b/a)) * -r;
			
			}
			else if(x > obj.offsetLeft + obj.parentNode.offsetLeft && y > obj.offsetTop + obj.parentNode.offsetTop){   //右下
			
				changeX = Math.sin(Math.atan(b/a)) * r;
				changeY = Math.cos(Math.atan(b/a)) * r;
			
			}
			else if(x < obj.offsetLeft + obj.parentNode.offsetLeft && y > obj.offsetTop + obj.parentNode.offsetTop){   //左下
				changeX = Math.sin(Math.atan(b/a)) * -r;
				changeY = Math.cos(Math.atan(b/a)) * r;
			}
			else if(x < obj.offsetLeft + obj.parentNode.offsetLeft && y < obj.offsetTop + obj.parentNode.offsetTop){   //左上
			
				changeX = Math.sin(Math.atan(b/a)) * -r;
				changeY = Math.cos(Math.atan(b/a)) * -r;
			
			}
			
			obj.style.left = l + changeX + 'px';
			obj.style.top = t + changeY + 'px';
			
		}
		
	};
	
	//Math.atan2()
	
};
</script>
</head>

<body>
<div id="div1">
	<div id="div2"></div>
    <div id="div3"></div>
</div>
</body>
</html>

9圆的碰撞

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#div1{ width:200px; height:200px; background:red; border-radius:50%; position:absolute; left:700px; top:100px;}
#div2{ width:100px; height:100px; background:blue; border-radius:50%; position:absolute; left:100px; top:290px; }
</style>
<script>
window.onload = function(){
	
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	
	var sX1 = 0;
	var sY1 = 0;
	var sX2 = 10;
	var sY2 = 0;
	
	setInterval(function(){
		
		oDiv2.style.left = oDiv2.offsetLeft + sX2 + 'px';
		
		var a = Math.abs( (oDiv1.offsetLeft + 100) - (oDiv2.offsetLeft + 50) ); 
		var b = Math.abs( (oDiv1.offsetTop + 100) - (oDiv2.offsetTop + 50) );
		
		var c = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));
		
		if(c <= 150){
			//alert( '碰上了' );
			
			var ang = Math.asin( b/c );
			
			var s1 = Math.cos( ang ) * sX2;
			var s2 = Math.sin( ang ) * sX2;
			
			var x2change1 = Math.cos( ang ) * ( -s1 );
			var y2change1 = Math.sin( ang ) * s1;
			
			var x2change2 = Math.sin( ang ) * s2;
			var y2change2 = Math.cos( ang ) * s2;
			
			sX2 = x2change1 + x2change2;
			sY2 = y2change1 + y2change2;
			
			sX1 = Math.cos( ang ) * s1;
			sY1 = Math.sin( ang ) * ( -s1 );
			
		}
		
		oDiv2.style.left = oDiv2.offsetLeft + sX2 + 'px';
		oDiv2.style.top = oDiv2.offsetTop + sY2 + 'px';
		
		oDiv1.style.left = oDiv1.offsetLeft + sX1 + 'px';
		oDiv1.style.top = oDiv1.offsetTop + sY1 + 'px';
		
	},30);
	
};
</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

10绘制sin图像

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:50px; height:50px; background:red; position:absolute; left:100px; top:300px;}
.box{ border:1px #000 solid; position:absolute;}
</style>
<script>
window.onload = function(){
	var oDiv = document.getElementById('div1');
	
	var num = 0;
	var val = 100;
	
	var L = 100;
	var T = 300;
	
	//弧度控制 : left
	//sin控制 : top
	
	setInterval(function(){
		
		num++;
		
		oDiv.style.left = L + (num*Math.PI/180)*val + 'px';
		oDiv.style.top = T - Math.sin(num*Math.PI/180)*val + 'px';
		
		
		var oBox = document.createElement('div');
		oBox.className = 'box';
		document.body.appendChild( oBox );
		oBox.style.left = oDiv.offsetLeft + 'px';
		oBox.style.top = oDiv.offsetTop + 'px';
		
	},30);
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>