前端知识小总结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));
宝剑锋从磨砺出，梅花香自苦寒来。
浙公网安备 33010602011771号