1、dom创建表格
通过docuemnt.createElement 创建一个table标签并声明
通过for循环用同样的方法创建tr和td并通过appendchild放置在其父级
在第一次for循环里通过createElement创建tr标签并声明
通过appendChild把tr放置到table里
第二次进行for循环,通过createElement 创建td
在td表格里用两次循环的次数相乘来显示循环的次数,并将td标签放置在tr里
通过classList.add给table创建class标签并设置样式
最后再通过appendchild将table标签放置到body里,
这样最后渲染table是为了节省页面刷新的速度,让createElement在内存先运行完再渲染到页面
2、 dom点击表格变换属性
通过点击td标签,使表格字体颜色和大小变化,使用上面已经写好的表格
用td.onclick生成函数方法 ,在点击事件中用getElementsByTagName获取td
通过for循环td的声明变量的长度,在循环中根据td声明变量的下标改变style的样式
3、鼠标拖拽div
先写一个div并设置样式,将div设置为position
监听div样式的onmousedown和
window的onmouseup、onmousemove
定义一个变量为false来判断鼠标左键是否按下
给onmousedown添加该变量为true
给onmouseup添加该变量false
在onmousemove添加preventDefault阻止默认事件,放置比如拖拽文字导致div跟随的bug
再再onmousemove中以是否为true判断
如果为按下(true)则将鼠标当前的位置赋值给div
通过监听onblur防止窗口失去焦点div依旧跟随鼠标的bug
通过鼠标的位置判断是否超出页面,如果超出页面就让鼠标位置归0