最近花了点时间用纯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;
};
;
};
//所谓的面向对象实现（这就是面向对象吗？感觉逻辑上也不咋的呀）
稍后更新....
时间： 2024-10-05 06:42:45