zoukankan      html  css  js  c++  java
  • 前端知识小总结5

    1--css实现水平垂直居中

    <style type="text/css">
        .box {
             300px;
            height: 300px;
            background: #111;
            display: flex;
            align-items: center;      /* 垂直居中 */
            justify-content: center;   /* 水平居中 */
        }
        .box .con {
             100px;
            height: 100px;
            background-color: #fff;
        }
        </style>
    <div class="box">
        <div class="con"></div>
    </div>
    
    <style type="text/css" rel="stylesheet">
            .box{
                position: absolute;
                left:50%;
                top:50%;
                background-color: #cccccc;
                transform: translate(-50%,-50%);
                /*//实现块元素百分比下居中*/
            }
            .con{
                font-size: 60px;
            }
        </style>
    </head>
    <div class="box">
        <div class="con">haaaaaaaas</div>
    </div>
    
    <style type="text/css">
             .box{
                 position: relative;
                 background-color: #eeeeee;
                  100px;
                 height:100px;
             }
             .con{
                 position:absolute;
                 50px;
                 height:50px;
                 top:50%;
                 left:50%;
                 margin-left:-25px;
                 margin-top:-25px;
                 background-color: #74DEF8;
             }
         </style>
     </head>
    
      <div class="box">
        <div class="con"></div>
      </div>
    
     <style type="text/css">
            .box{
                position:relative;
                background-color: #eeeeee;
                100px;
                height:100px;
            }
            .con{
                position: absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                margin:auto;
                background-color: #00CCCC;
                50px;
                height:50px;
            }
        </style>
    </head>
    
    <div class="box">
        <div class="con"></div>
    </div>
    

    2--

    <ul></ul>
    <script type="text/javascript">
        var oul=document.querySelector("ul");
        for(var i=0;i<6;i++){
            var oli=document.createElement("li");
            oli.innerHTML="test"+(i+1);
           oul.appendChild(oli);
      }
    </script>
    
    <script>
          var ull=document.createElement('ul');     
     for (var i = 0; i < 6; i++) {
            var lii=document.createElement('li');
            ull.appendChild(lii);
            lii.innerHTML="test"+(i+1);
            document.body.appendChild(ull);
        }
    </script>
    

     3--ajax请求时get与post区别

    (1)get请求将参数跟在URL后直接进行传递;而post请求则将参数作为http消息的内容发送给服务器。

    (2)get请求传输数据大小较小;而post请求传输数据大小相对较大。

    (3)get请求数据会被浏览器缓存起来,可能会造成一定的安全问题;而post请求相对安全。

    (4)

    4--split()、join()

    split():将一个字符串分割为子字符串,将结果作为字符串数组返回,若字符串中存在多个分割符号,也可多次分割。

    join():把数组中的所有元素放入一个字符串中。

    5--判断一个变量是否为数组

    (1)
    var array = new Array("1", "2", "3", "4", "5");
    console.log(array instanceof Array);//true
    (2)
    var array = new Array("1", "2", "3", "4", "5");
    console.log(array.constructor == Array);//true
    (3)
    function isArrayFn (o) {
        return Object.prototype.toString.call(o) === '[object Array]';
    }
    var arr = [1,2,3,1];
    console.log(isArrayFn(arr));// true
    
    ps:call改变toString的this引用为待检测的对象,返回此对象的字符串表示,
    然后对比此字符串是否是'[object Array]',以判断其是否是Array的实例。
    (4) var arr = [1,2,3,1]; var arr2 = [{ abac : 1, abc : 2 }]; function isArrayFn(value){ if (typeof Array.isArray === "function") { return Array.isArray(value); }else{ return Object.prototype.toString.call(value) === "[object Array]"; } } console.log(isArrayFn(arr));// true console.log(isArrayFn(arr2));// true

     6--有一数组a,新建一个数组b,b从a中一次随机取一个元素,取完为止

    function select(arr){
        var arrNew=[];
        var len = arr.length;
        for(var i=0;i<len;i++){
            var index = parseInt(Math.random()*arr.length);
            arrNew.push(arr[index]);
            arr.splice(index, 1);
        }
        return arrNew;
    }
    var arr = [1,32,31,10,8,9];
    console.log(select(arr));
    

     7--将字符串逆序排列

    function nx(str){
        /*var arr=str.toString();*/
        for(var i=str.length-1;i>=0;i--){
            console.log(str[i])
        }
    }
    var str="abcdefg";
    nx(str);
    

     8--如何将字符串转换为数字

    function strToNum(str)
    {
        var splitstr = str.split('.');//以小数点为分割标准
        console.log(splitstr);//[ '124345', '45678' ]
        var num = 0;
        for(var key in splitstr[0]) { //遍历整数部分
            num =  10*num+(splitstr[0][key] - '0');
    //“1”的ascii码为49,“0”的ascii码为48,从而得到数字1 } var num1 = 0 ; for(var key in splitstr[1]){ //遍历小数部分 num1 = 10*num1 +(splitstr[1][key] - '0'); } if(splitstr.length == 2){ //包含小数的情况 num1 /= Math.pow(10,splitstr[1].length);
    } return num +num1; } console.log(strToNum("124345.45678"));//124345.45678

     9--如何将浮点数点左边的每三位添加一个逗号,如120000.11转化为120,000.11

    function test(str)
    {
        var  strArr = str.split(".");
        var arr = new Array();
        str = strArr[0];
        str = str.split("").reverse().join("");
        console.log(str);    //987654321
        for(var key in str){
            if( (key+1)%3 == 0){
                arr.push(str.substr(key-2,3));
            }
        }
        console.log(arr);    //[ '987', '654', '321' ]
        str = arr.join(",");
        strArr[0] = str;
        str = strArr.join(".");
        return str;
    }
    console.log(test("123456789.9856"));//987,654,321.9856
    

     ps:

    substring(start,end):用于提取两个指定下标之间的字符,包括start处的字符,不包括end处的字符。

    substr(start,[,length]):用于返回一个从指定位置开始的指定长度的子字符串

    10--超出文本省略号表示

    <p>haha生活即将如你所愿,不放弃不抛弃。你要相信你的努力终将会有回报。自弃者天不救,自救者打不倒。
    haha生活即将如你所愿,不放弃不抛弃。你要相信你的努力终将会有回报。自弃者天不救,自救者打不倒。haha
    生活即将如你所愿,不放弃不抛弃。你要相信你的努力终将会有回报。自弃者天不救,自救者打不倒。</p> css样式表: p{ 50px; /*必须设置宽度*/ overflow: hidden; /*溢出隐藏*/ text-overflow: ellipsis; /*以省略号...显示*/ white-space: nowrap; /*强制不换行*/ }

     11--不借助第三个变量的情况下,将两个变量互换

    (1)
    function swap(a, b)
    {
        a = a + b;
        b = a - b;
        a = a - b;
        return {"a":a,"b":b};
    }
    console.log(swap(1,2 ));
    (2)
    function swap(a, b)
    {
        a = a ^ b;
        b = a ^ b;
        a = a ^ b;
        return {"a":a,"b":b};
    }
    console.log(swap(1,2 ));
    (3)
    function swap(a, b)
    {
        a = a * b;
        b = a / b;
        a = a / b;
        return {"a":a,"b":b};
    }
    console.log(swap(1,2 ));
    

    12--var array=[{a:4,b:5},{a:2,b:3},{a:5,b:2},{a:0,b:5}],实现对数组的降序排列

    function ArrayReverse(arr)
    {
        arr.sort(function(x,y){
            return x.a == y.a? x.b - y.b: x.a - y.a;
        })
        return arr;
    }
    var array=[{a:4,b:5},{a:4,b:3},{a:5,b:2},{a:0,b:5}];
    console.log(ArrayReverse(array));
    

    13--var a=[1,3,4,0,2,55,66,99],使用Math.max取出最大值,不用遍历

    function GetMax(arr)
    {
        if( arr.length == 1){
            return arr[0];
        }
        for( var i = 0; i< arr.length/2; i++){  //两头相对应数进行比较,取较大者
            arr[i] = Math.max(arr[i], arr[arr.length -1 -i]);
        }
        arr = arr.slice(0, arr.length/2);  //切取循环后前面较大的数列
        return GetMax(arr);  //递归
    }
    var a=[1,3,4,0,2,55,66,99];
    console.log(GetMax(a));
    

    14--编写一个js函数fn,该函数有一个参数n,其返回值是一个数组,该数组内是n个随机且不重复的整数,且你的整数范围是[2,32]

    function fn(n){
        var arr=[];
        var mp={};
        while(1){
            var x=parseInt(Math.random()*(32-1)+2);
            if(!mp[x]){    //利用mp判断是否已经存在x值
                arr.push(x);
                mp[x] = 1;
            }
            if(Object.getOwnPropertyNames(mp).length == n) {
                return arr;
            }
        }
    }
    console.log(fn(8));
    

      

      

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    cnetos7安装mysql并开启慢日志查询
    ansible-playbook安装zabbix_server,agent监控
    mysql性能优化之服务器参数配置-内存配置
    什么影响了mysql的性能-存储引擎层
    什么影响了mysql的性能-硬件资源及系统方面优化
    redis基本操作使用
    cmd下操作MySQL
    Win10安装MySQL
    Linux 操作
    PySpark—DataFrame笔记
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/6797300.html
Copyright © 2011-2022 走看看