论js结合数学的应用

　　js是一门应用极其广泛的语言，它直接决定着一个前端工程师水平以及工资的高低，今天，本人这个前端菜鸟就来总结写js怎样结合数学进行应用。

一：结合勾股定理进行苹果菜单的开发

首先来介绍几个常用的公式

1：平方公式 Math.pow(a,b);代表的是a的b次方；

2：开方公式 Math.sqrt(a,b)代表的是a开b次方；

下面就以苹果实例的开发来讲述其应用

这是html代码

 1 <input typ="text">
 2 <input typ="text">
 3 <input typ="text">
 4 <input typ="text">
 5 <input typ="text">
 6 <div id="div1"> 
 7     <img src="img/1.png" /> 
 8     <img src="img/2.png" /> 
 9     <img src="img/3.png" /> 
10     <img src="img/4.png" /> 
11     <img src="img/5.png" /> 
12 </div>

这个是简单的css代码

 1 * {
 2     margin: 0px;
 3     padding: 0px;
 4 }
 5 #div1 {
 6     position: absolute;
 7     bottom: 0px;
 8     text-align: center;
 9      100%;
10 }
11 img {
12      64px;
13 }

上面你的两种都很简单，下面就介绍本次的最重要的js代码

<script>
window.onload=function(){
    var oInput=document.getElementsByTagName("input");
    var oDiv=document.getElementById("div1");
    var oImg=oDiv.getElementsByTagName("img");
    
    document.onmousemove=function(ev){
        var ev=ev||window.event;
        for(var i=0;i<oImg.length;i++){
            var a=oImg[i].offsetLeft+oImg[i].offsetWidth/2;
            var b=oImg[i].offsetTop+oImg[i].offsetHeight/2+oDiv.offsetTop;
            var x=ev.clientX-a;
            var y=ev.clientY-b;
            var c=Math.sqrt(Math.pow(x,2)+Math.pow(y,2))
            var scale=1-c/300;
            if(scale<0.5){
                scale=0.5
                }
            oInput[i].value=scale;
            oImg[i].style.width=scale*128+"px";
            oImg[i].style.height=scale*128+"px";
            
            }
        
            
        }
    }
</script>

实现完上述的代码之后就会显示出下面的实例效果

当鼠标距离那个比较近，就会将图片以一定的比例放大，由于这里没办法显示的太明显，只能讲图片将就着这么显示。但是方法是一样的

二：js与三角函数的结合

1：正弦函数 Math.sin();

2: 余弦函数Math.cos();

html代码，使用该代码就能写出一个物体从围绕着y轴进行圆周运动的实例。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 {
 8      20px;
 9     height: 20px;
10     background: red;
11     position: absolute;
12     top: 300px;
13     left: 800px;
14 }
15 .box{border:1px solid #000;position:absolute;}
16 </style>
17 <script>
18 window.onload=function(){
19     var oDiv=document.getElementById("div1");
20     var r=100;
21     var x=700;
22     var y=300;
23     num=0;
24     setInterval(function(){
25     num++;
26     var a=Math.sin(num*Math.PI/180)*r;
27     var b=Math.cos(num*Math.PI/180)*r;
28     
29     oDiv.style.left=b+x+"px";
30     oDiv.style.width=a/100*30+50+"px";
31     oDiv.style.height=a/100*30+50+"px"; 
32     },30)
33     
34 }
35 
36 </script>
37 </head>
38 
39 <body>
40 <div id="div1"></div>
41 </body>
42 </html>