我的小筆記 =》Html、Css、Js&Web前端

原創 头发飘飘的琦玉 2020-02-22 07:34

①數組操作快速鏈接
②字符串操作快速鏈接
22.數組排序

  let Arr = [1, 100, 30, 20, 50, 40]
  Arr.sort()  //只能排序0-9以內的數組 結果[1, 100, 20, 30, 40, 50]
  Arr.sort((a, b) => a - b) //返回正數則a排列在b之前，返回負數則b排列在a之前
  console.log(Arr) //[1, 20, 30, 40, 50, 100]
  //掛載原型
  Array.prototype.MySort = function() {
      return this.sort((a, b) => a - b)
  }
  let Arr = [1, 100, 30, 20, 50, 40]
  Arr.MySort() //調用
  console.log(Arr) // [1, 20, 30, 40, 50, 100]

21.年月日大小比較

//最新公告時間範圍：2020年1月23日-2020年1月30日
let startTime = '2020-1-22 0:00:00';
let endTime = '2020-1-31 9:00:00';
// 將字符串時間轉換成時間戳
let startTimestamp = new Date(startTime).getTime()
console.log(startTimestamp)
let endTimestamp = new Date(endTime).getTime()
console.log(endTimestamp)
// 當前時間的時間戳
let nowTimestamp = new Date().getTime();
console.log(nowTimestamp)

if (nowTimestamp >= startTimestamp && nowTimestamp < endTimestamp) {
  console.log('在時間範圍內')
}

20.動態修改animation的keyframes 樣式（Message 消息提示）
在這裏插入圖片描述

<!DOCTYPE html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>動態修改keyframes</title>
    <style>
        .popUpWindows {
            width: 500px;
            height: 80px;
            line-height: 80px;
            padding:0 20px;
            background: #fff;
            position: absolute;
            animation: myfirst 4s;
            left: 50%;
            top: -100px;
            margin-left: -250px;
            color: #666;
            font-weight: 800;
            font-size: 20px;
            box-shadow: 0px 0px 4px #999;
            border-radius: 10px;
            display: none;
        }

        .clickPopUpWindows {
            height: 100px;
            line-height: 100px;
            width: 200px;
            text-align: center;
            color: snow;
            background: springgreen;
            cursor: pointer;
        }
        /* 默認動畫樣式 */
        @keyframes myfirst {
            0% {
                top: -100px;
            }

            25% {
                top: 50px;
            }

            50% {
                top: 50px;
            }

            75% {
                top: 50px;
            }

            100% {
                top: -100px;
            }
        }
    </style>
</head>

<body>
    <p><b>注意:</b> 該實例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>
    <div class="popUpWindows">這是一個彈窗</div>
    <div class="clickPopUpWindows" onclick="ClickPopUpWindows()">彈出窗口</div>

</body>
<script>
    function ClickPopUpWindows() {
        var popUpWindows = document.querySelector(".popUpWindows");
        //設置display的block和none可以讓動畫執行多次
        popUpWindows.style.display = "block";
        // console.log(popUpWindows)
        var mykeyframes = document.styleSheets[0];
        // console.log(mykeyframes)
        //清除之前寫入的動畫樣式
        mykeyframes.deleteRule(2);
        console.log(mykeyframes);
        //在原先的位置插入新的的動畫樣式
        mykeyframes.insertRule(
            "@keyframes myfirst{"
            + "0%{top:-100px; background: #FFFFFF;}"
            + "10%{top:50px; background: #FFFFFF;}"
            + "25%{top:50px; background: #F0F9EB;}"
            + "50%{top:50px; background: #FDF6EC;}"
            + "90%{top:50px; background: #FEF0F0;}"
            + "100%{top:-100px; background: #FFFFFF;}"
            , 2
        );
        window.setTimeout(() => {
            popUpWindows.style.display = "none";
        }, 4000)
    }

</script>

</html>

19.圖片手風琴

