js常用方法

 

判断 textarea 滚动到最底了

 var textarea = $('#textarea1');
    
    // 绑定滚动事件
    textarea.on('scroll', function() {
        // 获取滚动条距离顶部的距离
        // console.log('滚动了')
        var scrollTop = $(this).scrollTop();
        
        // 获取滚动条的总高度
        var scrollHeight = $(this)[0].scrollHeight;
        // 获取当前可显示文档的高度（即可视区域高度）
        var height = $(this).innerHeight();

        // console.log(`滚动条距离顶部:${scrollTop}  滚动条的总高度:${scrollHeight}   可视区域高度:${height}` )

        // 判断是否滚动到底部
        if (scrollTop + height >= scrollHeight - 1) {
            console.log('已经滚动到底部了！');
            $('#textarea1').append('\nbb\nbb\nbb\nbb\nbb\n')
            // 在这里执行你需要的操作
        }
    });

 

按指定长度分割字符串

 function my_split(str,leng){
    let arr = [];

    let index = 0;
    while(index<str.length)
        arr.push(str.slice(index,index +=leng));

    console.log(arr);
}

my_split('032390ffgsa',2);//  ['03', '23', '90', 'ff', 'gs', 'a']

 

1.通过ID获取（getElementById）：获取的是动态集合,选出的元素会随文档改变
2.通过name属性（getElementsByName）：
3.通过标签名（getElementsByTagName）：
    可以获取指定标签名称的所有元素，如下：
        var p = documeng.getElementsByTagName("p"); //获取p元素的所有引用
        for (var i = 0; i < p.length; i ++) { //遍历p数据集合
            p[i].setAttribute("class", "red"); //为每个p元素定义red类样式
        }
4.通过类名（getElementsByClassName）：
5.通过选择器获取一个元素（querySelector）：获取的是静态集合，取出来之后就和文档的改变无关了
6.通过选择器获取一组元素（querySelectorAll）：获取所有同样的类的元素
7.获取html的方法（document.documentElement）：8.document.documentElement是专门获取html这个标签的
8.获取body的方法（document.body）：document.body是专门获取body这个标签的        

 

// ================ 创建节点
使用 document 对象的 createElement() 方法能够根据参数指定的标签名称创建一个新的元素，并返回新建元素的引用。用法如下：

var element = document.getElement("tagName");
其中，element 表示新建元素的引用，createElement() 是 document 对象的一个方法，该方法只有一个参数，用来指定创建元素的标签名称。

【示例1】下面代码在当前文档中创建了一个段落标记 p，存储到变量 p 中。由于该变量表示一个元素节点，所以它的 nodeType 属性值等于 1，而 nodeName 属性值等于 p。

    var p = document.createElement("p"); //创建段落元素
    var info = "nodeName:" + p.nodeName; //获取元素名称
    info += ", nodeType:" + p.nodeType; //获取元素类型，如果为1则表示元素节点
    console.log(info);

使用 createElement() 方法创建的新元素不会被自动添加到文档里。如果要把这个元素添加到文档里，还需要使用 appendChild()、insertBefore() 或 replaceChild() 方法实现。

【示例2】下面代码演示如何把新创建的 p 元素增加到 body 元素下。当元素被添加到文档树中，就会立即显示出来。

    var p = document.createElement("p"); //创建段落元素
    document.body.appendChild(p); //增加段落元素到body元素下



// ================ 复制节点
cloneNode() 方法可以创建一个节点的副本。

【示例1】在下面示例中，首先创建一个节点 p，然后复制该节点为 p1，再利用 nodeName 和 nodeType 属性获取复制节点的基本信息，该节点的信息与原来创建的节点基本相同。

    var p = document.createElement("p"); //创建节点
    var p1 = p.cloneNode(false); //复制节点
    var info = "nodeName:" + p1.nodeName; //获取复制节点的名称
    info += ", nodeType:" + p1.nodeType; //获取复制节点的类型
    console.log(info); //显示复制节点的名称和类型相同


【示例2】以示例 1 为基础，在创建一个文本节点之后，尝试把复制的文本节点增加到段落元素之中，再把段落元素增加到标题元素中，最后把标题元素增加到 body 元素中。如果此时调用复制文本节点的 nodeName 和 nodeType 属性，则返回的 nodeType 属性值为 3，而 nodeName 属性值为 #text。

var p = document.createElement("p");  //创建一个p元素
var h1 = document.createElement("h1");  //创建一个h1元素
var txt = document.createTextNode("Hello World");  //创建一个文本节点
var hello = txt.cloneNode(false);  //复制创建的文本节点
p.appendChild(txt);  //把复制的文本节点增加到段落节点中
h1.appendChid(p);  //把段落节点增加到标题节点中
document.body.appendChild(h1);  //把标题节点增加到body节点中


