前端知识小总结5
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
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{ width: 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));
宝剑锋从磨砺出,梅花香自苦寒来。