<!doctype html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery手風琴特效</title>
    <script type="text/javascript" src="http://tangjiusheng.com/skin/default/js/jquery-1.7.2.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1210px;
            height: 400px;
            margin: 150px auto;
            padding: 4px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            overflow: hidden;
        }

        .box .slide {
            width: 200px;
            float: left;
            cursor: pointer;
            transition: 1.5s;
        }

        .box .slide img {
            width: 600px;
            height: 400px;
        }

        .box .on {
            width: 600px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="slide "><img src="./img/1.jpg" /></div>
        <div class="slide "><img src="./img/3.jpg" /></div>
        <div class="slide "><img src="./img/2.jpg" /></div>
        <div class="slide "><img src="./img/1.jpg" /></div>
    </div>
</body>
<script type="text/javascript">
    $(function () {
        $(".slide").hover(function () {
            $(this).stop().addClass("on").siblings().removeClass("on");
        });
    });
</script>

</html>

18.輪播圖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

    div {
        width: 500px;
        height: 300px;
        position: relative;
        box-sizing: border-box;
    }

    .carousel li {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity .3s;
        /* 切換圖片時的過度效果 */
    }

    .carousel li a img {
        width: 500px;
        height: 300px;
    }

    .carousel .selection {
        /* 顯示的圖片需要的類 */
        opacity: 1;
        z-index: 10;
    }

    .prev,
    .next {
        /* 左右箭頭的樣式 */
        width: 50px;
        height: 50px;
        font-size: 30px;
        text-align: center;
        line-height: 50px;
        background: white;
        color: #aaa;
        border: 1px solid #bbb;
        border-radius: 50%;
        opacity: .3;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 101;
        cursor: pointer;
        user-select: none;
    }

    .prev:hover,
    .next:hover {
        opacity: .8;
    }

    .prev {
        left: 20px;
    }

    .next {
        right: 20px;
    }

    .circle {
        position: absolute;
        height: 8px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 200;
        bottom: 20px;
    }

    .circle li {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(180, 180, 180, .3);
        border: 1px solid transparent;
        float: left;
        margin-left: 10px;
        cursor: pointer;
    }

    .circle .current {
        /* 選中小點的樣式 */
        background: rgba(180, 180, 180, .8);
        border: 1px solid rgb(50, 50, 50);
    }
</style>

<body>
    <div>
        <ul class="carousel">
            <li class="selection"><a href="#1"><img src="./img/1.jpg" alt=""></a></li>
            <li><a href="#2"><img src="./img/2.jpg" alt=""></a></li>
            <li><a href="#3"><img src="./img/3.jpg" alt=""></a></li>
        </ul>
        <div class="prev">
            < </div> <div class="next"> >
        </div>
        <ul class="circle">
            <li class="current"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var currentIndex = 0;//當前圖片的索引
        var id;
        var len = document.querySelector('.carousel').childElementCount;//得到ul下面li的個數
        function carousel(index) {//建一個函數，用來提供一個索引然後切換到索引對應的圖片
            if (currentIndex === len) {//判斷一下，當前圖片索引是否等於li的個數，因爲當前索引是從0開始的，所以總數的值是沒有的
                currentIndex = index = 0
            }
            if (currentIndex < 0) {
                currentIndex = index = len - 1;
            }
            document.querySelector('.current').className = '';//將頁面上有選中樣式的小點的樣式清空
            document.querySelector('.circle li:nth-child(' + (index + 1) + ')').className = 'current'//根據索引來控制那個小點是顯示狀態
            document.querySelector('.selection').className = '';//將頁面上有選中樣式的圖片的樣式清空
            document.querySelector('.carousel li:nth-child(' + (index + 1) + ')').className = 'selection'//根據索引來控制那張圖片顯示
        }
        function prev() {//後退函數
            currentIndex--;//當前索引減1
            carousel(currentIndex) //調用carousel函數
        }
        function next() {//前進函數
            currentIndex++;//當前索引加1
            carousel(currentIndex) //調用carousel函數
        }
        var lis = document.querySelectorAll('.circle li');//得到頁面上的所有小點
        for (var i = 0; i < lis.length; i++) {//for循環遍歷
            lis[i].index = i;//將i值先保存一下
            lis[i].onclick = function () {//
                currentIndex = this.index
                carousel(currentIndex);
            }
        }
        function auto() {//自動切換
            id = setInterval(next, 1000)//間隔函數，每一秒調用一次前進函數
        }
        function stop() {
            clearInterval(id)
        }
        auto();
        document.querySelector('.prev').onclick = prev//後退按鈕的點擊事件
        document.querySelector('.next').onclick = next//前進按鈕的點擊事件
        document.querySelector('div').onmouseover = stop//div的鼠標移入事件
        document.querySelector('div').onmouseout = auto//div的鼠標移出事件
    </script>
</body>

</html>

17.百度地圖點擊獲取座標
在這裏插入圖片描述

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
     <!-- 注意修改鑰匙 -->
    <!-- 僅展示用，無key -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <!-- 正確格式 -->
    <!-- <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=換成你的鑰匙&__ec_v__=20190126"></script> -->
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
</body>

<script type="text/javascript">
    var map = new BMap.Map("container");// 創建地圖實例  
    var point = new BMap.Point(121.479048, 31.240008);// 創建點座標   
    map.centerAndZoom(point, 15);// 初始化地圖，設置中心點座標和地圖級別  
    map.enableScrollWheelZoom();// 設置地圖可縮放大小
    map.addEventListener("click", function (e) {
        //獲取地圖紅標數組
        var allOverlay = map.getOverlays();
        //清空紅標
        if (allOverlay !== "") {
            for (var i = 0; i < allOverlay.length; i++) {
                map.removeOverlay(allOverlay[i]);
            }
        }
        //點擊地圖後的新座標
        point = new BMap.Point(e.point.lng, e.point.lat);
        var marker = new BMap.Marker(point);  // 創建標註
        map.addOverlay(marker);
        window.setTimeout(()=>{
            alert(e.point.lng + "," + e.point.lat);
        },500)
        map.panTo(new BMap.Point(e.point.lng, e.point.lat));//把點擊的點設置爲地圖中心點
    });
    function myFun(result) {
        var cityName = result.name;
        map.setCenter(cityName);
        // alert(cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
    // map.getCenter().lng + "," + map.getCenter().lat //獲取當前地圖中心點 的經緯度座標值
    // map.getZoom() //獲取當前地圖的縮放級別
</script>

</html>

16.百度地圖根據輸入的位置獲取座標
調用LocalSearch方法會返回一串obj，裏邊有個數組，取的是匹配最接近的下標0的座標，當然肯定會有搜索空的時候，呵呵。
在這裏插入圖片描述

<html>

<head>
    <title>根據地址查詢經緯度</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <!-- 注意修改鑰匙 -->
    <!-- 僅展示用，無key -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <!-- 正確格式 -->
    <!-- <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=換成你的鑰匙&__ec_v__=20190126"></script> -->
</head>

<body style="background:#f9f9f9; margin:0 auto">
    <div style="width:730px;margin:30px auto;">要查詢的地址：<input id="address" type="text" value="北京天安門"
            style="margin-right:50px;" />
        <input type="button" value="查詢" onclick="searchByStationName();" />
        <div id="container"></div>
    </div>
</body>
<script type="text/javascript">
    var map = new BMap.Map("container");
    var localSearch = new BMap.LocalSearch(map);
    function searchByStationName() {
        var keyword = document.getElementById("address").value;
        localSearch.setSearchCompleteCallback(function (searchResult) {
            var lnglatArr = [];
            // console.log(searchResult)
            var poi = searchResult.getPoi(0);
            lnglatArr = [poi.point.lng, poi.point.lat];
            console.log(lnglatArr)
            window.alert(lnglatArr);
        });
        localSearch.search(keyword);
    }
</script>

</html>

15.下單側邊彈窗
在這裏插入圖片描述
js版

<div class="side-windows" id="sideWindowsID">xxx&nbsp;剛剛下單啦</div>

.side-windows{
    background: rgba(0, 0, 0,0.4);
    color: #fff;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    padding: 0 8px;
    text-align: center;
    border-radius: 20px;
    position: fixed;
    top: 40px;
    display: none;
}

/* 下單彈窗*/
var sideWindowsID = document.getElementById("sideWindowsID");
sideWindowsID.style.display = 'block';
// 獲取彈窗的寬度
var PopupWindowWidth = sideWindowsID.clientWidth;
// 將彈窗脫離視圖層
sideWindowsID.style.left = -PopupWindowWidth + 'px';
// 利用定時器將窗口顯示到視圖層內
var tid = setInterval(() => {
    sideWindowsID.style.left = sideWindowsID.offsetLeft + 1 + "px";
    v = parseInt(sideWindowsID.style.left);
    if (v > 0) clearInterval(tid)
}, 0);
//3秒後在執行
window.setTimeout(() => {
    // 利用定時器將窗口移除到視圖層外
    var tid1 = setInterval(() => {
        sideWindowsID.style.left = sideWindowsID.offsetLeft -1 + "px";
        v = parseInt(sideWindowsID.style.left);
        if (v < -PopupWindowWidth) {
            clearInterval(tid1)
            sideWindowsID.style.display = 'none';
        }
    }, 0);
}, 3000)

css版，注意，彈窗寬度是寫死的

<div class="side-windows-1" id="sideWindowsID1">xxx&nbsp;剛剛下單啦</div>

.side-windows-1{
    background: rgba(0, 0, 0,0.4);
    color: #fff;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    padding: 0 8px;
    text-align: center;
    border-radius: 20px;
    position: fixed;
    top: -100px;
    width: 100px;
    animation:popover-animation 4s;
	-webkit-animation:popover-animation 4s;
}
@keyframes popover-animation
{
	0%   {left:-100px; top:0px;}
	25%  {left:0px; top:0px;}
	50%  {left:0px; top:0px;}
	75%  {left:0px; top:0px;}
	100% {left:-100px; top:0px;}
}

@-webkit-keyframes popover-animation /* Safari and Chrome */
{
	0%   {left:-100px; top:0px;}
	25%  {left:0px; top:0px;}
	50%  {left:0px; top:0px;}
	75%  {left:0px; top:0px;}
	100% {left:-100px; top:0px;}
}

14.動態添加寬度

<div class="side-windows" id="sideWindows">刷新頁面觀看</div>

.side-windows{
    background: rgba(0, 0, 0,0.5);
    color: #fff;
    width: 0px;
    height: 200px;
    line-height: 30px;
    text-align: center;
    position: fixed;
    top: 40px;
}

var tid = setInterval("IncreaseTheWidth()", 1);
function IncreaseTheWidth() {
    document.getElementById("sideWindows").style.width = document.getElementById("sideWindows").clientWidth + 1 + "px";
    v = parseInt(document.getElementById("sideWindows").style.width);
    if (v > 100) clearInterval(tid)
}

13.滾動條的樣式修改
在這裏插入圖片描述
::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-track 滾動條的軌道（裏面裝有Thumb）
::-webkit-scrollbar-thumb 滾動條裏面的小滑塊
::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置。
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件

.body-div::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.body-div::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
}

.body-div::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
}