【示例3】下面示例演示了如何复制一个节点及所有包含的子节点。当复制其中创建的标题 1 节点之后，该节点所包含的子节点及文本节点豆浆杯复制过来，然后增加到 body 元素的尾部。

    var p = document.createElement("p"); //创建一个p元素
    var h1 = document.createElement("h1"); //创建一个h1元素
    var txt = document.createTextNode("Hello World"); //创建一个文本节点
    p.appendChild(txt); //把复制的文本节点增加到段落节点中
    h1.appendChid(p); //把段落节点增加到标题节点中
    document.body.appendChild(h1); //把标题节点增加到body节点中
    var new_h1 = h1.cloneNode(true); //复制标题元素及其所有子节点
    document.body.appendChild(new_h1); //把复制的新标题元素增加到文档中


由于复制的节点会包含原节点的所有特性，如果节点中包含 id 属性，就会出现 id 属性值重叠的情况。一般情况下，在同一个文档中，不同属性的 id 属性值应该不同。为了避免潜在冲突，应修改其中某个节点的 id 属性值。



// ================ 插入节点
在文档中插入节点主要包括两种方法：
1) appendChild()方法
appendChild() 方法可向当前节点的子节点列表的末尾添加新的子节点。用法如下：

appendChild(newchild)
参数 newchild 表示新添加的节点对象，并返回新增的节点。

【示例1】下面示例展示了如何把段落文本增加到文档中的指定的 div 元素中，使它成为当前节点的最后一个子节点。

    <div id="box"></div>
    <script>
    var p = document.createElement("p"); //创建段落节点
    var txt = document.createTextNode("盒模型"); //创建文本节点，文本内容为“盒模型”
    p.appendChild(txt); //把文本节点增加到段落节点中
    document.getElementById("box").appendChild(p); //获取box元素，把段落节点增加尽量
    </script>

如果文档树中已经存在参数节点，则将从文档树中删除，然后重新插入新的位置。如果添加的节点是 DocumentFragment 节点，则不会直接插入，而是把它的子节点插入当前节点的末尾。

将元素添加到文档树中，浏览器会立即呈现该元素。此后，对这个元素所作的任何修改都会实时反映在浏览器中。
示例2】在下面示例中，新建两个盒子和一个按钮，使用 CSS 设计两个盒子显示为不同的效果；然后为按钮绑定事件处理程序，设计当点击按钮时执行插入操作。

    <div id="red">
    <h1>红盒子</h1>
    </div>
    <div id="blue">蓝盒子</div>
    <button id="ok">移动</button>
    <script>
    var ok = document.getElementById("ok"); //获取按钮元素的引用
    ok.onclick = function () { //为按钮注册一个鼠标单击事件的处理函数
    var red = document.getElementById("red"); //获取红色盒子的引用
    var blue= document.getElementById("blue"); //获取蓝色盒子的引用
    blue.appendChild(red); //最后移动红色盒子到蓝色盒子中
    }
    </script>

2) insertBefore()方法
使用 insertBefore() 方法可在已有的子节点前插入一个新的子节点。用法如下：

insertBefore(newchild, refchild)
其中参数 newchild 表示新插入的节点，refchild 表示插入新节点的节点，用于指定插入节点的后面相邻位置。插入成功后，该方法将返回新插入的子节点。

【示例3】针对示例 2 ，如果把蓝盒子移动到红盒子所包含的标题元素的前面，使用 appendChild() 方法是无法实现的，此时可以使用 insertBefore() 方法来实现。

    var ok = documeng.getElementById("ok"); //获取按钮元素的引用
    ok.onclick = function () { //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById("red"); //获取红色盒子的引用
    var blue = document.getElementById("blue"); //获取蓝色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0]; //获取标题元素的引用
    red.insertBefore(blue, h1); //把蓝色盒子移动到红色盒子内，且位于标题前面
    }


insertBefore() 方法与 appendChild() 方法一样，可以把指定元素及其所包含的所有子节点都一起插入到指定位置中。同时会先删除移动的元素，再重新插入到新的位置。


// ================ 删除节点
removeChild() 方法可以从子节点列表中删除某个节点。用法如下：

nodeObject.removeChild(node)
其中参数 node 为要删除节点。如果删除成功，则返回被删除节点；如果失败，则返回 null。

当使用 removeChild() 方法删除节点时，该节点所包含的所有子节点将同时被删除。

【示例1】在下面的示例中单击按钮时将删除红盒子中的一级标题。

    <div id="red">
    <h1>红盒子</h1>
    </div>
    <div id="blue">蓝盒子</div>
    <button id="ok">移动</button>
    <script>
    var ok = document.getElementById ("ok"); //获取按钮元素的引用
    ok.onclick = function () { //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById ("red"); //获取红色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0]; //获取标题元素的引用
    red.removeChild(h1); //移出红盒子包含的标题元素
    }
    </script>


