NPM——node package manager

npm

    1 概述
       node package manager
        包多个文件的集合
    2 包的分类
        全局包在命令行使用
            (1) 安装：npm install *** -g
            (2) 自己创建全局包
        本地包在项目中使用
            (1) 生产环境中
            (2) 开发环境中
            npm install ***jquery 默认安装的是生产依赖
            生产依赖放在 “dependencies":{} 以后删除依赖可以通过 npm install 安装所有的依赖
            开发依赖
            npm install @babel/core --save-dev(-D)
           开发依赖放在 “devDependencies":{}
            npm install --production 安装生产依赖
            其他'peerDependencies':{}
                'bundledDe......':{}
                'optionalDe.....':{}
    3 package.json
        npm init    初始化一个包
nodemon
1 功能每次源文件修改后   自动执行
2 安装 npm i nodemon -g
3 使用 nodemon **.js
npm rm vm
    nvm node version manager
    nrm npm registry manager npm下载地址切换工具
        npm i nrm -g
        nrm use cnpm aobao等源

input事件：
    -onchange // input value内容发生变化，则响应
    -focus() // 获得焦点事件
keyup键盘抬起事件
blur失去焦点事件
focus获得焦点事件

document
    -createElement()

再次深刻意识到：js创建的对象，在外部是无法获取到的。跟生命周期有关：外部获取时，内部生成的元素可能还不存在！
典型案例：
<!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>

<div id="box">
        行数 <input type="text" name="" id="rows"> 列数 <input type="text" name="" id="columns">
<input type="button" value="创建" id="create">
</div>
<script>
function $(id) {
return document.getElementById(id);
        }
function createEle(ele) {
return document.createElement(ele);
        }
var eleCreate = document.querySelector('#create');
eleCreate.onclick = function() {
var rValue = $('rows').value;
var cValue = $('columns').value;
var eleTable = createEle('table');
for (let index = 0; index < rValue; index++) {
var eleTr = createEle('tr');
for (let index1 = 0; index1 < cValue; index1++) {
var eleTd = createEle('td');
eleTd.innerHTML = 'aaa';
eleTr.appendChild(eleTd);
                }
var eleTd = createEle('td');
eleTd.innerHTML = '<a href="javascript:;">删除</a>';
eleTr.appendChild(eleTd);
eleTable.appendChild(eleTr);
            }
eleTable.border = 1;
$('box').appendChild(eleTable);
// 事件委托&&事件绑定还是不够清晰
var as = $('box').getElementsByTagName('a');
console.log(as);
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
if (confirm('你确定要删除吗？')) {
//获取父类删除
this.parentNode.parentNode.remove();
                    }
                }
            }
        };
</script>
</body>
</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>

<form action="somepage.asp"></form>
<input type="text" name="txt1" id="txt1" value="0 S">
<input type="button" value="开始" name="btnStart">
<input type="button" value="重置" name="btnReset">
<script>
//获取有问题
// var txt = document.forms[0].elements["txt1"];
// var btnStart = document.forms[0].elements["btnStart"];
// var btnReset = document.forms[0].elements["btnReset"];
// console.log(btnReset);
//后面逻辑待验证-应该问题不大
var txt = document.querySelector('#txt1');
var btnStart = document.getElementsByName('btnStart')[0];
var btnReset = document.getElementsByName('btnReset')[0];
console.dir(btnReset);
var timer = '';
btnStart.onclick = function() {
if (this.value === '开始') {
this.value = '停止';
btnReset.disabled = true; //禁止button事件响应
timer = window.setInterval(tip, 100);
            } else {
this.value = '开始';
btnReset.disabled = false;
window.clearInterval(timer);
txt.value = seed / 100 + " S";
            }
        };
btnReset.onclick = function() {
seed = 0;
txt.value = seed + " S";
        };
//秒表计时
var seed = 0;
function tip() {
seed++;
txt.value = seed / 10 + " S";
        }
</script>
</body>
</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>
<style>
* {
padding: 0;
margin: 0;
        }
.box {
position: absolute;
200px;
height: 200px;
background-color: blue;
        }
p {
position: relative;
top: 220px;
150px;
height: 150px;
background-color: pink;
        }
</style>
</head>
<body>

