Js入门
学习Js之前，安装node和yarn，需要的命令如下：
npm i -g nrm
nrm ls
nrm use taobao
yarn global add yrm 或者 npm i -g yrm
yrm ls
yrm use taobao
npx parcel index.html
入门从学习一个鼠标拖动div。实现的思路是这样的。先用js创建一个div，使用css的绝对定位，使样式中的top和left值发生变化，来实现div位置变化。鼠标拖动可以使用事件监听来实现，在onmousedown，onmousemove，onmouseup的时候实现不同的js代码，来完成鼠标拖动div。遇到bug时候，使用console方法去调试。相关js代码注释如下：
let div1 = document.createElement("div");
div1.className = 'demo';
var dragging = false;
var lastX
var lastY
document.body.appendChild(div1);
div1.onmousedown = function (e) {
/*当鼠标按下的时候，才能移动，设置标志，记录下初始坐标位置 */
dragging = true;
lastX = e.clientX;
lastY = e.clientY;
}
document.onmousemove = function (e) {
if (dragging) {
/*获取移动差值 */
var deltaX = e.clientX - lastX;
var deltaY = e.clientY - lastY;
/*js无法读取css初始top和left的值 ，设初始值为0*/
var top = parseInt(div1.style.top) || 0;
var left = parseInt(div1.style.left) || 0;
div1.style.top = top + deltaY + 'px';
div1.style.left = left + deltaX + 'px';
/*移动的时候需要把最后一次值重置 */
lastX = e.clientX;
lastY = e.clientY;
}
}
document.onmouseup = function () {
dragging = false;
}
