最近花了点时间用纯JS写了一个扫雷程序,写出来效果很差,自己长时间使用面向过程的方式编写代码,写的程序到后面都乱了,有必要找时间好好的深入理解一下OOP了。有时间会把写的东西拿上来。就当是留个纪念吧。打算用OOP重新写个扫雷程序,希望令自己满意。
——————————————碎碎念
记录一个实现随意拖拽div的实现方法,当作备忘吧,指不定什么时候用到了呢。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>divDrag</title> <style> #div1{ width: 300px; height: 300px; background-color: #ccc; /*一定要绝对定位*/ position: absolute; } </style> </head> <body> <div id="div1"></div> <script src="drag.js"></script> </body> </html>
*********************************************
//面向过程式写法
window.onload = function(){ var div1 = document.getElementById("div1"); div1.onmousedown = function(ev){ var oevent = ev || event; var distanceX = oevent.clientX - div1.offsetLeft; var distanceY = oevent.clientY - div1.offsetTop; document.onmousemove = function(ev){ var oevent = ev || event; div1.style.left = oevent.clientX - distanceX + 'px'; div1.style.top = oevent.clientY - distanceY + 'px'; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; ; };
//所谓的面向对象实现(这就是面向对象吗?感觉逻辑上也不咋的呀)
稍后更新....