1. PingCode智库首页
  2. 百科

原生js项目推荐怎么写

Edit2 • • 百科

原生js项目推荐怎么写

原生JS项目推荐

核心观点：学习原生JS项目能够提升编程基础、掌握核心概念、增强问题解决能力。 在学习原生JavaScript的过程中，开发一些有趣且实用的项目不仅能帮助你巩固基础知识，还能让你更好地理解JavaScript的核心概念。如制作一个待办事项列表、实现一个简单的计算器、开发一个天气应用，都是非常好的选择。以制作待办事项列表为例，它不仅能帮助你理解DOM操作、事件处理，还能让你熟悉如何在浏览器中存储数据。

一、待办事项列表

待办事项列表（To-Do List）是一个经典的JavaScript项目，它能够帮助你掌握DOM操作、事件处理和数据存储等核心概念。

1.1、项目简介

待办事项列表是一个简单而实用的应用程序。用户可以在其中添加、删除和标记完成的任务。这不仅能帮助用户有效地管理任务，还能提高他们的工作效率。

1.2、项目实现

要实现一个待办事项列表，你需要以下步骤：

  1. HTML结构：创建基本的HTML结构，包括输入框、添加按钮和任务列表。
  2. CSS样式：编写CSS样式，使应用程序看起来更美观。
  3. JavaScript功能：使用JavaScript添加任务、删除任务、标记任务为完成状态。

核心代码示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>To-Do List</title>


    <link rel="stylesheet" href="styles.css">


</head>


<body>


    <div class="container">


        <h1>To-Do List</h1>


        <input type="text" id="taskInput" placeholder="Add a new task...">


        <button id="addTaskBtn">Add Task</button>


        <ul id="taskList"></ul>


    </div>


    <script src="script.js"></script>


</body>


</html>



.container {


    width: 300px;


    margin: 0 auto;


    text-align: center;


}


#taskInput {


    width: 80%;


    padding: 10px;


}


#addTaskBtn {


    padding: 10px;


}


#taskList {


    list-style-type: none;


    padding: 0;


}


.task {


    display: flex;


    justify-content: space-between;


    padding: 10px;


    border-bottom: 1px solid #ccc;


}


.completed {


    text-decoration: line-through;


}



document.getElementById('addTaskBtn').addEventListener('click', function() {


    const taskInput = document.getElementById('taskInput');


    const taskText = taskInput.value.trim();


    if (taskText !== '') {


        const taskList = document.getElementById('taskList');


        const newTask = document.createElement('li');


        newTask.className = 'task';


        newTask.innerHTML = `<span>${taskText}</span> <button class="deleteBtn">Delete</button>`;


        newTask.querySelector('span').addEventListener('click', function() {


            this.classList.toggle('completed');


        });


        newTask.querySelector('.deleteBtn').addEventListener('click', function() {


            this.parentElement.remove();


        });


        taskList.appendChild(newTask);


        taskInput.value = '';


    }


});

二、简单计算器

一个简单的计算器项目可以帮助你掌握JavaScript的基本运算、事件处理和DOM操作。

2.1、项目简介

计算器是一个基本且实用的工具，它允许用户进行基本的算术运算，如加、减、乘、除。这个项目不仅能帮助你理解基本的JavaScript运算，还能让你熟悉如何处理用户输入和输出结果。

2.2、项目实现

要实现一个简单的计算器，你需要以下步骤：

  1. HTML结构：创建基本的HTML结构，包括显示屏和按钮。
  2. CSS样式：编写CSS样式，使计算器看起来更美观。
  3. JavaScript功能：使用JavaScript处理用户输入、进行计算并显示结果。

核心代码示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>Simple Calculator</title>


    <link rel="stylesheet" href="styles.css">


</head>