【示例2】如果想删除蓝色盒子，但是又无法确定它的父元素，此时可以使用 parentNode 属性来快速获取父元素的引用，并借助这个引用来实现删除操作。

    var ok = document.getElementById ("ok"); //获取按钮元素的引用
    ok.onclick = function () { //为按钮注册一个鼠标单击事件处理函数
    var blue= document.getElementById ("blue"); //获取蓝色盒子的引用
    var parent = blue.parentNode; //获取蓝色盒子父元素的引用
    parent.removeChild(blue); //移出蓝色盒子
    }

如果希望把删除节点插入到文档其他位置，可以使用 removeChild() 方法，也可以使用 appendChild() 和 insertBefore() 方法来实现。

【示例3】在 DOM 文档操作中删除节点与创建和插入节点一样都是使用最频繁的，为此可以封装删除节点操作函数。

    //封装删除节点函数
    //参数：e表示预删除的节点
    //返回值：返回被删除的节点，如果不存在指定的节点，则返回undefined值
    function remove (e) {
    if (e) {
    var _e = e.parentNode.removeChild(e);
    return _e;
    }
    return undefined;
    }


【示例4】如果要删除指定节点下的所有子节点，则封装的方法如下：

    //封装删除所有子节点的方法
    //参数：e表示预删除所有子节点的父节点
    function empty (e) {
    while (e.firstChild) {
    e.removeChild (e.firstChild);
    }
    }




// ================ 替换节点
replaceChild() 方法可以将某个子节点替换为另一个。用法如下：

nodeObject.replaceChild(new_node, old_node)
其中参数 new_node 为指定新的节点，old_node 为被替换的节点。如果替换成功，则返回被替换的节点；如果替换失败，则返回 null。

【示例1】以上示例为基础重写脚本，新建一个二级标题元素并替换掉红色盒子中的一级标题元素。

    var ok = document.getElementById("ok"); //获取按钮元素的引用
    ok.onclick = function () { //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById("red"); //获取红色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0]; //获取一级标题的引用
    var h2 = documeng.createElement("h2"); //创建二级标题元素并引用
    red.replaceChild(h2, h1); //把一级标题替换为二级标题
    }

演示发现，当使用新创建的二级标题替换一级标题之后，原来的一级标题所包含的标题文本已经不存在了。这说明替换节点的操作不是替换元素名称，而是替换其包含的所有子节点以及其包含的所有内容。

同样的道理，如果替换节点还包含子节点，则子节点将一同被插入到被替换的节点中。可以借助 replaceChild() 方法在文档中使用现有的节点替换另一个存在的节点。

【示例2】在下面示例中使用蓝盒子替换掉红盒子中包含的一级标题元素。此时可以看到，蓝盒子原来显示的位置已经被删除显示，同时被替换元素 h1 也被删除。

    var ok = document.getElementById("ok"); //获取按钮元素的引用
    ok.onclick = function () { //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById("red"); //获取红色盒子的引用
    var blue= document.getElementById("blue"); //获取蓝色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0]; //获取一级标题的引用
    red.replaceChild(blue, h1); //把红盒子中包含的一级标题替换为蓝盒子
    }


【示例3】replaceChild() 方法能够返回被替换掉的节点引用，因此还可以把被替换掉的元素给找回来，并增加到文档中的指定节点中。针对上面示例，使用一个变量 del_h1 存储被替换掉的一级标题，然后再把它插入到红色盒子前面。

    var ok = document.getElementById("ok"); //获取按钮元素的引用
    ok.onclick = function () { //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById("red"); //获取红色盒子的引用
    var blue= document.getElementById("blue"); //获取蓝色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0]; //获取一级标题的引用
    var del_h1 = red,replaceChild(blue, h1); //把红盒子中包含的一级标题替换为蓝盒子
    red.parentNode.insertBefore(del_h1, red); //把替换掉的一级标题插入到红盒子前面
    }

 

var box = document.querySelector('.box');
box.style.height=300+'px';
box.style.width=300+'px';
box.style.backgroundColor='red';
box.style.cssFloat = 'left';
div内容修改：document.getElementById('a').innerHTML="aa"
div显示：document.getElementById('a').style.display = "block";
div的margin改变：document.getElementById('a').style.marginLeft='10px'
div的放大：document.getElementById('a').style.transform = "scale(2)"
背景图片更换：document.getElementById('a').style.backgroundImage="url('../images/img/video/system2.png')"
背景图片位置更换：document.getElementById('a').style.backgroundPosition='90% 21px';
背景图片不重复：document.getElementById("a").style.backgroundRepeat = "no-repeat";
src路径更换：document.getElementById('a').src = "XXXXXXX";
字体颜色更换：document.getElementById("a").style.color="red";
字体间距更换：document.getElementById("a").style.letterSpacing = '20px'
定位元素位置更换：document.getElementById("a").style.left="-150px"
div的text-aligin： document.getElementById("a").style.textAlign = 'left'
div的border：document.getElementById("a").style.borderRight="1px red solid"
取document里面所有的input：var a=document.getElementsByTagName("input")   //把document里面所有的input，比如文本输入框，按钮啊什么的元件全都取出来存入数组，可以用a.length取数量，a[i]取内容
修改input里的placeholder：document.getElementById("input").setAttribute("placeholder","新文本内容");
修改select里的默认选项：document.getElementById("a").options[1].selected = true; 
修改select里的内容：document.getElementById("a").options[1].innerHTML = 'xxxx'
创建元素并插入到body：const a = document.createElement('a')；document.body.appendChild(a)
清除样式：box.style=" " || null 
一次修改多个样式：box.style.cssText='background-color:red;height:300px;width:300px'; //非style的自然不能修改如：var video =document.createElement('a')；video.autoplay = true；video.srcObject = stream 

