我的小笔记 =》Html、Css、Js

置顶爱唱歌的前端

已于 2023-06-21 11:09:52 修改

阅读量1.2k

点赞数

分类专栏：大前端文章标签： javascript css html jquery 前端

于 2019-06-01 17:35:22 首次发布

本文链接：https://blog.csdn.net/weixin_42063951/article/details/90731572

版权

大前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

文章目录

49.将图片转化成base64格式

写法一：

/**
 * https图片转化成base64
 */
const getBase64 = (url, callback) => {
    let img = new Image(), dataURL = '';
    img.src = url + "?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
    img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题
    img.onload = function () { //要先确保图片完整获取到，这是个异步事件
        let canvas = document.createElement("canvas"), //创建canvas元素
            width = img.width, //确保canvas的尺寸和图片一样
            height = img.height;
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(img, 0, 0, width, height); //将图片绘制到canvas中
        dataURL = canvas.toDataURL('image/png'); //转换图片为dataURL
        callback ? callback(dataURL) : null; //调用回调函数
    };
}
// let imgSrc = "./1.jpg"; // 本地路径
let imgSrc = "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"; // https图片服务响应要设置了access-control-allow-origin: * 才不会报跨域的错误
getBase64(imgSrc, (dataURL) => {
    console.log(dataURL)
})

写法二：

// let imgSrc = "./1.jpg"; // 本地路径
let imgSrc = "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"; // https图片服务响应要设置了access-control-allow-origin: * 才不会报跨域的错误
function getBase64Image(img) {
    let canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    let dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
}
let image = new Image();
image.src = imgSrc + "?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
image.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题
image.onload = function () {
    let base64 = getBase64Image(image);
    console.log(base64);
}

48.获取URL路径中的值参数

获取某个参数：

// 获取URL路径的某个参数
const getPathParamstr = (name) => {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let r = null;
    // vue可能拿不到search的参数，可以取href的
    if (window.location.search == null || window.location.search == '') {
        const params = window.location.href.split("?");
        const pram = params[params.length - 1];
        r = pram.match(reg);
    } else {
        r = window.location.search.slice(1).match(reg);
    }
    if (r != null) return decodeURIComponent(r[2]);
    return '';
}

获取全部参数：

// 获取URL路径的全部参数
const getPathParams = () => {
    let r = null;
    // vue可能拿不到search的参数，可以去href看看
    if (window.location.search == null || window.location.search == '') {
        const params = window.location.href.split("?");
        r = pram;
    } else {
        r = window.location.search.slice(1);
    }
    let arr = r.split('&')
    let params = {}
    for (var i = 0; i < arr.length; i++) {
        params[arr[i].split('=')[0]] = decodeURIComponent(arr[i].split('=')[1])
    }
    return params
}

47.PC端网站在手机模式下打开显示不全的问题

<meta name="viewport" content="width=device-width, initial-scale=0.3, maximum-scale=1, minimum-scale=0.3">

46.页面跳转传递对象或数组

var data = {
  a:'1',
  b:'2'
}
//跳转时转化
url: `./page?data=${encodeURIComponent(JSON.stringify(data))}`
//接受后转会
JSON.parse(decodeURIComponent(options.data))

45.CSS 3.0文字悬停跳动特效

<!DOCTYPE html>
<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS 3.0文字悬停跳动特效</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: #000;
            }
 
            .loader {
                position: relative;
            }
 
            .loader span {
                position: relative;
                font-size: 2em;
                color: #fff;
                display: inline-block;
                text-transform: uppercase;
                animation: animate 2s ease-in-out infinite;
                animation-delay: calc(0.1s * var(--i));
                animation-play-state: paused;
            }
 
            .loader:hover span {
                animation-play-state: running;
            }
            @keyframes animate {
 
                0%,
                40%,
                100% {
                    transform: translateY(0);
                }
 
                20% {
                    transform: translateY(-50px);
                }
            }
        </style>
    </head>
 
    <body>
        <div class="loader">
            <span style="--i:1;">w</span>
            <span style="--i:2;">e</span>
            <span style="--i:3;">i</span>
            <span style="--i:4;">a</span>
            <span style="--i:5;">n</span>
            <span style="--i:6;">l</span>
        </div>
    </body>
 
</html>

44.404背景动画

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404</title>
</head>

