css3
1.多栏布局
.box{
text-align:justify;
width: 600px;
background-color: pink;
-webkit-column-count: 10;/列数/
-webkit-column-gap: 5px;/列与列之间的间隙/
-webkit-column-rule: 1px solid red;/栏与栏之间增加一条间隔线/
/-webkit-column-width: 50px; 设置每一栏的宽度/
}
js
1.防抖
规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。函数防抖是某一段时间内只执行一次。
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
立即执行与非立即执行相结合
function debounce(func,wait,immediate){
let timeout;
return function(){
let context=this;
let arg=arguments;
if(timeout) clearTimeout(timeout);
if(immediate){
var calnow=!timeout;
timeout=setTimeout(function(func,wait){
timeout=null;
},wait);
if(calnow) func.apply(context,arg);
}
else{
timeout=setTimeout(function(){
func(context,arg);
},wait)
}
}
}
2.节流
函数节流是间隔时间执行。
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
时间戳版和定时器版
function throttle(func,wait.type){
if(type===1){
let previous=0;
}
else if(type===2){
let timeout;
}
return function(){
let context=this;
let args=arguments;
if(type===1){
let time=Date.now();
if(time-previous>=wait){
func.apply(context,arg);
previous=0;
}
else if(type===2){
if(!timeout){
timeout=setTimeout(function(){
timeout=null;
func.apply(context,args);
},wait);}
}
}
}
}
3.倒计时
function lock(){
var a=document.getElementById('clock');
var oldtime=new Date();
var oldtimes=Date.now();
var newtime=new Date('2019/08/03 15:00:00');
var newtimes=newtime.getTime();
var second=newtimes-oldtimes;
var day=parseInt(second/(2460601000));
second=second%(2460601000);
var hour=parseInt(second/(60601000));
second=second%(60601000);
var minte=parseInt(second/(601000));
second=second%(601000);
var sec=parseInt(second/1000);
var msec=parseInt(second%1000);
var str=hour+'小时'+minte+'分'+sec+'秒';
a.innerHTML=str;
}
setInterval(function(){
lock();
},1000)
4.判断是否是浏览器环境
5.html、css、js分别实现一个动画效果。
6.js的序列化和反序列化
js中的object转化为字符串
var last=obj.toJSONString();
var last=JSON.stringify(obj);
js中JSON字符串转化为Object
var obj=data.parseJSON();
var obj=JSON.parse(data);
7.实现一个弹出对话框组件
8.手机号码的正则表达式
function checknumber(){
var phone=document.getElementById('phone').value;
if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))) {
alert("手机号码有误，请重填")；
return false;
}
}
9.js将具有父子关系json文件转换成json树
<script>
var data = [{
"address": "芜湖弋江区",
"id": "1",
"latitude": 31.379996,
"longitude": 118.424139,
"name": "测试站点1",
"pId": "SK",
"siteClass": "DQ",
"siteType": "SK",
"updateDataTime": "2018-10-19 00:00:00"
}, {
"address": "芜湖三山区",
"id": "2",
"latitude": 31.369996,
"longitude": 118.414139,
"name": "测试站点2",
"pId": "GK",
"siteClass": "DQ",
"siteType": "GK",
"updateDataTime": "2018-10-19 00:00:00"
}, {
"id": "GK",
"name": "国控",
"pId": "0"
}, {
"id": "SK",
"name": "省控",
"pId": "0"
}]
function toTree(data) { // 删除 所有 children,以防止多次调用
data.forEach(function(item) {
delete item.children;
}); // 将数据存储为 以 id 为 KEY 的 map 索引数据列
var map = {};
data.forEach(function(item) {
map[item.id] = item;
}); // console.log(map);
var val = [];
data.forEach(function(item) { // 以当前遍历项，的pid,去map对象中找到索引的id
var parent = map[item.pId]; // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
if(parent) {
(parent.children || (parent.children = [])).push(item);
} else { //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
val.push(item);
}
});
return val;
}
console.log(toTree(data))
10.编写一个Javascript函数，传入一个数组，对数组中的元素进行去重并返回一个无重复元素的数组，数组的元素可以是数字、字符串、数组和对象。举例说明：
1. 如传入的数组元素为[123, "meili", "123", "mogu", 123],则输出：[123, "meili", "123", "mogu"]
2. 如传入的数组元素为[123, [1, 2, 3], [1, "2", 3], [1, 2, 3], "meili"],则输出：[123, [1, 2, 3], [1, "2", 3], "meili"]
3. 如传入的数组元素为[123, {a: 1}, {a: {b: 1}}, {a: "1"}, {a: {b: 1}}, "meili"],则输出：[123, {a: 1}, {a: {b: 1}}, {a: "1"}, "meili"]
function qurepeated(arr){
return arr=[...new Set(arr.map(n=>JSON.stringify(n)))].map(n=>JSON.parse(n));
}
11.实现懒加载
懒加载主要是针对图片
document.documentElement.clientHeight//获取屏幕可视区域的高度
element.offsetTop//获取元素相对于文档顶部的高度
document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
如果：offsetTop-scroolTop<clientHeight，则图片进入了可视区内，则被请求。
element.getBoundingClientRect()//返回元素的大小及其相对于视口的位置
