前端平时总结

1、图片需要中心截取CSS

img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

2、前端放大图片效果

// 图片放大
#address_div1:hover .address_img1 img {
    transform: scale(1.2);
}
.address_img1 img {
    transition: all 1s;
    overflow: hidden;
}
// 父级设置不能溢出
#address_div1 {
    overflow:hidden;
}

3、js获取当前时间方法

// 参考
// https://www.cnblogs.com/sky6699/p/7206383.html
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
// 例子： 
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "H+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

// 调用： 
var time1 = new Date().Format("yyyy-MM-dd");
var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");  

4、一行文字溢出使用省略号

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

5、ajax通用方法

// 记得要加 contentType: "application/json;charset=utf-8",
$.ajax({
      type: "POST",
      url: apiHeader+"getHomeImg",
      data: JSON.stringify({
          "id": id
          }),
      contentType: "application/json;charset=utf-8",
      dataType: "json",
      success: function (res) {
        console.log(res)
        $("#ico").attr({ href : res.data.ico });
      }
    });

6、jquery常用方法

// 给link元素赋值
$("#ico").attr({ href : res.data.ico });
// 修改元素的css
$("div").css({"background-color":"yellow","font-size":"200%"});

7、ajax调用接口获取到数据之后将dom添加到html

// .append()方法
function getAbout(apiHeader){
    $.ajax({
      type: "POST",
      url: apiHeader+"getAbout",
      data: JSON.stringify({
          "id": id
          }),
      contentType: "application/json;charset=utf-8",
      dataType: "json",
      success: function (res) {
        console.log(res.data)        
        var html = '';
        res.data.forEach(function(element){
          //console.log(element)
          html += '<div><a href="about.html?id='+element.id+'">'+element.title+'</a></div>'
        })
        $("#footer-about-us").append(html)
      }
    });
  }

8、获取uri传值通用js方法

// 调用
    let id = getParams("id");
// 方法
function getParams(name) {
    var url = location.href;
    var start = url.indexOf("?")+1;
    if (start==0) {
        return "";
    }
    var value = "";
    var queryString = url.substring(start);
    var paraNames = queryString.split("&");
    for (var i=0; i<paraNames.length; i++) {
        if (name==getParameterName(paraNames[i])) {
            value = getParameterValue(paraNames[i])
        }
    }
    return value;
}

function getParameterName(str) {
    var start = str.indexOf("=");
    if (start==-1) {
        return str;
    }
    return str.substring(0,start);
}

function getParameterValue(str) {
    var start = str.indexOf("=");
    if (start==-1) {
        return "";
    }
    return str.substring(start+1);
}

9、ios失焦，位置错误

// 参考  https://www.cnblogs.com/wr20190131/p/10855873.html
方法
input 触发 事件
<input onBlur={this.onBlur}>
onBlur = () =>{
    this.goBack();
}
var u = navigator.userAgent;
  var flag;
  var myFunction;
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isIOS) {
    document.body.addEventListener('focusin', () => {  //软键盘弹起事件
      flag = true;
      clearTimeout(myFunction);
    })
    document.body.addEventListener('focusout', () => { //软键盘关闭事件
      flag = false;
      if (!flag) {
        myFunction = setTimeout(function () {
          window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变，并不一定要回到页面顶部)

        }, 200);
      } else {
        return
      }
    })
  } else {
    return
  }

10、ios和安卓，尽量用absolute少用fixed

11、前台div右上角添加标签方法

参考 http://www.webfront-js.com/articaldetail/15.html

 

12、多行文本省略号显示

overflow: hidden;
 
text-overflow: ellipsis;
 
display: -webkit-box;
 
-webkit-line-clamp: 2; // 行数
 
-webkit-box-orient: vertical;

一行文本

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;