添加title属性：function addTitle(){ document.getElementById('nice').setAttribute("title","测试title")}
删除title属性：function delTitle(){ document.getElementById('nice').removeAttribute("title")}
获取title属性：function getTitle(){ var value=document.getElementById('nice').getAttribute("title")}
删除类：a.classList.remove('a1')  ||   a.className = ''
添加类：a.className = 'new a1'  ||   a.className += 'new a1'  
切换类： a.addEventListener('click', function(event) {this.classList.toggle('a1'); })
自定义一段话： $ = function(id){ return document.getElementById(id)} // $ 将代替document.getElementById 

addEventListener时不要带on,其它都带on。如：1.在标签上直接加；2.bar.onmousedown = function(event){}；3.document.onmousemove = function(event){}
　　　　
单击：onclick / click
双击：ondblclick / dblclick
鼠标按下：onmousedown / mousedown
鼠标抬起（如指定元素只能在该元素上抬起才会触发）：onmouseup / mouseup
鼠标移动到元素上触发：onmouseenter  / mouseenter
鼠标移出时触发：onmouseleave / mouseleave
鼠标移动到元素上触发(2)：onmouseover  /  mouseover
鼠标移出时触发(2)：onmouseout / mouseout
鼠标移动：onmousemove / mousemove
监听input值：onchange /  change
细则：https://www.runoob.com/jsref/dom-obj-event.html

 

// =============== select操作：
var obj = document.getElementById(”testSelect”); //定位id
var index = obj.selectedIndex; // 选中默认选中的索引
var text = obj.options[index].text; // 获取默认选中文本
var value = obj.options[index].value; // 获取默认选中值
$('select').options[0].selected = true; // 改变当前选中样式
 // 根据索引动态选中默认选中的value值   
 document.getElementById("aa")[1].selected=true;
 document.getElementById("aa").options[1].selected = true;
// 请求数据时一进页面不能第一时间得到select默认选中的value,使用以下方法
   var arr = []
   setTimeout(function(){
    var f_index1 = $('DIS.mirror').selectedIndex // 1
    var f_value1 = $('DIS.mirror')[f_index1].value
    arr.push(f_value1) 
   }, 500)

   setTimeout(function(){
    console.log(arr[0])
   }, 800)



if(confirm('确定要删除吗')){return true}else{return false;}

　var a = prompt('按下','')
    if(a || a==''){console.log('按了确认')}else{console.log('没有按确认')}




 // =============== radio、checkbox操作：

//只能选择一个radio, 将那些radioo都给同一个name不同的value

//js动态修改:
 document.getElementsByName("xb").checked = true; 
 var xb = document.getElementsByName("xb")
 xb[1].checked = true; // [] 里是索引
// js获取radio选中的value:
console.log($1('sumit_form').xb.value) // sumit_form是form的id, xb是radio的name

//js获取checkbox的value
console.log($1('sumit_form').zh[5].value) // zh是checkbox的name

//js动态修改
var zh = document.getElementsByName("zh");
zh[zh.length - 1].checked = true; // []里写索引
//js获取checkbox选中的value
var x = $1('sumit_form').zh  // zh是checkbox的name
    for(var i = 0; i < x.length; i++){
        if($1('sumit_form').zh[i].checked){console.log($1('sumit_form').zh[i].value)}
    }



 // =============== confirm操作：

if(confirm('确定要删除吗')){return true}else{return false;}

　var a = prompt('按下','')
    if(a || a==''){console.log('按了确认')}else{console.log('没有按确认')}

 

// ================ 图片转为base64:
//base64字符用法  加密：btoa；解密：atob

var img = "imgurl";//imgurl 就是你的图片路径 
 
function getBase64Image(img) { 
     var canvas = document.createElement("canvas"); 
     canvas.width = img.width; 
     canvas.height = img.height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, 0, 0, img.width, img.height); 
     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); 
     var dataURL = canvas.toDataURL("image/"+ext); 
     return dataURL; 
} 
 
