牛客网零基础入门前端(二)

本文介绍了JavaScript中一系列常用的函数实现,包括数组排序、字符串转换、日期处理、对象操作、数组操作以及DOM操作等。这些函数涵盖了基本的数据处理和网页交互,对于前端开发人员来说是非常实用的工具。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

FED29 从大到小排序

function _sort(array) {
    // 补全代码
    return array.sort(function (a, b) {return b - a;});
}

FED30 大写字符串

function _touppercase(string) {
    // 补全代码
    return string.toUpperCase();
}

FED31 对象属性键名

function _keys(object) {
    // 补全代码
    return Object.keys(object);
}

FED32 对象数字

function _numbertoobject(number) {
    // 补全代码
    return Object(number);
}

FED33 对象字符串

function _stringtoobject(string) {
    // 补全代码
    return Object(string);
}

FED34 去除字符串两端空格

function _trim(string) {
    // 补全代码
    return string.trim();
}

FED35 输出日期

function _date(number) {
    // 补全代码
    let date = new Date(number);
    return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}

FED36 数字取整

function _int(value) {
    // 补全代码
    return Math.floor(value);
}

FED37 数组反转

function _reverse(array) {
    // 补全代码
    return array.reverse();
}

FED38 数组转字符串

function _join(array) {
    // 补全代码
    return array.join('');
}

FED39 数组最大值

function _max(array) {
    // 补全代码
    return Math.max(...array);
}

FED40 搜索数字

function _search(string) {
    // 补全代码
    return string.search(/\d/) !== -1;
}

FED41 头部插入元素

function _unshift(array,value) {
    // 补全代码
    array.unshift(value);
    return array;
}

FED42 尾部插入元素

function _push(array,value) {
    // 补全代码
    array.push(value);
    return array;
}

FED43 js-位置查找

function _indexof(array,value) {
    // 补全代码
    return array.indexOf(value);
}

FED44 向下取整

function _floor(number) {
    // 补全代码
    return Math.floor(number);
}

FED45 整数反转

function _reverse(number) {
    // 补全代码
    let sign = number >= 0 ? 1 : -1;
    let ans = 0;
    number = Math.abs(number);
    while (number > 0) {
        ans = 10 * ans + number % 10;
        number = Math.floor(number / 10);
    }
    ans *= sign;
    return ans;
}

FED46 字符串搜索

function _search(string,value) {
    // 补全代码
    return string.search(value) >= 0;
}

FED57 移除数组中的元素

function remove(arr, item) {
    return arr.filter(value => {return value !== item;});
}

FED58 移除数组中的元素

function removeWithoutCopy(arr, item) {
    for (let i = 0; i < arr.length; ) {
        arr[i] === item ? arr.splice(i, 1) : i++;
    }
    return arr;
}

FED59 添加元素

function append(arr, item) {
    return arr.concat([item]);
}

FED60 删除数组最后一个元素

function truncate(arr) {
    return arr.slice(0, arr.length - 1);
}

FED61 添加元素

function prepend(arr, item) {
    return [item].concat(arr);
}

FED62 删除数组第一个元素

function curtail(arr) {
    return arr.slice(1, arr.length);
}

FED63 数组合并

function concat(arr1, arr2) {
    return arr1.concat(arr2);
}

FED64 添加元素

function insert(arr, item, index) {
    return arr.slice(0, index).concat([item]).concat(arr.slice(index, arr.length));
}

FED65 求二次方

function square(arr) {
    return arr.map((a) => {return a * a;});
}

FED66 查找元素位置

function findAllOccurrences(arr, target) {
    return arr.reduce((ans, elem, idx) => {
        if (elem === target) {
            ans.push(idx);
        }
        return ans;
    }, []);
}

FED68 正确的使用 parseInt

function parse2Int(num) {
    return parseInt(num, 10);
}

FED47 函数——参数对象

function getArguments (a,b,c) {
    // 补充代码
    return arguments;
}

FED48 this指向

var obj = {
    a: 1,
    b: 2,
    fn: function(){
        // 补全代码
        return this.a + this.b;
    }
}

FED49 JS动态创建节点

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul></ul>
    </body>
    <script type="text/javascript">
        function createLi(array){
            // 补全代码
            let ul = document.getElementsByTagName("ul")[0];
            for (let elem of array) {
                let li = document.createElement("li");
                li.innerText = elem;
                ul.appendChild(li);
            }
        }
    </script>
</html>

FED50 根据ID获取元素

function getLI(id){
    // 补全代码
    return document.getElementById(id);
}

FED51 JS修改元素内容

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <div class='box'></div>
    </body>
    <script type="text/javascript">
        function modifyText(){
            // 补全代码
            document.querySelector('div[class="box"]').textContent = '欢迎来到牛客网';
        }
    </script>
</html>

FED52 阻止冒泡事件

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul>
            <li>nowcoder</li>
        </ul>
    </body>
    <script type="text/javascript">
        // 补全代码
        document.querySelector("li").addEventListener("click", e => e.stopPropagation());
    </script>
</html>

FED53 阻止默认事件

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <form>
            <label>牛客会陪伴大家</label>
            <input id="checkbox" type="checkbox" checked />
        </form>
    </body>
    <script type="text/javascript">
        // 补全代码
        document.getElementById("checkbox").addEventListener("click", e => e.preventDefault());
    </script>
