js,scss常用的方法

获取网页参数

 function getExtraDataByKey(key) {
        var params = {},
            query = window.location.search.substring(1),
            arr = query.split('&'),
            rt;

        if (arr && Array.isArray(arr)) {
            arr.forEach(function (item, i) {
                var tmp = item.split('='),
                    key = tmp[0],
                    val = tmp[1];

                if (typeof params[key] === 'undefined') {
                    params[key] = val;
                } else if (typeof params[key] === 'string') {
                    params[key] = [params[key], val];
                } else {
                    params[key].push(val);
                }
            });
        }

        rt = key ? params[key] : params;

        return rt;
    };

scss 根据不同的index设置不同的背景色

$bgcolor: (
    0: (
        #58b797,
        #c6efe8,
        #e7f9f6,
        rgba(88, 183, 151, 0.35),
        #4cb8a6
    ),
    1: (
        #dc5b5b,
        #fdd9d9,
        #fff1f1,
        rgba(220, 91, 91, 0.35),
        #f88383
    ),
    2: (
        #2e6be5,
        #dae6ff,
        #eaf1ff,
        rgba(46, 107, 229, 0.25),
        #6497ff
    ),
    3: (
        #f79042,
        #ffe4cb,
        #fff2e6,
        rgba(247, 144, 66, 0.35),
        #ffa765
    ),
    4: (
        #46b3e1,
        #c9ecfa,
        #e9f9ff,
        rgba(70, 179, 225, 0.35),
        #78d2f8
    )
);

@each $type, $color in $bgcolor {
    .theme-#{$type} {
        position: relative;

        .li-title {
            &::before {
                background-color: nth($color, 1);
            }
        }
        .li-main {
            &:before {
                background-color: nth($color, 1);
            }

            span {
                background: nth($color, 5);
            }

            .li-left {
                position: relative;
                background-color: nth($color, 2);
                box-shadow: 2px 0px 4px nth($color, 4);
            }

        }
    }
}

vue+scss设置背景图片

.container{
  background-image: var(--bgLogin);
}
vue
data:{ bgLogin: 'url('+require('./images/bg_login.png')+')', }

单行隐藏,多行隐藏

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


div {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

名字脱敏

function desensitizeName(name) {

  if (name.length <= 1) {

    return name;

  }

  var desensitizedName = name[0] + '*'.repeat(name.length - 2) + name[name.length - 1];

  return desensitizedName;

}


var name = "张三四五六";

var desensitizedName = desensitizeName(name);

console.log(desensitizedName); // 输出:张****六

不同格式时间互相转换

时间戳/Date对象转时间字符串
function stampTotime(timestamp) {
    let date = new Date(timestamp);

    // 获取年、月、日、小时、分钟、秒
    let year = date.getFullYear();
    let month = date.getMonth() + 1; // 月份从0开始,所以需要加1
    let day = date.getDate();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();

    // 格式化输出
    let formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours
        .toString()
        .padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

    return formattedDate;
}
stampTotime(1633072800000)
字符串转时间对象
function stringTodate() {
    let dateString = '2020-10-01 10:01:06';

    // 将空格替换为 'T'
    dateString = dateString.replace(' ', 'T');
    let dateObject = new Date(dateString);

    console.log(dateObject);

    return dateObject;
}

stampTodate()

你可能感兴趣的:(javascriptcss)