<style>
    body {
        margin: 0;
        padding: 0;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-flow: row wrap;
        align-content: center;
        -webkit-box-pack: center;
        justify-content: center;
    }
    
    div {
        width: 100%;
        text-align: center;
    }
    
    .number {
        margin: 100px 0 0 0;
        background: #fff;
        position: relative;
        font: 900 30vmin 'Consolas';
        letter-spacing: 5vmin;
        text-shadow: 2px -1px 0 #000, 4px -2px 0 #0a0a0a, 6px -3px 0 #0f0f0f, 8px -4px 0 #141414, 10px -5px 0 #1a1a1a, 12px -6px 0 #1f1f1f, 14px -7px 0 #242424, 16px -8px 0 #292929;
    }
    
    .number::before {
        background-color: #673ab7;
        background-image: radial-gradient(closest-side at 50% 50%, #ffc107 100%, rgba(0, 0, 0, 0)), radial-gradient(closest-side at 50% 50%, #e91e63 100%, rgba(0, 0, 0, 0));
        background-repeat: repeat-x;
        background-size: 40vmin 40vmin;
        background-position: -100vmin 20vmin, 100vmin -25vmin;
        width: 100%;
        height: 100%;
        mix-blend-mode: screen;
        -webkit-animation: moving 10s linear infinite both;
        animation: moving 10s linear infinite both;
        display: block;
        position: absolute;
        content: "";
    }
    
    @-webkit-keyframes moving {
        to {
            background-position: 100vmin 20vmin, -100vmin -25vmin;
        }
    }
    
    @keyframes moving {
        to {
            background-position: 100vmin 20vmin, -100vmin -25vmin;
        }
    }
</style>

<body>
    <div class="number">404</div>
</body>

</html>

43.终止forEach循环

try {
    [1, 2, 3].forEach((e) => {
        if (e == 2) {
            throw Error('终止循环');
        }
        console.log(e)
    })
} catch (e) {
    console.log(e.message)
}

42.乘法精度问题

7*0.8 js计算的结果是5.6000000000000005，而不是5.6

function multiply(a, b) {
    var aDec = a.toString().split('.')[1] || '';
    var bDec = b.toString().split('.')[1] || '';
    var fix = aDec.length  + bDec.length;
    return (a * b).toFixed(fix);
}

41.解决pc端显示完全，手机端显示不全

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.3, maxmum-scale=1.0, minimum-scale=0.3">

40.响应式网页样式格式化

用两套样式，pc端用px作为单位，wap端用rem作为单位，以iPad的768px为分界点

 <!-- pc -->
 <link rel="stylesheet" type="text/css" href="./css/index.css" media="(min-width:768px)">
 <!-- wap -->
 <link rel="stylesheet" type="text/css" href="./css/index-wap.css" media="(max-width:768px)">

//封装响应式像素方法,初始化单位，实现手机端1rem=100px
function responsivePX() {
    //获取页面的宽度
    var deviceWidth = document.documentElement.clientWidth;
    // console.log(deviceWidth)
    //如果页面大于750，即px端的页面，则把html的像素锁死在100px
    if (deviceWidth > 750) deviceWidth = 750;
    document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
}
// 第一次初始化像素大小
responsivePX();
window.onresize = function() {
    // 监听窗口二次刷新像素大小
    responsivePX();
};

39.非响应式手机网页样式格式化

设计稿按750，1rem=100px

//初始单位，1rem=100px;
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 750) deviceWidth = 750;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
window.onresize = function () {
    var deviceWidth = document.documentElement.clientWidth;
    if (deviceWidth > 750) deviceWidth = 750;
    document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
};

38.判断设备类型

<script type="text/javascript">
	function browserRedirect() {
		var sUserAgent = navigator.userAgent.toLowerCase();
		var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
		var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
		var bIsMidp = sUserAgent.match(/midp/i) == "midp";
		var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
		var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
		var bIsAndroid = sUserAgent.match(/android/i) == "android";
		var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
		var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
		if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
			// console.log("移动端")
		}else{
			// console.log("PC端")
		}
	}
	browserRedirect();
</script>