</html>

FED54 url地址

function getUrlHref (){
    // 补全代码
    return location.href;
}

FED55 点击按钮隐藏元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                border: solid 1px black;
                /*补全代码*/
                position: relative;
            }
            .btn{
                width: 20px;
                height: 20px;
                background-color: red;
                /*补全代码*/
                position: absolute;
                top: -10px;
                right: -10px;
                text-align: center;
                line-height: 20px;
            }
        </style>
    </head>
    <body>

        <div class='box'>
            <div class='btn'>X</div>
        </div>

        <script type="text/javascript">
            var btn = document.querySelector('.btn');
            var box = document.querySelector('.box');
            btn.onclick = function(){
                // 补全代码
                box.style.display = "none";
            }
        </script>
    </body>
</html>

<think>我们正在处理用户关于前端页面编写的请求。根据用户的问题,他需要教程和资源推荐。 根据引用[1],提到了响应式网页设计,并提到从零开始搭建响应式H5页面,有详细讲解和代码示例。 根据引用[2],提供了各种学习路线和教程,包括前端零基础入门学习路线、前端教程等。 根据引用[3],提供了一个使用Vue和ElementUI编写前端页面的简单示例,包括文件夹结构和文件说明。 根据引用[4],展示了一个后端(Python)的代码片段,但用户当前关注的是前端,所以可能不是重点。 用户需求:编写前端页面的指导或资源,包括教程和资源推荐。 因此,我们可以组织以下内容: 1. 前端页面的基本结构(HTML, CSS, JavaScript) 2. 使用框架(如Vue)来简化开发(参考引用[3]) 3. 推荐学习资源(参考引用[1]和引用[2]) 注意:用户要求生成相关问题,我们将在回答的最后添加相关问题。 由于用户要求使用中文,并且按照格式要求,我们将使用$...$表示行内数学表达式(但前端内容可能很少涉及数学公式,所以可能不会出现),独立公式用$$...$$。 同时,回答中引用的段落末尾要添加引用标识,例如[^1]。</think>### 如何编写一个前端页面:教程与资源推荐 编写前端页面需掌握 **HTML(结构)**、**CSS(样式)** 和 **JavaScript(交互)** 三大核心技术。以下是分步指南和资源推荐: #### 一、基础步骤 1. **HTML 结构搭建** 创建页面骨架,定义标题、段落、按钮等元素: ```html <!DOCTYPE html> <html> <head> <title>我的页面</title> </head> <body> <h1>欢迎!</h1> <button id="myButton">点击</button> </body> </html> ``` 2. **CSS 样式设计** 添加样式文件(如 `style.css`)控制布局和外观: ```css body { font-family: Arial; background: #f0f0f0; } button { background: #4CAF50; color: white; padding: 10px 20px; border: none; } ``` 3. **JavaScript 交互实现** 通过脚本添加动态功能(如点击事件): ```javascript document.getElementById("myButton").addEventListener("click", () => { alert("按钮被点击了!"); }); ``` --- #### 、高效开发工具与框架 | 工具类型 | 推荐选项 | 特点 | |----------------|-------------------------|-------------------------------| | **框架** | Vue.js / React | 组件化开发,提升复用性[^3] | | **UI 库** | Element UI / Ant Design | 预制美观组件,加速开发[^3] | | **构建工具** | Vite / Webpack | 自动化打包、热更新 | | **代码编辑器** | VS Code | 内置调试、插件市场 | > ✅ **示例项目结构**(参考 Vue 项目): > ``` > project/ > ├── public/ # 静态资源 > ├── src/ > │ ├── assets/ # 图片、字体等[^3] > │ ├── components/ # 可复用组件[^3] > │ ├── views/ # 页面视图 > │ ├── App.vue # 根组件 > │ └── main.js # 入口文件[^3] > ``` --- #### 三、学习资源推荐 1. **免费教程** - **MDN Web Docs**:权威的 HTML/CSS/JS 文档([链接](https://developer.mozilla.org/)) - **前端零基础入门路线**:涵盖 HTML 到框架的完整路径[^2] - **Vue 官方教程**:手把手实战教学([链接](https://cn.vuejs.org/guide/introduction.html)) 2. **项目实战** - **响应式页面开发**:从零构建适配多设备的 H5 页面[^1] - **GitHub 开源项目**:搜索 `frontend-beginner-projects` 获取练手项目 3. **综合平台** - **freeCodeCamp**:交互式编程练习([链接](https://www.freecodecamp.org/)) - **前端面试刷题站**:巩固基础知识(如 LeetCode、牛客网)[^2] --- #### 四、最佳实践建议 1. **优先移动端适配** 使用媒体查询实现响应式设计: ```css @media (max-width: 768px) { body { font-size: 14px; } } ``` 2. **组件化开发** 将页面拆分为独立组件(如按钮、导航栏),提高维护性[^3]。 3. **调试工具** 浏览器开发者工具(F12)实时检查元素和网络请求。 > 💡 **提示**:从静态页面起步,逐步加入框架和交互功能。遇到问题善用 Stack Overflow 和 GitHub 社区。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值