.body-div::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.body-div::-webkit-scrollbar-corner {
    background: #179a16;
}

12.常用正則表達式

//郵箱
function isAvailableEmail(sEmail) {
     var reg=/^([\w+\.])+@\w+([.]\w+)+$/;
    return reg.test(sEmail);
}
isAvailableEmail("[email protected]");
//手機
var phoneNum = '123';
var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
if (!reg.test(phoneNum )) {
        this.alert('手機號格式錯誤');
 }
 //銀行卡
 var pattern = /^([1-9]{1})(\d{14}|\d{18})$/;
 if (!reg.test(pattern )) {
        this.alert('銀行卡格式錯誤');
 }
 //銀行卡隱藏中間的幾位“****”
 var str = "1234567890123456";
 var reg = /^(\d{4})\d+(\d{4})$/;
 str = str.replace(reg, "$1****$2");
 //用戶名:
 /^[a-zA-Z0-9_-]{4,15}$/    //只能是字母數字下劃線橫槓,長度4-15位
 //密碼:
 /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/  //至少含一個字母,數字  長度6-20位

11.JS中獲取輸入框的值
點擊獲取

 <input type="text" placeholder="輸入留言" value="" id="msaInput">
 <div onclick="msgComfirm()">確定</div>
 function msgComfirm() {
    var msaInput = document.getElementById("msaInput");
    var inputValue = msaInput.value // 獲取輸入框的值  
    console.log(inputValue)
 }

