常用的几个小函数详解编程语言

用原生js实现的几个比较常用的小函数

1、产生随机色

function color(){ 
return   "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"; 
}

2、添加类名、移除类名

    function hasClass(elements, cName) { 
      return !!elements.className.match(new RegExp("(//s|^)" + cName + "(//s|$)")); 
     // ( //s|^ ) 判断前面是否有空格 (//s | $ )判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断  
    }; 
   //添加类名 
    function addClass(elements, cName) { 
      if(!hasClass(elements,cName)) { 
        elements.className += " " + cName; 
     } 
    } 
  //移除类名 
    function removeClass(elements, cName) { 
     if(hasClass(elements, cName)) { 
       elements.className = elements.className.replace(new RegExp("(//s|^)" + cName + "(//s|$)"), " ");  
      //replace方法是替换  
      } 
    }

 3、判断某天是该年第几天

function dayOfYear(year,month,day){ 
   var a=[0,31,28,31,30,31,30,31,31,30,31,30,31]; 
   if (year%4==0&&year%100!=0||year%400==0) { 
    a[2]=29; 
   } 
   var sum=day; 
   for(var i=0;i<month;i++){ 
    sum+=a[i]; 
   } 
   return sum; 
  }

4、产生5个不重复的数字加入到数组中

//随机数 
  function getAutoNum(max, min) { 
   return parseInt(Math.random() * (max - min + 1) + min); 
  } 
  function lottery() { 
   var arrayNum = []; 
   while(arrayNum.length < 5){ 
    var num=getAutoNum(23,1),i=0; 
    for (var i = 0;i<arrayNum.length;i++) { 
     if (arrayNum[i]==num) { 
      break; 
     } 
    } 
    if (i<==arrayNum.length) { 
     arrayNum.push(num); 
    } 
   } 
  return arrayNum; 
  }

另一种方法

var array = []; 
  for(var i = 0;; i++) { 
   var num = parseInt(Math.random() * (23 - 0 + 1) + 0); 
   //检验随机数是否重复 
   var isRepeat = true; 
   //如果重复,继续生成下一个随机数 
   document.write(num + " "); 
   for(var j = 0; j < array.length; j++) { 
    if(array[j] == num) { 
     isRepeat = false; 
   } 
   } 
   //不重复加入到数组中 
   if(isRepeat) { 
    array.push(num); 
   } 
   if(array.length == 5) { 
    break; 
   } 
  }

5、获取属性的数值 (去掉单位)

//获取属性的数值  eg:div.style.width的值 
  function getStyle(obj,attr){ 
   if (obj.currentStyle) { 
    return obj.currentStyle[attr];//针对IE 
   } else{ 
//    alert(attr); 
    return getComputedStyle(obj,false)[attr];//针对除IE外的浏览器 
   } 
  }

6、弹性摩擦运动框架

function startMove(iTarget) { 
   clearInterval(timer); 
   timer = setInterval(function() { 
    speed+=(iTarget-div.offsetLeft)/5; 
    speed*=0.7; 
    //最佳组合 5和0.7; 
    //摩擦力 
    div.style.left = div.offsetLeft + speed + 'px'; 
   }, 20); 
  }

7、两个对象的碰撞检测

  //这个方法的使用前提是:两个对象必须有x,y,w,h属性 
  function checkCrash(obj1,obj2){ 
   //先求临界值 
   var disX=obj1.w/2 
   +obj2.w/2; 
   var disY=obj1.h/2 
   +obj2.h/2; 
   //计算两个矩形中心点的距离 
   var centerX=Math.abs((obj1.x+obj1.w/2) 
   -(obj2.x+obj2.w/2)); 
   var centerY=Math.abs((obj1.y+obj1.h/2) 
   -(obj2.y+obj2.h/2)); 
   if (centerX<disX&&centerY<disY) { 
    return true; 
   }else{ 
    return false; 
   } 
  }

 canvas画多边形

  eg:画五角星 

drawNrect(圆心,圆心,半径,几角,正n角星/正n边形);

drawNrect(200,200,100,5,true);
   
        function drawNrect(x,y,r,n,bool){ 
            var n = n+1; 
            pen.beginPath(); 
            for(var i = 0;i<n;i++){ 
                //Math.cos()需要传入弧度,将i度转化为弧度(i*Math.PI/180); 
                pen.lineTo(x + r*Math.cos(i*Math.PI/((n-1)/2)),y+r*Math.sin(i*Math.PI/((n-1)/2))); 
                //注释下面这句就画正n边形,加上就是画正n角星; 
                if(bool){ 
                        pen.lineTo(x + 2*r*Math.cos((i+0.5)*Math.PI/((n-1)/2)),y+2*r*Math.sin((i+0.5)*Math.PI/((n-1)/2))); 
                } 
             
            } 
            pen.stroke(); 
        }

 

原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/13858.html

(0)
上一篇 2021年7月19日 16:18
下一篇 2021年7月19日 16:18

相关推荐

发表回复

登录后才能评论