var image = new Image(); 
image.src = img; 
image.onload = function(){ 
  var base64 = getBase64Image(image); 
  console.log(base64); 
} 



// ================ 加载js随机数更新版本:

<script type="text/javascript" src="./js/live.js?v=3.1.3.5"></script>
可以写成以下模式：
<script type="text/javascript">
//console.log('<scr'+'ipt src=./js/live.js?v="'+Date.parse(new Date())+'"></scr'+'ipt>')
// document.write('<scr'+'ipt src=./js/live.js?v="'+Date.parse(new Date())+'"></scr'+'ipt>');
console.log(`<script src=./js/live.js?v=${Date.parse(new Date())}></script>`);
document.write(`<script src=./js/live.js?v=${Date.parse(new Date())}></script>`);
document.write(`<link href=style/main.css?v=${Date.parse(new Date())} rel="stylesheet" type="text/css">`);
</script>


// ================  音视频简单操作:

//this._stream = await navigator.mediaDevices.getUserMedia({audio: false, video: true}); // 1 打开（进入）视频录制
this._stream = await navigator.mediaDevices.getDisplayMedia();  // 1 打开（进入）桌面录制
this._recorder = new MediaRecorder(this._stream, {mimeType: "video/webm;codecs=h264"}) // 2 指定视频封装格式为webm，同时指定编码格式为h264（如果只指定了封装格式那就会用默认的编码）
this.$refs.preview.srcObject = this._stream; // ref为preview的video呈现需要录制的画面
 
this._recorder.start(); // 开始录制
this._recorder.pause(); // 暂停录制
this._recorder.resume(); // 继续录制
this._recorder.stop(); // 停止录制
this.$refs.player.src = URL.createObjectURL(this.currentWebmData);  // 播放录制好的视频

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
html,body{ width: 100%;height: 100%;margin:0;padding:0}

#canvas{
    width: 100%;
    height: 100%;
    position: relative;
}
#canvas canvas{
    display: block;
}
#clearCanvas{
    margin:0;
    width: calc(50% - 2px);
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid #DEDEDE;
    z-index: 1;
}
#saveCanvas{
    margin: 0;
    width: calc(50% - 2px);
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid #DEDEDE;
    z-index: 1;
}
    </style>
</head>
<body>
    <div id="canvas">
        <p id="clearCanvas">清除</p>
        <p id="saveCanvas">保存</p>
    </div>
    <!-- <div id="bb">11</div> -->
    <script>
        window.onload = function() {
    new lineCanvas({
        el: document.getElementById("canvas"),//绘制canvas的父级div
        clearEl: document.getElementById("clearCanvas"),//清除按钮
        saveEl: document.getElementById("saveCanvas"),//保存按钮
        //      linewidth:1,//线条粗细，选填
        //      color:"black",//线条颜色，选填
        //      background:"#ffffff"//线条背景，选填
    });
};
function lineCanvas(obj) {
    this.linewidth = 1;
    this.color = "#000000";
    this.background = "#ffffff";
    for (var i in obj) {
        this[i] = obj[i];
    };
    this.canvas = document.createElement("canvas");
    this.el.appendChild(this.canvas);
    this.cxt = this.canvas.getContext("2d");
    this.canvas.width = this.el.clientWidth; // 画写的宽度 如 200
    this.canvas.height = this.el.clientHeight; // 画写的高度 如 200
    this.cxt.fillStyle = this.background;
    this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
    this.cxt.strokeStyle = this.color;
    this.cxt.lineWidth = this.linewidth;
    this.cxt.lineCap = "round";
    //开始绘制
    this.canvas.addEventListener("touchstart", function(e) {
        this.cxt.beginPath();
        this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
    }.bind(this), false);
    //绘制中
    this.canvas.addEventListener("touchmove", function(e) {
        this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
        this.cxt.stroke();
    }.bind(this), false);
    //结束绘制
    this.canvas.addEventListener("touchend", function() {
        this.cxt.closePath();
    }.bind(this), false);
    //清除画布
    this.clearEl.addEventListener("click", function() {
        this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }.bind(this), false);
    //保存图片，直接转base64
    this.saveEl.addEventListener("click", function() {
        var imgBase64 = this.canvas.toDataURL();
        console.log(imgBase64);
       // document.getElementById('bb').style.cssText = `width:600px;height:600px; background:url(${imgBase64}) no-repeat center center;`
    }.bind(this), false);
};
       
    
    </script>
</body>
</html>

 

1.阿里图标库：

