1. 数字变换

<template>
<div class="number-grow-warp">
  <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
  </div>
</template>

<script>
export default {
    
    
  props: {
    
    
    time: {
    
    
      type: Number,
      default: 1
    },
    value: {
    
    
      type: Number,
      default: 720000
    }
  },
  mounted () {
    
    
    this.numberGrow(this.$refs.numberGrow)
  },
  methods: {
    
    
    numberGrow (ele) {
    
    
      let step = (this.value * 10) / (this.time * 1000)
      let current = 0
      let start = 0
      let t = setInterval(() => {
    
    
        start += step
        if (start > this.value) {
    
    
          clearInterval(t)
          start = this.value
          t = null
        }
        if (current === start) {
    
    
          return
        }
        current = start
        ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
      }, 10)
    }
  }

}
</script>

<style>
.number-grow-warp{
    
    
  transform: translateZ(0);
}
.number-grow {
    
    
  display: block;
  font-size: 30px;
  color: #666666;
  letter-spacing: 2.67px;
}
</style>

调用方法：

<number-grow :value="55400"></number-grow>

2. 适配

// 设置 rem 函数
function setRem () {
  // 1440 默认大小16px; 1440px = 90rem ;每个元素px基础上/16
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  let htmlDom = document.getElementsByTagName('html')[0];
  if (htmlWidth >= 1440) {
    htmlDom.style.fontSize = htmlWidth / 90 + 'px';
  } else {
    htmlDom.style.fontSize = '14px';
  }
}
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

3. 多个圆重叠背景图

   background-color: rgb(106, 119, 90);
 background-image: 
   -webkit-radial-gradient(closest-side, transparent 98%, rgba(146, 182, 102, 0.4) 99%), 
   -webkit-radial-gradient(closest-side, transparent 98%, rgba(60, 80, 35, 0.3) 99%);
 background-image: 
   radial-gradient(closest-side, transparent 98%, rgba(146, 182, 102, 0.4) 99%), 
   radial-gradient(closest-side, transparent 98%, rgba(60, 80, 35, 0.3) 99%);
 background-position: 0 0px, 40px 40px;
 background-size: 100px 100px;

 background-color:rgba($color: #778A60, $alpha: .3);
 background-image: 
   -webkit-radial-gradient(closest-side, transparent 98%, rgba(79, 107, 46, 0.3) 99%),
   -webkit-radial-gradient(closest-side, transparent 98%, rgba(60, 80, 35, 0.3) 99%);
 background-image: 
   radial-gradient(closest-side, transparent 98%, rgba(161, 190, 128, 0.3) 99%),
   radial-gradient(closest-side, transparent 98%, rgba(164, 167, 155, 0.3) 99%);
 background-position: 20px 20px, 33px 65px;
 background-size: 100px 100px;

4. 防抖和节流

防抖

/*****************************简化后的分割线 ******************************/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}
// 然后是旧代码
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置

节流：

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
/* 请注意，节流函数并不止上面这种实现方案,
   例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
   也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
    */

// 以下照旧
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000) 

持续更新中。。。