監聽獲取

 <input type="text" placeholder="輸入留言" value="" oninput="OnInput (event)">
 function OnInput(event) {
    console.log(event.target.value);
 }

10.JS中禁止HTML的滾動

document.documentElement.style.overflowY = 'hidden';

9.JS合併數組

1.
var a = [1,2,3];
var b = [4,5,6];
var c = a.concat(b);//c=[1,2,3,4,5,6]
2.
var a = [1,2,3];
var b = [4,5,6];
for(var i in b){
    a.push(b[i]);
}
//a=[1,2,3,4,5,6]

8.點擊按鈕背景回彈動畫
在這裏插入圖片描述

<div class="btn">點擊按鈕回彈動畫</div>

.btn {
    background: #999;
    color: #fff;
    width: 200px;
    font-size: 20px;
    padding: 20px 30px;
    text-align: center;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: "";
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    width: 750px;
    height: 750px;
    left: calc(50% - 375px);
    top: calc(50% - 375px);
    opacity: 0;
    margin: auto;
    border-radius: 50%;
    transform: scale(1);
    transition: all 0.4s ease-in-out;
}

.btn:active:after {
    transform: scale(0);
    opacity: 1;
    transition: 0s;
}

.btn:hover {
    cursor: pointer;
}

7.border-radius實現半橢圓

