21xrx.com
2024-12-22 22:04:30 Sunday
登录
文章检索 我的文章 写文章
JavaScript百炼成仙网盘——从0到1实现一个网盘项目
2023-06-10 21:21:32 深夜i     --     --
JavaScript 网盘 文件夹

我最近在学习JavaScript，尤其是在学习如何创建网盘。HTML和CSS是网站的外观，但是JavaScript是使网站动起来的语言。通过网盘的实现，我深刻理解了JavaScript的应用和优势。

首先，我在网页上创建了一个文件夹并添加了文件。代码如下：

script

let files = [];


function addFile(name, type, size) {


 let file = type: type;


 files.push(file);


}


addFile("example.txt", "txt", "10MB");


addFile("example.png", "png", "5MB");


console.log(files);

这段代码创建了一个空的数组，然后定义了一个`addFile`函数，向文件数组中添加文件属性。最后，我添加了两个例子文件，输出了文件数组。

接下来，我为文件夹创建了一个UI界面。代码如下：

script

let folder = document.createElement("div");


folder.classList.add("folder");


let icon = document.createElement("i");


icon.classList.add("fa", "fa-folder");


folder.appendChild(icon);


let name = document.createElement("p");


name.textContent = "My Files";


folder.appendChild(name);


let filesList = document.createElement("ul");


for (let i=0; i


 let fileItem = document.createElement("li");


 let fileIcon = document.createElement("i");


 fileIcon.classList.add("fa", "fa-file-" + files[i].type);


 fileItem.appendChild(fileIcon);


 let fileName = document.createElement("p");


 fileName.textContent = files[i].name;


 fileItem.appendChild(fileName);


 filesList.appendChild(fileItem);


}


folder.appendChild(filesList);


document.body.appendChild(folder);

这段代码创建了一个div元素，代表文件夹。通过classList添加了一个名为"folder"的样式类，再创建一个i元素作为文件夹的图标，再添加一个p元素作为文件夹的名称。接着，我创建了一个文件列表，为每个文件创建了li元素，在其中添加了文件的图标和名称。最后，我将文件夹添加至HTML文档中。

最后，我添加了文件夹的拖放功能。代码如下：

script

function handleDrop(e) {


 e.preventDefault();


 let dt = e.dataTransfer;


 let files = dt.files;


 for (let i=0; i


  let file = files[i];


  addFile(file.name, file.type, file.size);


 }


 updateFilesList();


}


function updateFilesList() {


 let filesList = folder.querySelector("ul");


 filesList.innerHTML = "";


 for (let i=0; i


  let fileItem = document.createElement("li");


  let fileIcon = document.createElement("i");


  fileIcon.classList.add("fa", "fa-file-" + files[i].type);


  fileItem.appendChild(fileIcon);


  let fileName = document.createElement("p");


  fileName.textContent = files[i].name;


  fileItem.appendChild(fileName);


  filesList.appendChild(fileItem);


 }


}


let folder = document.querySelector(".folder");


folder.addEventListener("dragover", function(e) {


 e.preventDefault();


});


folder.addEventListener("drop", handleDrop);

这段代码定义了一个`handleDrop`函数，用于更新文件数组并更新UI界面的文件列表。接着，我定义了一个`updateFilesList`函数，用于更新文件列表的内容。最后，我为文件夹添加了`dragover`和`drop`事件监听器，用于支持文件的拖放。

这个JavaScript网盘项目让我深刻理解了JavaScript的应用和优势。我学习了如何使用JavaScript来创建UI界面、操作数组、定义函数。同时，我也提高了自己的编程技能和Web开发技能。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复