前端知识小总结5

Posted 2020-09-16

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

<style type="text/css">
    .box {
        width: 300px;
        height: 300px;
        background: #111;
        display: flex;
        align-items: center;      /* 垂直居中 */
        justify-content: center;   /* 水平居中 */
    }
    .box .con {
        width: 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;
             width: 100px;
             height:100px;
         }
         .con{
             position:absolute;
             width: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;
            width:100px;
            height:100px;
        }
        .con{
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
            background-color: #00CCCC;
            width: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
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{
    width: 50px;  /*必须设置宽度*/
    overflow: hidden;  /*溢出隐藏*/
    text-overflow: ellipsis; /*以省略号...显示*/
    white-space: nowrap;  /*强制不换行*/
}