最近花了點時間用純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; }; ; };
//所謂的面向對象實現(這就是面向對象嗎?感覺邏輯上也不咋的呀)
稍后更新....