zoukankan      html  css  js  c++  java
  • 常用的几个小函数

    用原生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();
            }
  • 相关阅读:
    springcloud 学习笔记
    一文领悟HTTPS密钥为什么这样传输
    静态代码扫描工具PMD参数过程简介与JCommander 以及如何扩展
    静态代码扫描工具PMD分析XML的核心源码解读(从core主入口到子语言解析)
    Jenkins出现SVNException:E175002
    一个第三方登录的流程
    爬虫入门(三)爬取b站搜索页视频分析(动态页面,DBUtils存储)
    09 元素等待机制
    测试观点
    什么是请求
  • 原文地址:https://www.cnblogs.com/simba-lkj/p/6057116.html
Copyright © 2011-2022 走看看