开发中常用的JS知识点集锦

<div>
            <div onclick="clickMeDownload()">点我下载</div>
            
            <script type="text/javascript">
                /**
                 * 根据远程图片转成base64数据 (远程图片和当前页面不是同一域名时，需要进行web服务器配置，使其可以跨域下载)
                 * @param url      图片链接
                 * @param callback 回调函数
                 */
                function getBase64ByImgUrl(url, callback){
                    let canvas = document.createElement('canvas'),
                        ctx = canvas.getContext('2d'),
                        img = new Image;
                    img.crossOrigin = 'Anonymous';
                    img.onload = function(){
                        canvas.height = img.height;
                        canvas.width = img.width;
                        ctx.drawImage(img,0,0);

                        //获取base64数据
                        let base64 = canvas.toDataURL('image/png');
                        //回调
                        if (callback){
                            callback(base64);
                        }
                        canvas = null;
                    }
                    img.src = url;
                }

                /**
                 * 把base64转成文件流
                 * @param base64     base64数据
                 * @param filename   自定义文件的名字
                 */
                function getFileByBase64(base64, filename){

                    let arr = base64.split(','), mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

                    while(n--){
                        u8arr[n] = bstr.charCodeAt(n);
                    }

                    return new File([u8arr], filename, {type:mime});
                }


                /**
                 * 测试例子：点击下载，隐藏下载链接
                 */
                function clickMeDownload(){

                    let imgUrl = 'https://img2018.cnblogs.com/blog/454511/201811/454511-20181114115022054-611805083.png';

                    getBase64ByImgUrl(imgUrl, function(base64){
                        console.log(base64);

                        //创建a标签, 设置a标签的href属性和download属性
                        var aEle = document.createElement('a');
                        aEle.setAttribute('href', base64);
                        aEle.setAttribute('download', 'temp.png');
                        aEle.style.display = 'none'; //隐藏a标签
                        document.body.appendChild(aEle);  //将a标签添加到body里
                        aEle.click();    //触发a标签点击事件

                        document.body.removeChild(aEle);  //下载图片后，移除a标签

                    });
                }
            </script>
        </div>

<div class="text-box">宽度500px, 高度50px，超出高度后后缀...展示。这俩人是现今世上，手段最高明的摸金校尉，都有万夫不挡之勇，神鬼莫测之机，兼有云长之忠，翼德之猛，子龙之勇，孔明之智，那面古镜一定就是他们从云南掏出来的。</div>

/* 6、超出限制宽高后省略点展示
            多行后显示省略点，只应用于-webkit内核； 移动端浏览器基本都是WebKit内核的，所以该样式适用于移动端
        */
        .text-box{
            margin-top: 20px; width: 500px; height: 50px; border:1px dashed #999; color: #999; line-height: 25px;
            overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
            -webkit-line-clamp: 2; /* 这个是设置最多展示几行 */
            -webkit-box-orient: vertical; word-break:break-all;
        }

/* 5、视屏图标icon */
        .video-icon { display: inline-block; width: 30px; height: 30px; border: 2px solid blue; border-radius: 30px; position: relative; cursor: pointer; }
        .video-icon:after {
            position: absolute; left: 12px; top: 7px; content: '';
            border-width:8px 0 8px 10px; border-style:solid;
            border-color:transparent transparent transparent blue;
        }

<div class="grade_box"><div class="grade_first grade_sel">一级分类</div><div class="grade_second">二级分类</div></div>
        <script type="text/javascript">
            var gradeList = (document.getElementsByClassName('grade_box')[0]).children;

            for (var i = 0; i < gradeList.length; i++){
                var obj = gradeList[i];

                obj.setAttribute('index', i);

                obj.onclick = function(){
                    var index = this.getAttribute('index');

                    console.log(this);

                    if (index == 0){
                        gradeList[0].className = 'grade_first grade_sel';
                        gradeList[1].className = 'grade_second';
                    }
                    else{
                        gradeList[0].className = 'grade_first';
                        gradeList[1].className = 'grade_second grade_sel';
                    }
                }
            }
        </script>

.grade_box { width: 300px; height: 40px; }
        .grade_box div {
            display: inline-block; height: 100%; width: 50%; line-height: 40px; text-align: center; background-color: #f4f4f4; color: #ff7800; border: 1px solid #ff7800; box-sizing: border-box; cursor: pointer;
        }
        .grade_box .grade_sel { background-color: #ff7800; color: #fff; }
        .grade_box .grade_first { border-top-left-radius: 40px; border-bottom-left-radius: 40px; }
        .grade_box .grade_second { border-top-right-radius: 40px; border-bottom-right-radius: 40px; }

.bg_change_btn{
            width: 200px; height: 50px; line-height: 50px; border-radius: 50px; margin-top: 30px; text-align: center;
            background-image: linear-gradient(-45deg, orange 0%, yellow 100%), linear-gradient( green, black); cursor: pointer;
        }