37.幽灵按钮

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幽灵按钮</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background-color: #333;
        width: 1000px;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box .button {
        display: flex;
        justify-content: start;
        align-items: center;
        width: 180px;
        height: 50px;
        border: 2px solid rgba(255, 255, 255, 0.8);
        color: #2dcb70;
        font-size: 18px;
        font-weight: 700;
        padding: 0 0 0 20px;
        box-sizing: border-box;
        text-decoration: none;
        transition: 0.4s ease;
        -webkit-transition: 0.4s ease;
        position: relative;
    }

    .box .button .arrows {
        font-size: 26px;
        transform:scale(1.2,2);
        margin-left: 30px;
        transition: 0.4s ease;
    }

    .box .button:hover {
        border: 2px solid rgba(255, 255, 255, 1);
    }

    .box .button:hover .arrows {
        margin-left: 45px;
    }

    .box .button .line {
        position: absolute;
        background-color: none;
        transition: 0.4s ease;
        -webkit-transition: 0.4s ease;
    }

    .box .button .line-top {
        width: 0;
        height: 2px;
        left: -100%;
        top: -2px;
    }

    .box .button:hover .line-top {
        width: 180px;
        background-color: #fff;
        left: -2px;
        top: -2px;
    }

    .box .button .line-left {
        width: 2px;
        height: 0;
        bottom: -100%;
        left: -2px;
    }

    .box .button:hover .line-left {
        height: 50px;
        background-color: #fff;
        left: -2px;
        bottom: -2px;
    }

    .box .button .line-right {
        width: 2px;
        height: 0;
        background-color: #fff;
        top: -100%;
        right: -2px;
    }

    .box .button:hover .line-right {
        height: 50px;
        background-color: #fff;
        top: -2px;
        right: -2px;
    }

    .box .button .line-bottom {
        width: 0;
        height: 2px;
        right: -100%;
        bottom: -2px;
    }

    .box .button:hover .line-bottom {
        width: 180px;
        background-color: #fff;
        right: -2px;
        bottom: -2px;
    }
</style>

<body>
    <div class="box">
        <a href="#" class="button">
            <p>幽灵按钮</p>
            <p class="arrows">→</p>
            <span class="line line-top"></span>
            <span class="line line-left"></span>
            <span class="line line-right"></span>
            <span class="line line-bottom"></span>
        </a>
    </div>
</body>

</html>

36.jquery实现文字上下滚动效果

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery实现文字上下滚动效果</title>
</head>
<style>
    body,
    ul {
        margin: 0;
    }

    .column {
        background-color: pink;
        height: 100px;
        line-height: 100px;
        overflow: hidden;
    }
</style>

<body>
    <div class="column" id="news">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script language="javascript">
    $(function () {
        setInterval(() => {
            $("#news").find('ul').animate({
                marginTop: '-100px'
            }, 500, function () {
                $(this).css({ marginTop: "0px" });
                //获取第一个li节点
                var li = $("ul").children().first().clone();
                //将拷贝的第一个节点插入最后面
                $("ul li:last").after(li);
                //清理掉第一个节点
                $("ul li:first").remove();
            })
        }, 2500);
    })
</script>

</html>

35.移动端弹窗公告

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗公告</title>
</head>
<style>
    body,
    html {
        font-size: 62.5%;
        height: 100%;
        padding: 0;
        margin: 0;
        background-color: #FFFFFF;
        font-family: 'Microsoft YaHei', arial, sans-serif, 'Droid Sans Fallback';
    }

    .popover-mask-layer {
        height: 100vh;
        width: 100vw;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        z-index: 1002;
        display: none;
    }

    .announcement-popup {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        z-index: 1003;
        animation: openAnnouncementPopup 1s;
    }

    /* 打开公告动画 */

    @keyframes openAnnouncementPopup {
        from {
            transform: scale(0);
        }

        to {
            transform: scale(1);
        }
    }

    /* 关闭公告动画 */

    @keyframes closeAnnouncementPopup {
        from {
            transform: scale(1);
        }

        to {
            transform: scale(0);
        }
    }

    .announcement-popup .content {
        width: 75vw;
        position: relative;
    }

    .close-btn img {
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -2.5rem;
        right: -2.5rem;
        border: 1px solid white;
        border-radius: 50%;
        padding: 0.4rem;
        background-color: rgba(0, 0, 0, 0.3);
        display: none;
    }

    .announcement-img {
        width: 75vw;
    }

    .announcement-img img {
        width: 100%;
    }
</style>

