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; /*强制不换行*/
}
时间： 2024-07-29 19:05:04