<body>


    <div class="calculator">


        <div id="display"></div>


        <button class="btn">7</button>


        <button class="btn">8</button>


        <button class="btn">9</button>


        <button class="btn">/</button>


        <button class="btn">4</button>


        <button class="btn">5</button>


        <button class="btn">6</button>


        <button class="btn">*</button>


        <button class="btn">1</button>


        <button class="btn">2</button>


        <button class="btn">3</button>


        <button class="btn">-</button>


        <button class="btn">0</button>


        <button class="btn">.</button>


        <button class="btn">=</button>


        <button class="btn">+</button>


    </div>


    <script src="script.js"></script>


</body>


</html>



.calculator {


    width: 200px;


    margin: 0 auto;


    text-align: center;


}


#display {


    height: 50px;


    background-color: #ccc;


    margin-bottom: 10px;


    line-height: 50px;


    text-align: right;


    padding: 0 10px;


}


.btn {


    width: 48px;


    height: 48px;


    margin: 2px;


    font-size: 18px;


}



let display = document.getElementById('display');


let buttons = Array.from(document.getElementsByClassName('btn'));


buttons.map(button => {


    button.addEventListener('click', (e) => {


        switch(e.target.innerText){


            case 'C':


                display.innerText = '';


                break;


            case '=':


                try{


                    display.innerText = eval(display.innerText);


                } catch {


                    display.innerText = 'Error';


                }


                break;


            default:


                display.innerText += e.target.innerText;


        }


    });


});

三、天气应用

天气应用是一个稍微复杂一些的项目，它可以帮助你理解如何使用API、处理异步操作以及更新DOM。

3.1、项目简介

天气应用允许用户输入城市名称，并获取该城市的当前天气信息。这个项目不仅能帮助你了解API的使用，还能让你熟悉如何处理异步操作和数据的动态更新。

3.2、项目实现

要实现一个天气应用，你需要以下步骤：

  1. HTML结构：创建基本的HTML结构，包括输入框和显示天气信息的区域。
  2. CSS样式：编写CSS样式，使应用程序看起来更美观。
  3. JavaScript功能：使用JavaScript获取用户输入、调用天气API并显示天气信息。

核心代码示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>Weather App</title>


    <link rel="stylesheet" href="styles.css">


</head>


<body>


    <div class="container">


        <h1>Weather App</h1>


        <input type="text" id="cityInput" placeholder="Enter city name...">


        <button id="getWeatherBtn">Get Weather</button>


        <div id="weatherInfo"></div>


    </div>


    <script src="script.js"></script>


</body>


</html>



.container {


    width: 300px;


    margin: 0 auto;


    text-align: center;


}


#cityInput {


    width: 80%;


    padding: 10px;


}


#getWeatherBtn {


    padding: 10px;


}


#weatherInfo {


    margin-top: 20px;


}