<div class="box"></div>
<input type="button" value="target:100">
<input type="button" value="target:200">
<p></p>
<script>
var box = document.querySelector('.box');
var t100 = document.getElementsByTagName('input')[0];
var t200 = document.getElementsByTagName('input')[1];
var pp = document.querySelector('p');
// t100.addEventListener('click', animate(pp, 100, 20));
// t200.addEventListener('click', animate(pp, 200, 20));
// box.addEventListener();
function animate(obj, target, duration, callback) {
clearInterval(obj.timer); //防止多次响应
obj.timer = setInterval(function() {
// if (target > obj.offsetLeft) {
//     var step = Math.ceil((target - obj.offsetLeft) / 10);
// } else {
//     var step = Math.floor((target - obj.offsetLeft) / 10);
// }
var step = target > obj.offsetLeft ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target - obj.offsetLeft) / 10);
obj.style.left = obj.offsetLeft + step + 'px';
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
if (callback) {
callback();
                    }
return;
                }
            }, duration);
        }
animate(box, 500, 10, function() {
console.log('animate over');
        });
t100.onclick = function() {
animate(pp, 100, 20);
        };
t200.onclick = function() {
animate(pp, 200, 20);
        };
// t100.addEventListener('click', animate(pp, 100, 20));
// t200.addEventListener('click', animate(pp, 200, 20));
</script>
</body>
</html>
==================
setInterval // 多次循环
setTimeout //固定时间到之后的执行

//charAt(n)——对应位置上的字符
//charCodeAt()——对应位置上的字符编码

//indexOf()
//lastIndexOf()
//substr(start,length)
//substring(start,end)

日期对象：
var myDate = "";
var year = date.getFullYear();
var month = toTwo(date.getMonth() + 1);
var day = toTwo(date.getDate());
var hour = toTwo(date.getHours());
var minute = toTwo(date.getMinutes());
var second = toTwo(date.getSeconds());

//倒计时
var end = "2020/4/13";
var endDate = new Date(end);
var now = new Date();
var diff = endDate.getTime() - now.getTime();
var secondsDiff = diff / 1000;
var days = parseInt(secondsDiff / (24 * 3600));
var hours = parseInt(secondsDiff % (24 * 3600) / 3600);
var minutes = parseInt(secondsDiff % (24 * 3600) / 60 % 60);
var seconds = parseInt(secondsDiff % (24 * 3600) % 60);
console.log(days + ":" + hours + ":" + minutes + ":" + seconds);

简单应用：
<h1>距离双11还剩<span id="d"></span>天<span id="h"></span>时<span id="m"></span>分<span id="s"></span>秒</h1>
<script src="./public.js"></script>
<script>
var end = "2020/11/11";
//DOM操作
var d = document.getElementById('d');
var h = document.getElementById('h');
var m = document.getElementById('m');
var s = document.getElementById('s');
setInterval(function() {
var endDate = new Date(end);
var now = new Date();
var diff = endDate.getTime() - now.getTime();
var diffDate = new Date(diff);
var secondsDiff = diff / 1000;
var days = parseInt(secondsDiff / (24 * 3600));
var hours = parseInt(secondsDiff % (24 * 3600) / 3600);
var minutes = parseInt(secondsDiff % (24 * 3600) / 60 % 60);
var seconds = parseInt(secondsDiff % (24 * 3600) % 60);
console.log(days + ":" + hours + ":" + minutes + ":" + seconds);
d.innerHTML = toTwo(days);
h.innerHTML = toTwo(hours);
m.innerHTML = toTwo(minutes);
s.innerHTML = toTwo(seconds);
}, 1000)
</script>

清除定时器影响
//clearInterval(timer);
//添加不限制个数
// arr.push()
// arr.unshift()
// arr.pop()
// arr.shift()
// 1.从角标pos位置处删除mount个元素
// arr.splice(pos,mount)
// 2.从角标pos处插入元素ele1
// ex: arr.splice(pos,0,ele1);
// 替换角标pso位置处的n个元素
// ex: arr.splice(pos,mout_n,ele1,ele2,...,elen)

//arr.slice(start,end)
//arr.join() //把数组的元素用指定的符号拼接为一个大的字符串
// 不传参默认以逗号连接
// arr.join("-");
//concat()
//reverse() //逆序