<body>
    <!-- 公告弹窗遮罩层 -->
    <div id="PopoverMaskLayer" class="popover-mask-layer"></div>
    <!-- 公告弹窗 -->
    <div id="AnnouncementPopup" class="announcement-popup">
        <div class="content">
            <div class="close-btn" onclick="closeAnnouncementPopup()">
                <img id="AloseBtn" src="http://photogz.photo.store.qq.com/psc?/V14ZaBeY40XWC8/zkoezU7GGNbZGOF.DPhgQZjV2a5npNMM5D47K1jMLBHO3ccXXkEwsTHa*69Gi8pC21IGDd.1QNtNWV6qa3LiG*rcxILsCtRzD7P0jdYffdQ!/b&bo=QABAAEAAQAADGTw!&rf=viewer_4"
                    alt="">
            </div>
            <div class="announcement-img">
                <img id="AnnouncementImg"
                    src="http://m.qpic.cn/psc?/V14ZaBeY40XWC8/BbSbWrmEw8nJ9LYcvxlBA0J8rkIkYFf9bHvROv0OdwrI0uFWFlLSmxfR*IcRSO3Tii1aQYbaZ.PTHHvTH21LXQ!!/b&bo=LwF2AS8BdgECCS0!&rf=viewer_4"
                    alt="">
            </div>
        </div>
    </div>
</body>
<script>
    document.getElementById('AnnouncementImg').onload = () => {
        // 开启通告弹窗
        document.getElementById('PopoverMaskLayer').style.display = 'block';
        document.getElementById('AnnouncementPopup').style.display = 'flex';
        setTimeout(()=>{
            document.getElementById('AloseBtn').style.display = 'block';
        },1400)
        // 禁止页面触摸滚动
        document.getElementById('AnnouncementPopup').ontouchmove = function (event) {
            event.preventDefault();
        }
    }
    // 关闭通告弹窗
    function closeAnnouncementPopup() {
        document.getElementById('PopoverMaskLayer').style.display = 'none';
        document.getElementById('AnnouncementPopup').style.animation = 'closeAnnouncementPopup 0.3s';
        setTimeout(() => {
            document.getElementById('AnnouncementPopup').style.display = 'none';
        }, 200)

    }

</script>

</html>

34.禁止移动端页面缩放

<meta name="viewport"
    content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

33.微信浏览器样式格式style.css（项目已rem为单位并非px）

body, html {
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
}
/* 取消wap网页的滚动条，pc端去掉 */
body::-webkit-scrollbar {
    display: none;
}

/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img {
    margin: 0;
    padding: 0;
    border: medium none;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}

* {
    box-sizing: border-box;
}

em {
    font-style: normal;
}

/*重置列表元素*/
ul, li {
    list-style: none;
}

/*重置超链接元素*/
a {
    text-decoration: none;
    color: #333333;
}

a:hover {
    text-decoration: none;
}

/*重置图片元素*/
img {
    border: 0px;
    vertical-align: middle;
}

/*重置表格元素*/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

input {
    outline: medium;
}

32.JS判断当前浏览器是不是微信浏览器

var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
if (isWeixin) {
    console.log('微信浏览器')
} else {
    console.log('非微信浏览器')
}

31.禁止移动端触摸滚动

在浏览器禁止页面滚动document.body.style.overflow = 'hidden';是没问题的但是真机测试时使用ios设备时并不会生效，所以需要用ontouchmove 来处理，使用的话看下面弹窗的列子。

