数学计算和几何的结合运用

最新推荐文章于 2021-02-10 23:16:41 发布

唐伯虎電蚊香

最新推荐文章于 2021-02-10 23:16:41 发布

阅读量327

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_36602186/article/details/80751335

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

模拟截图

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>随机数</title>
        <style>
        	#circular{
        		width: 400px;
        		height: 400px;
        		margin:50px auto;
        		border:1px solid rgba(173, 31, 31, 0.19);
        		border-radius:50%;
        		position: relative;
        	}


			#sun{
				position: absolute;
				height: 100px;
				width: 100px;
				background:url('./images/sun.png') no-repeat 100% 100%;
				top:50%;
				left:50%;
				margin-top: -50px;
				margin-left:-50px;
			}

			#earth{
        		position: absolute;
        		height: 80px;
        		width: 80px;
        		margin-top: -40px;
        		margin-left:-40px;
        		border-radius:50%;
        		background:url('./images/earth.png') no-repeat;
        		background-size:cover;
        	}

        	#moon{
        		position: absolute;
        		height: 50px;
        		width: 50px;
      			margin-top: -50px;
      			margin-left:-50px;
        		border-radius:50%;
        		background:url('./images/moon.png') no-repeat;
        		background-size:cover;
        	}
        </style>
    </head>
    <body>

    	<div id='circular'>
    		<span id='earth'>
    			<span id="moon"></span>
    		</span>
    		
    		<div id="sun"></div>
    	</div>
    </body>
</html>
<script>
	/*Math.random()--------------------------------------------------------*/
	//Math.random()  返回随机0~1 之间的随机数  不包含1
	// for(var i = 0; i < 1000; i++){
	// 	console.log(Math.random()*10)
	// }



	//生成 指定范围的值
	function randomNum(start,end){

		return Math.random()*(end-start) + start;
	}


	var num = randomNum(1,50);	
	


	console.log('随机1-50 范围取值：' + num)

	/*Math.round()--------------------------------------------------------*/
	//四舍五入
	
	var num2 = Math.round(num);
	console.log('四舍五入：' +num2);



	/*Math.ceil()--------------------------------------------------------*/
	//向上取整
	var num3 = Math.ceil(num);

	console.log('向上取整：' + num3);


	/*Math.floor()--------------------------------------------------------*/
	//向下取整
	var num4 = Math.floor(num);

	console.log('向下取整：' + num4);


	/*Math.abs()--------------------------------------------------------*/
	//绝对值
	var num5 = Math.abs(-num);
	console.log(`求-${num3}的绝对值：${num5}`);

	/*Math.pow()--------------------------------------------------------*/
	//求x的y 次幂 
	var n = Math.pow(10,3);
	// n = 10*10*10
	console.log(`10的3次方为：${n}`);

	/*Math.sqrt()--------------------------------------------------------*/
	//求根 
	var n2 = Math.sqrt(9);
	console.log(`求9根：${n2}`)


	/*Math.max(num1,num2,num3,num4)--------------------------------------------------------*/
	//返回最大值
	var n3 = Math.max(65,21,321,5);
	console.log(`返回参数中'65,21,321,5'的最大值为:${n3}`);


	/*Math.min(num1,num2,num3,num4)--------------------------------------------------------*/
	//返回最小值
	var n3 = Math.min(65,21,321,5);
	console.log(`返回参数中'65,21,321,5'的最小值为:${n3}`);





	/*number.toFixed(num)-----------------------------------------------------*/
	//保留指定 num 位数的小数 最后一位四舍五入
	//var number = 10.134564;
	var number = 10.135564;
	number = number.toFixed(2)
	console.log(number);


	/*Math.sin(弧度)-----------------------------------------------------*/
	//Math.sin（弧度） 正弦 对边比斜边 
	//var number = 10.134564;
	

	var Around  = {
		'oCircle':'',
		'oEarth':'',
		'oMoon':'',
		'deg':'',
		'oEarthR':'',//模拟地球轨道半径
		'oMoonR':'',//模拟月球轨道半径
		init : function(){
			this.deg = 0;//角度
			this.deg2 = 100;//角度
			this.oCircle = document.querySelector('#circular');
			this.oEarth  = document.querySelector('#earth');
			this.oMoon   = document.querySelector('#moon');


			this.oEarthR =  parseInt(getComputedStyle(this.oCircle).width)/2;//半径

			var time  = setInterval(function(){
				that = this.Around;

				that.around(that.oEarth,that.oEarthR,'deg2')
			}, 1000/48)	
			

			var time2  = setInterval(function(){
				that = this.Around;
				that.around(that.oMoon,80,'deg')
			}, 10)	
		},
		around : function(dom,r,deg){
			Around[deg]++
			var deg = Around[deg];
			/*计算思路
                一.已知条件  半径(r)  和   角度(deg);

                二.计算角度的弧度（h） 已知 1弧度 = 弧长/半径  

                三.计算弧长  弧长 = 周长(2πr)*（ deg/360 ）
                    简化公式  2πr*deg/360 == πr*deg/180

                四.根据 三角函数 sin(弧度) = 对边 / 斜边（ r ）
                    已知 sin(弧度) = sin(πr*deg/180)    斜边 = 半径 r
                    变换公式
                        对边 = sin(πr*deg/180) * r
                    ocs(弧度) = 邻边 / 斜边
                        邻边 = cos(πr*deg/180) * r

                五. y 轴坐标   = 半径  - 对边；
                    x 轴坐标   = 半径  + 邻边
            */

			var x = Math.sin(deg*Math.PI/180)*r;
			var y = Math.cos(deg*Math.PI/180)*r;
			dom.style.left = r + y + 'px';
			dom.style.top  = r - x + 'px';
			return Around.around;
		}
	}

	Around.init();


	

</script>

唐伯虎電蚊香

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数学计算和几何的结合运用

模拟截图&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;随机数&lt;/title&gt; &lt;style&gt; #circul
复制链接

扫一扫

专栏目录