document.getElementById('getWeatherBtn').addEventListener('click', function() {


    const city = document.getElementById('cityInput').value.trim();


    if (city !== '') {


        fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`)


            .then(response => response.json())


            .then(data => {


                if (data.cod === 200) {


                    const weatherInfo = document.getElementById('weatherInfo');


                    weatherInfo.innerHTML = `


                        <h2>${data.name}</h2>


                        <p>${data.weather[0].description}</p>


                        <p>Temperature: ${Math.round(data.main.temp - 273.15)}°C</p>


                        <p>Humidity: ${data.main.humidity}%</p>


                    `;


                } else {


                    alert('City not found!');


                }


            })


            .catch(error => {


                console.error('Error fetching weather data:', error);


            });


    }


});

四、图片画廊

图片画廊是一个视觉效果较强的项目，它能够帮助你掌握事件处理、DOM操作和动画效果。

4.1、项目简介

图片画廊允许用户浏览和查看一组图片，并提供放大查看功能。这个项目不仅能提升你的JavaScript技能，还能提高你的设计和用户体验能力。

4.2、项目实现

要实现一个图片画廊，你需要以下步骤：

  1. HTML结构：创建基本的HTML结构，包括图片列表和放大查看区域。
  2. CSS样式：编写CSS样式，使画廊看起来更美观。
  3. JavaScript功能：使用JavaScript处理图片点击事件、显示放大图片并添加动画效果。

核心代码示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>Image Gallery</title>


    <link rel="stylesheet" href="styles.css">


</head>


<body>


    <div class="gallery">


        <div class="thumbnail">


            <img src="image1.jpg" alt="Image 1">


        </div>


        <div class="thumbnail">


            <img src="image2.jpg" alt="Image 2">


        </div>


        <div class="thumbnail">


            <img src="image3.jpg" alt="Image 3">


        </div>


    </div>


    <div id="lightbox" class="lightbox">


        <span class="close">&times;</span>


        <img class="lightbox-content" id="lightbox-img">


    </div>


    <script src="script.js"></script>


</body>


</html>



.gallery {


    display: flex;


    justify-content: space-around;


    flex-wrap: wrap;


}


.thumbnail {


    width: 30%;


    margin-bottom: 20px;


}


.thumbnail img {


    width: 100%;


    cursor: pointer;


}


.lightbox {


    display: none;


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    background: rgba(0, 0, 0, 0.8);


    justify-content: center;


    align-items: center;


}


.lightbox-content {


    max-width: 90%;


    max-height: 90%;


}


.close {


    position: absolute;


    top: 20px;


    right: 20px;


    font-size: 30px;


    cursor: pointer;


    color: white;


}



const thumbnails = document.querySelectorAll('.thumbnail img');


const lightbox = document.getElementById('lightbox');


const lightboxImg = document.getElementById('lightbox-img');


const closeBtn = document.querySelector('.close');


thumbnails.forEach(thumbnail => {


    thumbnail.addEventListener('click', () => {


        lightbox.style.display = 'flex';


        lightboxImg.src = thumbnail.src;


    });


});


closeBtn.addEventListener('click', () => {


    lightbox.style.display = 'none';


});

五、石头剪刀布游戏

石头剪刀布游戏是一个有趣的项目，它能够帮助你掌握JavaScript的基本逻辑、事件处理和DOM操作。

5.1、项目简介

石头剪刀布游戏允许用户与计算机进行对战，并显示游戏结果。这个项目不仅能增强你的编程逻辑，还能提高你的用户交互设计能力。

5.2、项目实现

要实现一个石头剪刀布游戏，你需要以下步骤：

  1. HTML结构：创建基本的HTML结构，包括用户选择按钮和显示结果的区域。
  2. CSS样式：编写CSS样式，使游戏看起来更美观。
  3. JavaScript功能：使用JavaScript处理用户选择、计算机选择并显示结果。

核心代码示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>Rock Paper Scissors</title>


    <link rel="stylesheet" href="styles.css">


</head>


<body>


    <div class="container">


        <h1>Rock Paper Scissors</h1>


        <button class="choice" data-choice="rock">Rock</button>


        <button class="choice" data-choice="paper">Paper</button>


        <button class="choice" data-choice="scissors">Scissors</button>


        <div id="result"></div>


    </div>


    <script src="script.js"></script>


</body>


</html>



.container {


    width: 300px;


    margin: 0 auto;


    text-align: center;


}


.choice {


    padding: 10px;


    margin: 10px;


}


#result {


    margin-top: 20px;


}



const choices = document.querySelectorAll('.choice');


const result = document.getElementById('result');


choices.forEach(choice => {


    choice.addEventListener('click', () => {


        const userChoice = choice.dataset.choice;


        const computerChoice = getComputerChoice();


        const winner = getWinner(userChoice, computerChoice);


        result.innerHTML = `


            <p>You chose: ${userChoice}</p>


            <p>Computer chose: ${computerChoice}</p>


            <p>${winner}</p>


        `;


    });


});


function getComputerChoice() {


    const choices = ['rock', 'paper', 'scissors'];


    const randomIndex = Math.floor(Math.random() * choices.length);


    return choices[randomIndex];


}


function getWinner(userChoice, computerChoice) {


    if (userChoice === computerChoice) {


        return 'It's a tie!';


    } else if (


        (userChoice === 'rock' && computerChoice === 'scissors') ||


        (userChoice === 'paper' && computerChoice === 'rock') ||


        (userChoice === 'scissors' && computerChoice === 'paper')


    ) {


        return 'You win!';


    } else {


        return 'You lose!';


    }


}

六、BMI计算器

BMI计算器是一个有用的健康工具项目，它能够帮助你掌握JavaScript的基本运算、事件处理和DOM操作。

6.1、项目简介

BMI计算器允许用户输入身高和体重，并计算他们的身体质量指数（BMI）。这个项目不仅能帮助你理解基本的JavaScript运算，还能让你熟悉如何处理用户输入和输出结果。

6.2、项目实现

要实现一个BMI计算器，你需要以下步骤：

  1. HTML结构：创建基本的HTML结构，包括输入框和显示结果的区域。
  2. CSS样式：编写CSS样式，使计算器看起来更美观。
  3. JavaScript功能：使用JavaScript处理用户输入、进行计算并显示结果。

核心代码示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>BMI Calculator</title>


    <link rel="stylesheet" href="styles.css">


</head>


<body>


    <div class="container">


        <h1>BMI Calculator</h1>


        <input type="number" id="heightInput" placeholder="Enter height (cm)">


        <input type="number" id="weightInput" placeholder="Enter weight (kg)">


        <button id="calculateBtn">Calculate BMI</button>


        <div id="bmiResult"></div>


    </div>


    <script src="script.js"></script>


</body>


</html>



.container {


    width: 300px;


    margin: 0 auto;


    text-align: center;


}


#heightInput, #weightInput {


    width: 80%;


    padding: 10px;


    margin: 10px 0;


}


#calculateBtn {


    padding: 10px;


}


#bmiResult {


    margin-top: 20px;


}



document.getElementById('calculateBtn').addEventListener('click', function() {


    const height = parseFloat(document.getElementById('heightInput').value) / 100;


    const weight = parseFloat(document.getElementById('weightInput').value);


    if (height > 0 && weight > 0) {


        const bmi = (weight / (height * height)).toFixed(2);


        document.getElementById('bmiResult').innerText = `Your BMI is ${bmi}`;


    } else {


        alert('Please enter valid height and weight!');


    }


});

总结

通过开发上述这些原生JavaScript项目，你不仅能够巩固基础知识，还能提升实际编程能力。待办事项列表、简单计算器、天气应用、图片画廊、石头剪刀布游戏、BMI计算器，这些项目

相关问答FAQs：

Q: 如何开始一个原生JS项目？
A: 开始一个原生JS项目的最佳方法是确定项目的目标和需求，然后创建一个新的文件夹来存放项目文件。接下来，你可以在HTML文件中创建一个基本的骨架，并在其中引入你的JS文件。这样你就可以开始编写原生JS代码了。

Q: 在原生JS项目中如何管理和组织代码？
A: 在原生JS项目中，良好的代码管理和组织非常重要。你可以使用模块化的思维来组织代码，将相关的功能分成不同的模块，并使用模块导入和导出功能来实现代码的复用和可维护性。此外，你还可以使用命名空间来避免全局变量的冲突，并将代码按照功能或者模块进行分组。

Q: 如何优化原生JS项目的性能？
A: 优化原生JS项目的性能可以从多个方面入手。首先，可以尽量减少DOM操作的次数，因为DOM操作是相对较慢的。其次，可以使用事件委托来减少事件处理函数的数量。另外，尽量避免使用全局变量，因为全局变量会增加命名冲突的风险。还可以使用缓存来减少对重复计算的需求，以及使用异步加载和延迟加载技术来提高页面的加载速度。最后，可以使用工具来压缩和合并JS文件，以减少文件的大小和数量，从而提高页面的加载速度。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3788798

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部