阿里图标库找到自己喜欢的图标并加入购物车 --> 然后去购物车看选添加至项目，可以新建一个或加到以前的项目 --> 选择Font class(一百默认就是) --> 点击‘暂无代码，点此生成’ --> 复制生成的代码(一个css在线文件) --> 在自己的项目里引入(加上http://)如：<link rel="stylesheet" href="http://at.alicdn.com/t/font_2666255_161m6zfrfi3.css"> --> 使用直接加类名即可(前面要加iconfont 空格后面就是你项目里的在线类名)如：<span class="iconfont icon-asd"></span>  // 阿里图标库里项目的类名可以改，但是要重新生成代码(css在线文件)

2.未来可能流行的方式(使用css :before 插入选择器)：

引入或写一段css样式 --> css里引入图标文件(可以是在线的) --> 然后使用css:before引入图标应用到页面如下：
style:
@font-face {font-family: "iconfont";
  src: url('~@/fonts/iconfont.eot?t=1576844226174'); /* IE9 */ 
  src: url('~@/fonts/iconfont.eot?t=1576844226174#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVMAAsAAAAAChwAAAT9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKAqHQIYhATYCJAMUCwwABCAFhG0HUBurCFGUTk6f7Edh3LaEI5xY7HYeoWNK7zwLfd/7ZDz8/37f9rny/h3XpE711SdNQq1REh4bhEQoLLJn8v/facvNLUze6duSsZbv+GnTlb7095Zi+lMOtlEU4UA4hIXh39Neujkz1HYC0ju3M1Ac9Uf+ce/0z/PA5qOyXP5orGFznpcFmGBAY2xsawEOyhL0FvEsLiQTuJ7AoFUtsVtbBxckq4BugXjNDYVkbRYlhBOavvMZW7ZjpmrpbfpEfFY/H/8MIktSM+h78XRTJys/2///CaSPuC0jpPm5cJtExh6iEM99PQ8l9NiehMFPZtIVRMNXEj+zb0beXPT/M1lbNI395ZEVieiAZpiR1+KFn1lRTOZnifXTnlARyZg1+Tgxt7EMYgmJIyQ+AMNyCeqKWeO9ZOlV6Y7jtTFeKQ8tRm5qIlYcXy1Oyh9fVuuJ2tZ0WWdWhKmbl3MZu/sBgAGj+GXDAAynUbHQsuY1Dsowei8GE4agxGp8LQRRQbg6AndIDcIVej0Mm8c2vQ46ZEObfY4iStdK1oEgH8wh0cirf1tGHWjmFZSXw4Zt2pNGH1AssUPk+XIpFCyZjCESvUgkNAQRBpB+/CBuCIaSjsmCTRSFWSIXVzWoOeKt6wNErxaK51q3r1fPWtfq7nL7SgSFApHfYIivvEiv0cyEvqZGntCM6OxoqkToIdUN3Gg6mJUAqBFGFjxEg0tgwvcDFDIAM9f+WFS4weC6ob6egYZ6rhYSgSJa29jWNzPQ0s81TiSSNXpHI5jwtbi6eBNqkGrdc99fbMfQL+iYTR2oapkiByLYs93k3fbd5NwOxF9mAwy7HK58wdfBl+66BEADufaQOdvl2CPZJU7RbEv0wAzQL7Oh+dqs2fBRb9OgvjwoANaSyP+OIkUtxdT2/+sOGgpaCg6mGwDnsoN8fi5XyfIDVG5suj4+Wyg4oRIcmX6AAKfWSfHOS/m4NOO8XH5k+R2VQ1y+jbobtzlAYyAzQskq82saBgPMgBl9GDMAjnmOlY4Uj5SOuQGIffIeFR6dJps6HYW4RPbdpn6ypgHJMwmlMmTWBPBKrUlpRVBZrqfp21Wmy+v6P7OwsZ4Iob4vJnZfUlJTK/V9U/VkftSxuvWZbpn658+yjBSnJdacFWDXa2k6qDLvZgWQk8gTocUryiH3Y+6vPMc8KiXuu13obDbdSKNYV79vro61UN9/WHR+JpWlwfQNDrDNB6SVgC5daU02/IT7CSz3kQX4CPo9+Sub/UPsukQZ4Uhctmlu59ts8OXe2ML/Bhfwvfljk8rjW9m+pB/phmgqUQjyp/jKwVrLWy3UnASibDH6qsslHUkYxCB9AIFJP/kYZpZvIjQzJiQ9K5A1a2gh96Aacgad5ioM2rU9ecgUKSHKAHY8EAjjHiEZ9RWycRFayG+oZv1CZzwSMOgyGnMO2QieX5egIOhUnVCuCY8JdsxrxWdghI4irXKVewUy4EHa7/ScyW3wQOYxIBgaA0RGmRQu3SKbgeMI6kthgYYdE9Gf63aZ35k6mnBJ3k0SUCCgo1QTFKcRPEyujvKu958BhpBDIUNKfiSvACnAa6f6Onox0G2NF6tkXRoHhgwDCDHeiZEEF7VFXcDBmED5/q0sQIM6zBQR35wuq8Tiajrl69xpLD0VysKcNVLkKFGj070xuc+9NIZyWPEKRig1moQj4YKXnvKJzUwIAAAA') format('woff2'),
  url('~@/fonts/iconfont.woff?t=1576844226174') format('woff'),
  url('~@/fonts/iconfont.ttf?t=1576844226174') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/fonts/iconfont.svg?t=1576844226174#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shipin:before {
  content: "\f0024";
}

.icon-tupian:before {
  content: "\e650";
}

.icon-guanyuwomen:before {
  content: "\e608";
}

.icon-ziyuan:before {
  content: "\e60d";
}

页面使用：
<span class="iconfont icon-ziyuan"></span>


 3.bootstrap字体图标使用：

官网下载css文件和fonts文件 --> 页面引入css --> 使用直接复制类名即可

 

首先安装IIs (为了开启win提供的web服务)：

程序 --> 启用或关闭windows功能 --> 选IIs(internet information services)，里面的也都选了 --> 确定

运行一下internet information services就出来了，打开地址 http://localhost/ 验证一下即可

然后可以新建一个网站，网站名称随便起一个；路径选你放网站的文件夹(这里根目录有默认文档里其中一个即可，不然要手动加 /xx.xx)；ip地址和主机名别管；填一个端口号就行了；

 

打不开网站的原因：

1.防火墙：

确定端口号：可能是端口号被占用了，压根就打不开，换一个端口号即可

加入站规则： 防火墙 --> 高级设置 --> 入站规则 --> 新建规则 --> 端口 --> tcp && 特定本地端口 --> 允许连接 --> 应用规则全选 --> 名称随便写，描述可以不写 --> 完成 （tcp/udp 端口号：0 到65535）；

2.与之相关的web服务没开启：

运行services.msc --> 找到Windows Process Activation Service服务 启动该服务（如果弹出报错信息：1068：依赖服务或组无法启动，在运行里输入regedit--打开注册表编辑器--找到HKEY_LOCAL_MACHINE-->SYSTEM-->CurrentControlSet-->services-->找到HTTP点击，在右边找到Start双击后，把数值数据改成3，基数为：十六进制，最后点击确定，新启动计算机后，在运行里输入services.msc，打开服务，找到World Wide Web Publishing Service服务，会发现状态：已启动 启动类型：自动  就ok了）

3.权限不够：

在IIS管理器中点击你的那个网站，右边有个编辑权限点开后到安全选项卡话依次点：编辑-->添加-->高级-->立即查找-->选中Authenticated User这个用户-->确定-->确定）-->把“完全控制”勾上-->确定-->确定。之后就可以浏览网站了。

 

开启服务并使用 type="module"

// ======== index.html：
<!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>
<body>
    <script src="./indexes.js"></script>
</body>
</html>

// ======== indexes.js
import cal from './calculatores.js'
console.log('sum: ', cal.add(1,2))

// ======== calculatores.js
export default {
 add: function(a, b) {
 return a + b
 }
}


会报错 Uncaught SyntaxError: Cannot use import statement outside a module 
解决：原因是用了es6的语法， 浏览器默认将它作为js解析会出现问题，需要将它作为模块导入。修改 index.hrml script标签默认type="text/javascript"，需要改为type="module"

接着报错：Access to script at ... from origin 'null' has been blocked by CORS policy
解决：作为ES6模块导入需要开启服务才行

 

work线程

// 开启服务不然报错 Uncaught DOMException: Failed to construct 'Worker': Script at ... cannot be accessed from origin 'null'.

// =========== index.html
<!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>ts</title>
    <script src="main.js"></script>
</head>
<body>
    
</body>
</html>

// =========== main.js

/*
用来供主线程操作 Worker线程的API。

Worker.onerror：指定 error 事件的监听函数。
Worker.onmessage：指定 message 事件的监听函数，发送过来的数据在Event.data属性中。
Worker.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
Worker.postMessage()：向 Worker 线程发送消息。
Worker.terminate()：立即终止 Worker 线程。

*/

var work = new Worker('work.js')

work.postMessage('hello worker 我是main'); // 发送

work.onmessage = e => { // 接收 先触发
   console.log(e.data);
}

    
work.onerror = e => console.log(e)

// work.terminate(); // 关闭子线程


// =========== work.js
/*

（1）同源限制
分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）DOM 限制
Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

（3）通信联系
Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（4）脚本限制
Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（5）文件限制
Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络

Web Worker 有自己的全局对象，不是主线程的window，Worker 线程有一些自己的全局属性和方法。

self.name： Worker 的名字。该属性只读，由构造函数指定。
self.onmessage：指定message事件的监听函数。
self.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
self.close()：关闭 Worker 线程。
self.postMessage()：向产生这个 Worker 线程发送消息。
self.importScripts()：加载 JS 脚本。

*/
console.log('in work.js')
    
self.importScripts("ts.js");

onmessage = e => {
    console.log(e.data)
}

postMessage('hello main 我是worker'); // 发送


onerror = e => console.log(e)

// close() // 自身也可调用close()关闭

 

html标签里写js：onload="(function(){alert(1)})()"

html标签里写css：style="display:none, color:red"

frame里获取最外层的ip地址：window.top.location.href = "http://" + url1

父页面中获取iframe子页面中的元素的方法：window.frames["iframe的name值"].document.querySelector("css选择器")；// 这个获取方法需要在服务器环境下运行才有效

在iframe子页面获取父页面中的元素的方法 :window.parent.document.document.querySelector("css选择器")；// 这个获取方法需要在服务器环境下运行才有效

 

// ======= 提取字符串里的数字：

var str = '123aasdsf-sdfGGASDK-456DCFSV'

var numArr = str.match(/\d+/g)
console.log(numArr)  -> ['123', '456'] ; console.log(numArr.join('') )  -> 123456

// ======= 提取字符串里的浮点数：
var str = '12.1255aas-IIJOdp-12.3sdsdvH25c'
var numArr = str.match(/\d+\.\d+/g)
console.log(numArr) -> ['12.1255', '12.3'] ; console.log(numArr.join('')) -> 12.125512.3

 

获取字符串长度问题：

console.log(Number(4476992).toString(2)) //10001000101000001000000 实际长度为23
console.log(Number(4476992).toString(2).length) //23
console.log(String(10001000101000001000000).length) // 22
console.log('10001000101000001000000'.length) // 23
var str2 = '4476992,20576,0'
var it2 = parseInt(str2.split(",")[0], 10).toString(2)
console.log(it2.length) //23

oncontextmenu="return false" 取消鼠标右键

onselectstart="return false" 禁止选中网页上的内容

oncopy="return false" 防复制用户在网页上选中的内容

页面加载：window.onload  = function(){}
页面刷新：window.location.reload()
刷新父页面：parent.location.reload();
判断网速：navigator.connection.downlink * 1024 / 8

 // 直接跳转
 window.location.href='index.html';

 // 定时跳转
 setTimeout("javascript:location.href='index.html'", 5000);

  var wrong = document.getElementById('btn');
  wrong.onclick = function() { 
    window.history.go(-1);//返回上一页
    window.history.back(-1);//返回上一页
  }

if(location.href.indexOf("#reloaded")==-1){
        location.href=location.href+"#reloaded";
        location.reload();
    }

设置属性 (setProperty()) ：setProperty('color', 'yellow')：添加（之前有就修改）color 属性颜色 yellow
选择器之 document.querySelector( ' a ' )：a可以为id(前面需加 # )；可以为class(前面需加 . )；可以为标签元素(如是 p 元素将从文档从上往下只找第一个)；可以找所有的同样元素(document.querySelectorAll(".example")[0], 这样就找到class为example的所有元素)

手型 
代码：<A style="cursor:pointer">手型</A> 
十字型 
代码：<A style="cursor: crosshair">十字型</A> 
文本型 
代码：<A style="cursor: text">文本型</A> 
等待效果 
代码：<A style="cursor: wait">等待效果</A> 
默认效果 
代码：<A style="cursor: default">默认效果</A> 
问号效果 
代码：<A style="cursor: help">问号效果</A> 
向右箭头效果 
代码：<A style="cursor: e-resize">向右箭头效果</A> 
向右上箭头效果 
代码：<A style="cursor: ne-resize">向右上箭头效果</A> 
向上箭头效果 
代码：<A style="cursor: n-resize">向上箭头效果</A>
向左上箭头效果 
<A style="cursor: nw-resize">向左上箭头效果</A>
向左箭头效果 
<A style="cursor: w-resize">向左箭头效果</A> 
向左下箭头效果 
代码：<A style="cursor: sw-resize">向左下箭头效果</A> 
向下箭头效果 
代码：<A style="cursor: s-resize">向下箭头效果</A> 
向右下箭头效果 
代码：<A style="cursor: se-resize">向右下箭头效果</A> 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="" content="">
    <title></title>
    <style>
    </style>
</head>

<body>
    <p>ok</p>

    <script>
// 第一种：
//     var hiddenProperty = 'hidden' in document ? 'hidden' :    
//     'webkitHidden' in document ? 'webkitHidden' :    
//     'mozHidden' in document ? 'mozHidden' :    
//     null;
//     var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
//     var onVisibilityChange = function(){
//     if (!document[hiddenProperty]) {    
//         console.log('页面激活');
//     }else{
//         console.log('页面非激活')
//     }
// }
// document.addEventListener(visibilityChangeEvent, onVisibilityChange);

//第二种：

document.addEventListener("visibilitychange", function() {
    console.log(document.visibilityState);
    if(document.visibilityState == "hidden") {
        console.log('隐藏');
    } else if (document.visibilityState === "visible") {
        console.log('显示')
    }
});
    </script>
</body>

</html>