,,

^{<blockquote id="5408v"></blockquote>}

JavaScript 21天入門：練手項(xiàng)目之我的任務(wù)管理（二）：搭建項(xiàng)目框架

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2024年10月29日 22:14 本文熱度 980

接前一天的內(nèi)容。

需求已經(jīng)清楚了，就一起要搭建項(xiàng)目的框架。

考慮到目前沒有講過(guò)任何前端框架，為了簡(jiǎn)化學(xué)習(xí)，這次示例里不采用任何框架。

項(xiàng)目的結(jié)構(gòu)如下：

taskmgr/ ├── css/ │   └── styles.css ├── js/ │   └── script.js └── index.html

創(chuàng)建 HTML 頁(yè)面

在本地某個(gè)路徑下，比如說(shuō) C:\learning：

新建一個(gè)文件夾taskmgr，然后使用 VS Code 打開此文件夾。
在 VS Code 中新建一個(gè)文件 index.html。
在 index.html 文件中，輸入!，得到默認(rèn)的 HTML 代碼。

修改 title 為 “我的任務(wù)管理”。

在 body中粘貼以下代碼：

<h1>我的任務(wù)管理</h1> <input type="text" id="task-input" placeholder="輸入新任務(wù)" /> <button id="add-task-btn">添加任務(wù)</button> <ul id="task-list"></ul>

這樣，我們就有基本的 HTML 代碼，它顯示的效果如下。

?? 希望你還記得這里 Live Server 擴(kuò)展的使用，它在 VS Code 的右下方，如果你還沒有安裝，參考 HTML 入門里的教程安裝此插件。

添加 CSS 文件

接下來(lái)，我們添加 CSS 文件并鏈接到網(wǎng)頁(yè)中。

在 VS Code 中新建文件夾 css，并在此文件夾下新建文件styles.css。

在 styles.css中添加以下代碼：

/* 簡(jiǎn)單的CSS樣式 */ body {   font-family: Arial, sans-serif;   margin: 20px; }  .task {   display: flex;   justify-content: space-between;   margin-bottom: 10px; }  .task.completed {   text-decoration: line-through; }

在 index.html 文件的 head 標(biāo)簽下添加 css 的鏈接。

<link rel="stylesheet" href="./css/styles.css" type="text/css" />

這之后，文件結(jié)構(gòu)如下：

頁(yè)面效果并沒有太大變化，就不截圖了。

添加 JavaScript 文件

最后來(lái)添加一個(gè) JavaScript 文件。

在 VS Code 中新建文件夾 js，并在此文件夾下新建文件script.js。

在 script.js中添加以下代碼用于暫時(shí)驗(yàn)證我們的添加是工作的，這部分代碼在后面去除。

const taskList = document.getElementById('task-list'); taskList.innerText = '暫時(shí)沒有任務(wù)。';

在 index.html 文件的 body 標(biāo)簽最后添加 js 的鏈接。

<body>   <!-- 此處是其它代碼，以下引用放在最后-->   <script src="./js/script.js"></script> </body>

這樣之后文件結(jié)構(gòu)如下：

刷新頁(yè)面的話，會(huì)看到下方多了一行文字 “暫時(shí)沒有任務(wù)。”，表明 JS 代碼工作了。

總結(jié)

好了，如果你按照前面的步驟一步一步完成了，那么你就擁有了練手項(xiàng)目的基本結(jié)構(gòu)。

基于這個(gè)結(jié)構(gòu)，明天就可以開始完成功能。

今天的內(nèi)容相對(duì)簡(jiǎn)單，回顧了之前的 HTML 頁(yè)面的創(chuàng)建和引用 CSS、JavaScript 文件。

如果這一塊還有不熟悉的，可以回頭復(fù)習(xí)一下 HTML 和 CSS 基礎(chǔ)。

一起期待明天吧。

該文章在 2024/10/30 15:12:07 編輯過(guò)

關(guān)鍵字查詢

項(xiàng)目

任務(wù)

搭建

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。

^{<blockquote id="vujwc"></blockquote>}

日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

JavaScript 21天入門：練手項(xiàng)目之我的任務(wù)管理（二）：搭建項(xiàng)目框架

創(chuàng)建 HTML 頁(yè)面

添加 CSS 文件

添加 JavaScript 文件

總結(jié)