原生技巧篇

图片优化

<img src="image.jpg" loading="lazy" alt="">
    
    lazy
延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义。

可以直接在img mdn 中查看

滑动注册动态

https://dev.to/haycuoilennao19/22-sliding-form-for-website-3m8k

angular.js 想用vue,react怎么办

https://github.com/ngVue/ngVue
https://github.com/ngReact/ngReact

代码片段

* Codepen
* Codesandbox
* CSS-Tricks
* Hakim .se
* Code My UI
* CreativesFeed
* Bootsnipp
* 30 seconds of code
* 30 Seconds of CSS
* Stackoverflow
* Code to go
* Tweetsnippet
* GitHub
* W3 Schools
* EnjoyCSS
* Web Code Tool

30s

位置分组

[ [1, 2], [2, 3], [4, 5]]
转化
[[1,2,4],[2,3,5]] 并且求和
操作
fn=(a,b,c)=>a+b+c

案例

let arr = [[1, 2], [2, 3], [4, 5]];
let fn = (a, b, c) => a + b + c
let b = Array.from(
    {length: Math.max(...arr.map(v => v.length))},
    (_, i) => fn(...arr.map(v => v[i])));

解析 Array.from 的妙用
Array.from(
    {length: 2},
    (_,i)=>arr.map(v=>v[i])
);
// [ [ 1, 2, 4 ], [ 2, 3, 5 ] ]
其实解析的结果类似
for (let i = 0; i < 2; i++) {
    for (let j = 0; j < arr.length; j++) {
        console.log(i);
    }
}
// 0 0 0 1 1 1

fn(...[1,2,3])
等于 
fn(1,2,3)

前一天

setDate() 指定一个日期对象的天数。
getDate() 查询天数

let d = new Date();
d.setDate(d.getDate()-1);
console.log(d.toISOString().split('T')[0]);
// 2021-02-16

truncateString

格式化JSON

console.log(JSON.stringify({name:'xxx',age:3},null,'\t'))

tap 事件出现的bug

        touch-action: none;
// throttle 是节流事件
 clickMore: throttle(function(){
      this.stop = !this.stop;
      
    },1000)

ios fixed兼容性问题

 html,body{
         scroll-behavior: smooth;
         margin:0;
         padding:0;
         width: 100%;
         height: 100%;
         overflow: scroll;
     }

arguments

剩余参数、默认参数和解构赋值参数的存在不会改变 arguments对象的行为

function func(a = 55) {
  a = 99; // updating a does not also update arguments[0]
  console.log(arguments[0]);
}
func(10); // 10

自执行函数

// var a = 1;
(function a () {
    a = 2;
    console.log(a);
})();
// 只执行函数,如果函数名和全局变量冲突,应该打印自身函数

function add(){
    add=10
    console.log(add);
}
add()
//我们发现这种情况打印的是10

函数表达式

var funcName = function abc() {}; 
console.log(funcName); // 打印函数体function abc(){}
console.log(abc); // 报错(abc is not defined)

在这个函数表达式中，函数名称为abc，其实上，这个名称abc变成了函数内部的一个局部变量，并且指代函数对象本身，在abc函数内部打印abc的打印结果是abc函数体本身。

var funcName = function abc() {
    console.log(abc); // 打印结果是function abc() {console.log(abc)}
};

匿名函数表达式顾名思义就是没有名字的函数表达式，一般情况下，我们所说函数表达式就指匿名函数表达式，因为函数表达式会忽略函数的名称，会变成匿名函数表达式，不如直接写成匿名函数表达式。

Firefox

https://www.mozilla.org/en-US/firefox/developer/

Firefox 有更好的css 开发工具,其他的功能还是Chrome比较好

max-content

内容撑开宽度

 .content{
        max-width: max-content;
        margin:0 auto;
        background-color: khaki;
    }

<div class="content">
  <div class="content-item">1ddddsdssdsdd</div>
  <div class="content-item">2dddd</div>
  <div class="content-item">3dddd</div>
</div>

git-tip

https://github.com/git-tips/tips

input

