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\nrm\nvm
nvm node version manager
nrm npm registry manager npm下载地址切换工具
npm i nrm -g
nrm use cnpm\taobao\等源
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>
<!-- 业务需求：
// https://www.cnblogs.com/mercy/articles/2424882.html
该秒表将包括两个按钮和一个用于显示时间的文本框。
【1】当单击开始按钮时开始计时，最小单位为0.01秒，
【2】此时再次单击按钮则停止计时，文本框显示经过的时间。
【3】另外一个按钮用于将当前时间清零。
-->
<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;
width: 200px;
height: 200px;
background-color: blue;
}
p {
position: relative;
top: 220px;
width: 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() //逆序