<div class="test"></div>
 
.test{
    border-radius: 150px 150px 0 0 / 100px 100px 0 0;
    background: #00f;
    height: 50px;
    width: 150px;
}

效果圖：
在這裏插入圖片描述
6.transparent實現三角形

<div class="test"></div>

.test{
 width: 0;
 height: 0;
 border: solid transparent;
 border-width: 0px 50px 50px 50px ;
 border-bottom-color: rgb(0, 0, 0);
}

效果圖：
在這裏插入圖片描述

5.實現border-bottom由中間向兩邊的漸變效果

background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(135deg, #fff, #fff), linear-gradient(to left, #fff, #666, #fff);
border-bottom: 2px transparent solid;

效果圖：
在這裏插入圖片描述
4.JS中動態修改backgroundSize和backgroundPosition

<div id="test"><div>

var testNumArr = [ '1','2','3']
//backgroundSize 百分比和px、rem等可以混用
window.document.getElementById('test').style.backgroundSize = '100%' + testNumArr[0]  + "rem";
//當backgroundPosition的寬高大於div盒子的寬高是可以實現圖片剪切的效果，下面的負1rem就是減去頭部的1rem的高度
window.document.getElementById('test').style.backgroundPosition='0 -1rem';

3.去掉時間的冒號：和橫杆-

let time1 = 12:00;
let time2 = 9-18;
time1.replace(/\:/g, "");
time2.replace(/\-/g, "");

2.讓兩個容器的滾動條同步
用querySelector獲取容器的滾動條的dom對象，用addEventListenerjina監聽當前容器滾動了多少，再把值賦值給另外一個容器，scrollTop 頂部對齊，scrollLeft 左邊對齊。

//讓滾動條y軸同步
var a = document.querySelector('#leftID')
var b = document.querySelector('#rightID')
a.addEventListener('scroll', function() {
    b.scrollTop = a.scrollTop;

})
b.addEventListener('scroll', function() {
    a.scrollTop = b.scrollTop
});
//讓滾動條x軸同步
var a1 = document.querySelector('#topID')
var b1 = document.querySelector('#bottomID')
a1.addEventListener('scroll', function() {
    b1.scrollLeft = a1.scrollLeft;

})
b1.addEventListener('scroll', function() {
    a1.scrollLeft = b1.scrollLeft
})

1.div溢出部分可滾動查看並且不顯示滾動條
Element UI 的滾動條
第一種：
（.a是加了overflow屬性的類名）

.a::-webkit-scrollbar {
    display: none
}

在這裏插入圖片描述
第二種(溢出截斷滾動條，不是迫不得已就別用)：
（注意：div b 的寬度一定要比div a 的寬度寬16px以上，因爲滾動條的寬度大概是16px；而且內容一定要撐滿外層div；如果div裏是for循環顯示內容的，那麼這個div就要放到div b 的裏面。）

<div class="a">
	<div  class="b">
		<div >123</div>
		<div >123</div>
		<div >123</div>
	 	//<div for='arr'></div>
	</div>
</div>
<style>
.a{
	width:100px;
	height:100px;
	overflow:hidden;
	}
.b{
	width:120px;
	height:100px;
	overflow-y:scroll;
	}
</style>

css樣式筆記：

文字：
文字超出隱藏：text-overflow: ellipsis;
文字超出切除：text-overflow: clip;
文字超出不換行：white-space: nowrap;
允許長文本換行：word-wrap: break-word;
單詞拆分換行：word-break: break-all;（允許在單詞內換行）和word-break: keep-all;（只能在半角空格或連字符處換行）
文字縮進：text-indent: 10px;
文字行高：line-height: 10px;
文字行寬：letter-spacing: 10px;
文字縮放：transform:scale(0.9,1.1)(x:橫縮放，y：豎縮放)

文字超出兩行顯示省略號：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;/*行數 */
-webkit-box-orient: vertical;
頭髮飄飄的琦玉
發佈了37 篇原創文章 · 獲贊 9 · 訪問量 1萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML5: 學習指南

作爲前端的3劍客之一， 對於新手來說，有一個路線圖是極好的：

搁浅... 2020-07-08 08:18:48

Flutter: 學習指南

Flutter讓跨平臺更加高效。

搁浅... 2020-07-08 08:18:48

Netlify: 前端Vue/React自動化部署服務

Netlify在我以前的博文有介紹。 這裏打包這個“羣聊”項目，這裏只演示前端怎麼部署，後端是用express寫的，部署同理。   1. 上傳vue項目到Github上： vscode中提交併推送到Github上： 這時需要添加遠

搁浅... 2020-07-08 08:18:48

JS: 學習指南

js也沒得說，必學~   

搁浅... 2020-07-08 08:18:48

JavaScript繼續深造

《深入理解javascript原型和閉包系列》 《深入理解javascript異步系列》 《換個思路學習nodejs》 《CSS知多少》 來源：https://www.kancloud.cn/wangfupeng/wangedit

文殊师利法王子 2020-07-07 14:43:00

內容居中css樣式

body { width: 35em; margin: 0 auto; }

文殊师利法王子 2020-07-07 14:43:00

常見16進制顏色

常見的十六進制顏色碼 一、 三原色（紅、綠、藍） 紅色（red）： #FF0000 綠色（green）： #008000 藍色（blue）： #0000FF 二、 其他顏色 常見的單色 黑色（black）：

文殊师利法王子 2020-07-07 14:43:00

ElementUI和wangEditor衝突

在vue2.6的環境中使用npm install了wangEditor，因爲結合了Element UI，wangEditor的樣式變了，包括標題大小樣式無效，初始默認字體太少

文殊师利法王子 2020-07-07 14:43:00

快速查看各個.html文件的技巧

🚀在瀏覽器中輸入： file:///我的項目真實路徑 🚀可快速查看項目中的所有文件，如需頻繁查看刷新等，方便查看效果之類的 🚀雕蟲小技，隨便一記～

文殊师利法王子 2020-07-07 14:43:00

使用/deep/修改element-ui組件默認樣式

寫法： [.自定義類名] /deep/ [.element組件名] 示例： <style scoped> .parentClass /deep/ .el-card { background: #3a3f51; } </

文殊师利法王子 2020-07-07 14:43:00

Element：注意版本問題

低版本的Element會有更多的Bug或者未完全引入所有組件，比如[email protected]裏面需要手動引入Link組件，如果沒有手動引入Link組件，在書寫<el-link>的時候，不但不會跳轉，還會報異常 vue.js:

文殊师利法王子 2020-07-07 14:43:00

Element表格內添加鏈接

<el-table-column prop="title" label="標題" sortable> <template slot-scope="scope"> <rou

文殊师利法王子 2020-07-07 14:43:00

router-link傳遞參數

<router-link :to="{ name: 'MyRouter', query: { username: '張三' } }" >點擊獲取用戶名</router-link > 在路由名爲MyRouter的組件中，進

文殊师利法王子 2020-07-07 14:43:00

Js全棧開發之koa2路由與mvc搭建初步

koa2路由與mvc搭建初步 接着上一篇《Js全棧開發之koa2初步搭建及基礎》來繼續學習koa2，上一篇只是簡單的瞭解一下koa原生的web服務搭建，實際的複雜項目需要很多中間件來提升開發效率，和減少編碼的複雜度，這篇主要涉及路

卷儿哥 2020-07-06 15:08:25

Js全棧開發之koa2中間件分離與數據層搭建

koa2中間件分離與數據層搭建 接着上一篇《Js全棧開發之koa2視圖層搭建》來繼續學習koa2，上一篇着重彙總講解了使用模板和靜態包拆分出視圖層的一些具體步驟，而沒有講解模型層，本篇將總結數據庫的訪問及模型層的搭建，以及從koa

卷儿哥 2020-07-06 15:08:25