.wide {
 .header-menu,
 .header-profile {
  display: none;
 }
  .search-bar {
      max-width: 600px;
      margin: auto;
      transition: 0.4s;
      box-shadow: 0 0 0 1px var(--border-color);
      padding-left: 0;
 }
}

当获取焦点的时间我们把其他dom隐藏,然后过渡过去,失去焦点再添加,我觉得这种设计挺好的

scss

.aaa{
    //.add-l  其实可以这样写,让我们省去了前缀
    &-l{
        
    }
}

选中切换的

参考

https://codepen.io/JavaScriptJunkie/pen/YzzNGeR

<template>
  <div>
    <div class="card">
      <div class="-front">
        <div class="img"></div>
        <label for="one" class="cardNumber" ref="one">
          <span>###################</span>
        </label>
        <div class="card-box">
          <label for="two" class="card-box-l" ref="two" @focus="focusInput" @blur="blurInput" data-ref="two">
            <span>FuLL NaMe</span>
          </label>
          <label for="three" class="card-box-r" ref="three" @focus="focusInput" @blur="blurInput" data-ref="three">
            <span>MM/YY</span>
          </label>
        </div>
        <div class="card-focus" :class="{'-active' : focusElementStyle }"
             :style="focusElementStyle" ref="focusElement"></div>
      </div>
    </div>
    <input type="text" id="one" @focus="focusInput" @blur="blurInput" data-ref="one">
    <input type="text" id="two" @focus="focusInput" @blur="blurInput" data-ref="two">
    <input type="text" id="three" @focus="focusInput" @blur="blurInput" data-ref="three">
  </div>
</template>

<script>
export default {
  name: "home-three",
  data() {
    return {
      focusElementStyle: null,
      //焦点
      isInputFocused: false,
    }
  },
  mounted() {
    document.querySelector('#one').focus();
  },
  methods: {
    //获取焦点
    focusInput(e) {
      console.log(e.target.dataset.ref);
      this.isInputFocused = true;
      let targetRef = e.target.dataset.ref;
      let target = this.$refs[targetRef];
      this.focusElementStyle = {
        width: `${target.offsetWidth}px`,
        height: `${target.offsetHeight}px`,
        transform: `translateX(${target.offsetLeft}px) translateY(${target.offsetTop}px)`
      }
    },
    //失去焦点
    blurInput() {
      let vm = this;
      setTimeout(() => {
        if (!vm.isInputFocused) {
          vm.focusElementStyle = null;
        }
      }, 300);
      vm.isInputFocused = false;
    }
  }
}
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

.-active {
  opacity: 1 !important;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgb(8, 20, 47);
    height: 100%;
    border-radius: 5px;
    filter: blur(25px);
    opacity: 0.5;
    z-index: 100;
  }
}

.card-focus {
  position: absolute;
  z-index: 3;
  border-radius: 5px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.65);
}

.card {
  max-width: 430px;
  height: 270px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  position: relative;
  z-index: 2;
  width: 100%;
  //background-color: #000;
  color: #fff;
  padding: 40px;

  .cardNumber {
    font-weight: 500;
    line-height: 1;
    font-size: 27px;
    margin-bottom: 35px;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;

    span {
      font-size: 28px;
    }
  }

  .card-box {
    display: flex;
    justify-content: space-between;
    cursor: pointer;

    &-l {
      color: #fff;
      width: 100%;
      max-width: calc(100% - 85px);
      padding: 10px 15px;
      font-weight: 500;
      display: block;
      cursor: pointer;
    }

    &-r {
      flex-wrap: wrap;
      font-size: 18px;
      margin-left: auto;
      padding: 10px;
      display: inline-flex;
      width: 80px;
      white-space: nowrap;
      flex-shrink: 0;
      cursor: pointer;
    }
  }

  .img {
    height: 100%;
    background-color: #1c1d27;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    background-image: url("https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/22.jpeg");
    object-fit: cover;
    max-width: 100%;
    display: block;
    max-height: 100%;
    z-index: -1;
  }
}
</style>

播放的样式

posted @ 2021-04-20 00:26 猫神甜辣酱阅读(189) 评论(0) 编辑收藏举报

刷新页面返回顶部

房东家的猫