提示：弹窗最外层的div宽度高度都沾满是有意义的，因为只有禁用了整个弹窗，这样的好处是即使关闭了弹窗也不会禁用到弹窗底下的内容滚动

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        height: 150vh;
    }

    /* 确定取消按钮弹窗 */

    .the-cover-layer {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        z-index: 5000;
        display: none;
    }

    .custom-popup {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5001;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .custom-popup .content {
        width: 80vw;
        height: 38vw;
        text-align: center;
        border-radius: 0.5rem;
        background-color: #fff;
        margin-bottom: 10vh;
    }

    .custom-popup .title {
        height: 10vw;
        line-height: 14vw;
        font-size: 1.44rem;
    }

    .custom-popup .code {
        height: 14vw;
        font-size: 1.28rem;
        color: #999;
        border-bottom: 1px solid #ddd;
        word-break: break-all;
        padding: 2vw 2vw 0 2vw;
        box-sizing: border-box;
    }

    .custom-popup .btn {
        display: flex;
        height: 14vw;
        line-height: 14vw;
        font-size: 1.44rem;
        text-align: center;
    }

    .custom-popup .cancel-btn {
        height: 14vw;
        width: 50%;
        line-height: 14vw;
        font-size: 1.44rem;
        color: #333;
        border-right: 1px solid #ddd;
    }

    .custom-popup .affirm-btn {
        height: 14vw;
        width: 50%;
        line-height: 14vw;
        font-size: 1.44rem;
        color: #576B95;
    }
</style>

<body>
    <div onclick="openPopup()">点击打开弹窗</div>
    <!-- 弹窗遮掩层 -->
    <div id="TheCoverLayer" class="the-cover-layer"></div>
    <!-- 优惠券订单弹窗 -->
    <div id="Popup" class="custom-popup">
        <div class="content">
            <div class="title">标题</div>
            <div class="code">您确定？</div>
            <div class="btn">
                <div onclick="popupCancel()" class="cancel-btn">取消</div>
                <div onclick="popupAffirm()" class="affirm-btn">确定</div>
            </div>
        </div>
    </div>
</body>
<script>
    // 打开弹窗
    var popupCancel = function () { };
    var popupAffirm = function () { };
    function openPopup() {
        // 打开弹窗
        document.getElementById('Popup').style.display = 'flex';
        document.getElementById('TheCoverLayer').style.display = 'block';
        // 禁止触摸滚动页面
        document.getElementById('Popup').ontouchmove = function (event) {
            event.preventDefault();
        }
        //弹窗确定按钮
        function myPopupAffirm() {
            // 关闭弹窗
            document.getElementById('Popup').style.display = 'none';
            document.getElementById('TheCoverLayer').style.display = 'none';

        }
        popupAffirm = myPopupAffirm;
        //弹窗取消按钮
        function myPopupCancel() {
            // 关闭弹窗
            document.getElementById('Popup').style.display = 'none';
            document.getElementById('TheCoverLayer').style.display = 'none';
        }
        popupCancel = myPopupCancel;

    }
</script>

</html>

30.解决ios端从子页history.back()返回后不重新加载ready

// 解决ios端从子页history.back()返回后不重新加载ready
$(function () {
    var isPageHide = false;
    window.addEventListener('pageshow', function () {
        if (isPageHide) {
            window.location.reload();
        }
    });
    window.addEventListener('pagehide', function () {
        isPageHide = true;
    });
})

29.选取本地图片并上传

注意：ajax请求是一定要带上processData: false和contentType: false这两个参数，否则报错

	<div>
	    <input type="file" id="selectFile" onchange="selectFile(this)">
	    <div class="upload-attachment-btn">上传图片</div>
	</div>
	// 上传图片
    function selectFile(e) {
        //获取图片名称
        //let files = e.files;
        //console.log(files)
        //console.log(e.files[0])
        var file = e.files[0]//此时的file便是选择图片后返回的没压缩的图片
        var formData = new FormData();//根据后端的需求，通过FormData构造函数创建一个空对象
        formData.append("DevIcon", file)//DevIcon为后端规定的取数据时的名字
        // console.log(formData.get("DevIcon"))
        //用ajax请求发图片传给后端，
        $.ajax({
            url: '',
            data: formData,
            type: 'POST',
            processData: false,// 不要去处理发送的数据
            contentType: false,// 不要去设置Content-Type请求头
            cache: false,//上传文件不需要缓存
            async: false,
            success: function (res) {
				//console.log(res)
            },
        });
    }

另外还可以用FileReader对象的readAsDataURL()方法将图片压缩成base64位路径，这样HTML就可以显示了

// 图片压缩
function selectFile(e) {
    // //获取图片名称
    // // let files = e.files;
    // // console.log(files)
    // console.log(e.files[0])
    var file = e.files[0]
    var reader = new FileReader();
    reader.onload = function (e) {
        var LocalImage = e.target.result;
        //此时的LocalImage 图片路径便可以放到img标签的src进行显示了
        console.log(LocalImage)
    };
    reader.readAsDataURL(file);
}

28.localStorage和sessionStorage存取数据

两者都会存到本地，localStorage存储时效永久，除非手动清理缓存；sessionStorage存储时效为浏览器窗口未关闭

 //保存数据语法：
 localStorage.setItem("name", "weianl");
 //读取数据语法：
 var name = localStorage.getItem("name")
 console.log(name) //weianl
 //删除数据语法：
 localStorage.removeItem("name");

 //保存数据语法：
 sessionStorage.setItem("name", "weianl");
 //读取数据语法：
 var name = sessionStorage.getItem("name")
 console.log(name) //weianl
 //删除指定键的数据语法：
 sessionStorage.removeItem("name");
 //删除所有数据
 sessionStorage.clear();

如果要存的是JavaScript 对象，要先转换为字符串，使用时才转成对象，不然你会发现打印的大小为：[object Object]
在这里插入图片描述

 var res = {a:1,b:2}
 localStorage.setItem("UserJson", JSON.stringify(res));
     // 获取用户基本信息：
 var UserJson = JSON.parse(localStorage.getItem("UserJson"))
 console.log(UserJson)//{a: 1, b: 2}

27.Cookie存取数据

cookie：设置的cookie过期时间前一直有效，即使窗口和浏览器关闭

// 设置Cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    // console.log(d)
    // console.log(d.getTime())
    d.setTime(d.getTime() + (exdays * 60 * 1000));
    // console.log(d)
    var expires = "expires=" + d.toGMTString();
    // console.log(expires)
    document.cookie = cname + "=" + cvalue + "; " + expires;
}
// 获取Cookie
function getCookie(key) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(key + "=");
        if (c_start != -1) {
            c_start = c_start + key.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

// 设置cookie,1表示有效期为1分钟
setCookie("name", "weianl",1);

//获取cookie
console.log(getCookie("name"));//weianl

26.调用函数里面的函数

//定义一个变量名
var child;
function father() {
    var a = 7;
    function childInterior() {
        var b = 27;
        console.log(b);
    }
    child = childInterior;
    console.log(a);
}
//先调用外部函数
father();//7
//再调用内部函数
child();//27

25.document.location.href的传参和取值

父页传参

 document.location.href = './index-goods-detail.html?id=' + 1 + '&name=' + 'hello';

子页接收参数

var url = location.search //获取url中"?"符后的字串
console.log(url)  //?id=1&name=hello
var returnedObj = new Object()
// 判断是否有返回值
if (url.indexOf('?') != -1) {
    var str = url.substr(1)
    console.log(str)//id=1&name=hello
    var strs = str.split('&')
    console.log(strs) //["id=1", "name=hello"]
    for (var i = 0; i < strs.length; i++) {
        returnedObj[strs[i].split('=')[0]] = strs[i].split('=')[1]
    }
    console.log(returnedObj) //此时的值就是我们需要的参数{id: "1", name: "hello"}；
}

24.iframe在父页传值给子页

(注意，只有在浏览器环境里面使用，如果是微信内置网站，是不生效的，要用cookie做标记，且不能放到window.onload里)

父页

<!-- 底部导航 -->
<footer class="footer-item">
    <iframe id="frameID" src="/footer.html" frameborder="0"></iframe>
</footer>
<script type="text/javascript">
    var frame = document.getElementById('frameID');
    frame.contentWindow.postMessage('你好！');
</script>

子页

<script type="text/javascript">
    // //监听父页传过来的Message值
    window.addEventListener('message', function (event) {
            console.log(event.data);//你好！
    });
</script>

23.对象数组排序

//对象数组排序
var arr = [
    {name:'123',num:0},
    {name:'321',num:17},
    {name:'1234',num:7},
    {name:'567',num:27}
];
 
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;//降序为value2 - value1
    }
}
arr.sort(compare('num'))
// arr = [
//     { name: '123', num: 0 },
//     { name: '1234', num: 7 },
//     { name: '321', num: 17 },
//     { name: '567', num: 27 }
// ];

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("123@qq.com");
//手机
var phoneNum = '123';
// var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
var reg = /^1[3-9]\d{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位
  // 纯中文
 let regChi = /^[\u4e00-\u9fa5]+$/;
 //纯英文数字
 let regEngNum = /^[a-zA-Z\d]+$/;
 //纯数字
 let reg = /^[0-9]*$/
 let reg = /^\d+$/

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;

react的文字格式化： font-size: calc(10px + 2vmin);

爱唱歌的前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
我的小笔记 =》Html、Css、Js

记录常用代码
复制链接

扫一扫

专栏目录