20190313

時間 2019-12-09

原文原文鏈接

swiper參數javascript

let swiper1 = new Swiper('.swiper-container', {
      autoplay: 3000,
      observer:true,//修改swiper本身或子元素時，自動初始化swiper
      observeParents:true,//修改swiper的父元素時，自動初始化swiper
      loop: true, //  無限循環
      autoplay: 1000,
        speed: 3000,
        slidesPerView: 3,  // 頁面顯示3個
        slidesPerGroup: 3, // 每次輪播3個
      onSetTransition: function (swiper) {
          swiper.disableTouchControl();   //  阻止觸摸滑動
        },
    });

輪播隱藏後再顯示須要從新初始化輪播  從新 new Swiper()

View Code

vue.component() 要先定義，再new Vue()css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
    <p>Original message: "{{ message }}"</p>
    <button-counter></button-counter>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.js"></script>
<script>

  Vue.component('button-counter', {
    data: function () {
      return {
        count: 0
      };
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  });
  // 全局組件要在vue實例化以前先定義
  var vm = new Vue({
    el: '#example',
    data: {
      message: 'Hello world'
    },
  });

</script>

View Code

給一組div加樣式 html

<div class='abc bbb0'></div>
<div class='abc bbb1'></div>

let ps = document.querySelectorAll('.abc'); 
Array.from(ps).forEach()

<template>
  <div>
    <p v-for="(val,key) in list" class="abc">{{val.name}}</p>
  </div>
</template>
<script>

  export default {
    data () {
      return {
        list: [{name: 'kang', age: 12}, {name: 'jia', age: 13}, {name: 'we', age: 13}]
      };
    },
    mounted () {
      let ps = document.querySelectorAll('.abc'); //  Array.from()
      Array.from(ps).forEach(function (p, key) {    // 數組纔有 forEach() 功能
        console.log('p: ' + p.innerHTML);
        p.className += ' bbb' + key;
      });
    },
  };
</script>

View Code

font-facevue

@font-face{
　　font-family: "本身的字體名字，能夠隨便起，如source,能夠不和字體文件名相同";
　　src: url('下載的字體路徑');
}
注意這樣只是把字體定義好了，並無應用到任何的元素上。只要在任何的html元素上指定font-family:"本身定義的字體名" 便可。
 p{
    font-family:'source'
  }

View Code

左右無縫勻速輪播java

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>無縫滾動——左右</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/>
    <style type="text/css">
        #scroll{width:698px;height:108px;margin:50px auto 0;position:relative;overflow:hidden;}
        .btn_left{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat -70px -69px;position:absolute;top:20px;left:1px;z-index:1;}
        .btn_left:hover{background:url(images/btn.jpg) no-repeat -70px 0;}
        .btn_right{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat 1px -69px;position:absolute;top:20px;right:0;z-index:1;}
        .btn_right:hover{background:url(images/btn.jpg) no-repeat 1px 0;}
        #scroll .content{width:546px;height:108px;position:relative;overflow:hidden;margin:0 auto;}
        #scroll ul{position:absolute;}
        #scroll li{float:left;width:182px;height:108px;text-align:center;}
        #scroll li a:hover{position:relative;top:2px;}
    </style>
</head>
<body>
<div id="scroll">
    <a href="javascript:;" class="btn_left"></a>
    <a href="javascript:;" class="btn_right"></a>
    <div class="content">
        <ul>
            <li><img src="http://placekitten.com/200/198" alt=""></li>
            <li><img src="http://placekitten.com/200/198" alt=""></li>
            <li><img src="http://placekitten.com/200/198" alt=""></li>
            <li><img src="http://placekitten.com/200/198" alt=""></li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
  window.onload = function(){
    var oDiv = document.getElementById('scroll');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oDiv.getElementsByTagName('li');
    var aBtn = oDiv.getElementsByTagName('a');
    var speed = -1;
    var timer = null;
    oUl.innerHTML += oUl.innerHTML;
    oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
    timer = setInterval(function(){
      oUl.style.left = oUl.offsetLeft + speed + 'px';
      if(oUl.offsetLeft < - oUl.offsetWidth / 2){
        oUl.style.left = '0';
      }else if(oUl.offsetLeft > 0){
        oUl.style.left = - oUl.offsetWidth / 2 + 'px';
      }
    },30);
    aBtn[0].onclick = function(){
      speed = -1;
    };
    aBtn[1].onclick = function(){
      speed = 1;
    };
    oUl.onmouseover = function(){
      clearInterval(timer);
    };
    oUl.onmouseout = function(){
      timer = setInterval(function(){
        oUl.style.left = oUl.offsetLeft + speed + 'px';
        if(oUl.offsetLeft < -oUl.offsetWidth / 2){
          oUl.style.left = '0';
        }else if(oUl.offsetLeft > 0){
          oUl.style.left = - oUl.offsetWidth / 2 + 'px';
        }
      },30);
    };
  };
</script>

View Code

顯示遮罩層時阻止頁面滾動

// 顯示遮罩層時阻止頁面滾動

let top = 0;

/**
 *將頁面固定視窗後，內容會回頭最頂端，這裏咱們須要記錄一下，同步top值。
 * @param isFixed
 */
function stopBodyScroll(isFixed) {
  let bodyEl = document.body;
  if (isFixed) {
    top = window.scrollY;

    bodyEl.style.position = 'fixed'
    bodyEl.style.top = -top + 'px'
  } else {
    bodyEl.style.position = 'static';
    bodyEl.style.top = 'unset';

    window.scrollTo(0, top); // 回到原先的top
  }
}

stopBodyScroll(true) // 固定背景
stopBodyScroll(false) // 取消固定

// 方法二  若是遮罩有滾動條，則方法二無效，只能用方法一
function moveFn(e){
  e.preventDefault()
}
s.$refs.dom.addEventListener('touchmove',s.moveFn,false)  // 阻止背景滾動
this.$refs.dom.removeEventListener('touchmove',this.moveFn,false)  // 刪除監聽要用外部函數，w3c上有指出

// 方法三 ，可用於pc
/*
 添加移除樣式
body{
  overflow:hidden;
  height:100%;
}
*/
// 在某些機型下，你可能還須要給根節點添加樣式：overflow: hidden;

//連接： https://juejin.im/post/5a27cad56fb9a045186a9d94

View Code

三種佈局左圖標右文字webpack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html, body, div, p, ul, li, img {
        margin: 0;
        padding: 0;
    }

    img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .a {
        border: 1px solid red;
        font-size: 0;
        line-height: 100px;
        height: 100px;
        width: 200px;
    }

    .a-p {
        font-size: 14px;
        vertical-align: middle;
        display: inline-block;
    }

    .a-img {
        margin-right: 30px;
        vertical-align: middle;
    }

    .b {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        border: 1px solid red;
        width: 300px;
        margin: 0 auto;
    }

    .c {
        border: 1px solid red;
        height: 200px;
    }

    .c-p {
        float: left;
        vertical-align: middle;
        position: relative;
        top: 10px;
    }

    .c-img {
        float: left;
        vertical-align: middle;
    }
</style>
<body>
<div class="a">
    <img class="a-img" src="http://placekitten.com/200/198" alt="">
    <p class="a-p">個人money</p>
</div>

<div class="b">
    <img src="http://placekitten.com/200/198" alt="">
    <p>個人money</p>
</div>

<div class="c">
    <img class="c-img" src="http://placekitten.com/200/198" alt="">
    <p class="c-p">個人money</p>
</div>
</body>
</html>

View Code

圖片優化web

mdn: preload、dns-prefetch  手機不太支持

css預加載【樣式背景圖】
js預加載【new Image().src='xxx'】
js懶加載【img data-src='xx' src='loading.png' 滾動監聽顯示 scrollTop+innerHeight> offsetHeight】
https://segmentfault.com/a/1190000011515334

圖片從模糊到清晰的demo
http://www.fly63.com/article/detial/359

字體庫npm

https://www.iconfont.cn/  可上傳自定義小圖標導出字體庫
https://juejin.im/post/59a7725b6fb9a02497170459#heading-13

可編輯htmlsegmentfault

能夠在控制檯直接用$()
控制檯document.body.contentEditable=true   可編輯html

import zepto數組

npm i zepto-webpack 
只加了一行代碼 module.exports=widnow.Zepto;

節流，可用定時器模擬

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 20000px;width:100%;background: aqua;"></div>
<script>
  let _lastTime = null;  // 變量要移到函數外
  function throttle (fn, gapTime) {
    return function () {
      let _nowTime = +new Date();
      if (_nowTime - _lastTime > gapTime || !_lastTime) {
        fn();
        _lastTime = _nowTime;
      }
    };
  }

  let fn = () => {
    console.log('boom');
  };

  // setInterval(throttle(fn, 1000), 10);   節流，必定時間內執行一次

  let timer = null;
  window.addEventListener('scroll', function () {
    console.log(1);
    clearTimeout(timer);
    timer = setTimeout(function () {   // 可用定時器模擬
      console.log(2);
    }, 1000);
    /*  throttle(function () {         // 節流
        console.log(123);
      }, 1000)()*/
  }, false);

</script>
</body>
</html>

View Code

微信清緩存

debugx5.qq.com

函數參數對象解構賦值

function test ({name}) {  // 對象解構賦值
  console.log(name + ' ,how do you do!');
}

test({
  name: 'jia'
});

三種絕對定位居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    p{

        position: absolute;
        border: 1px solid red;
        text-align: center;
        width:200px;
    }
    .a{
        left:50%;
        margin-left: -100px;
    }
    .b{
        top:100px;
        left:50%;
        transform: translate3d(-50%,0,0); /* 原理跟a一致*/
    }
    .c{
        top:200px;
        left:0;
        right:0;
        margin:0 auto;
    }
</style>
<body>
  <p class="a">絕對定位的居中</p>
  <p class="b">絕對定位的居中2</p>
  <p class="c">絕對定位的居中3</p>
</body>
</html>

View Code

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。