前端知识小总结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));

  

  

宝剑锋从磨砺出,梅花香自苦寒来。
原文地址:https://www.cnblogs.com/haimengqingyuan/p/6797300.html