首页 > 代码库 > 前端知识小总结5

前端知识小总结5

2024-09-18 22:13:40   208人阅读

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));// truecall改变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));// trueconsole.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;  /*强制不换行*/}

 

前端知识小总结5


联系
我们