前端机试面试题

最新推荐文章于 2024-09-09 15:01:35 发布
转载 最新推荐文章于 2024-09-09 15:01:35 发布 · 3.3k 阅读 · 32
文章标签：

#前端 #javascript #面试 #ViewUI

本文提供了一系列前端开发的面试题目，包括页面实现、CSS动画、JavaScript数组操作、Angular数据动态展示等内容。同时，涉及了响应式布局、REST服务、跨域问题及兼容性处理。面试者需要掌握HTML5、CSS3、JavaScript、AngularJS等技术，并能实现与后台的交互。此外，还提供了相关技能参考和微信开发资料。

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

一、题目要求

1、请实现“https://channel.jd.com/fashion.html”超值购部分内容。

2、使用CSS+DIV实现页面布局，页面居中，文字颜色效果要求一致。40分

3、鼠标悬停时的动画效果。10分

4、“进入查看”标签与样式。10分

5、定义一个javascript数组，数组中存放6个对象，每个对象描述服装的名称，价格，图片信息。10分

6、使用angular将数组中的数据动态展示在页面中。10分

7、点击“进入查看”时删除商品。10分

8、整体效果美观，兼容IE8浏览器。10分

9、如果将数据存放到服务器端，REST发布服务，angularJS跨域获得，后台不限JAVA,DotNet,NodeJS，加30分。

10、响应式布局，实现兼容手机端加20分。

11、完全实现如下效果加20分，注意双引号不是背景图片，实现部分功能不得分。

二、素材

点击下载

三、技能参考

Java全栈开发：

1、擅长

最低0.47元/天 解锁文章

200万优质内容无限畅学
前端经典面试题(60道前端面试题包含JS、CSS、React、网络、浏览器、程序题等)
javajavajava
09-16 8063
(以下所有答案仅供参考) 简答题 1、什么是防抖和节流？有什么区别？如何实现？ 参考答案 防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 思路： 每次触发事件时都取消之前的延时调用方法 function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 r...
html上机考试题,前端机试面试题
weixin_28931449的博客
06-09 3494
一、题目要求1、请实现“https://channel.jd.com/fashion.html”超值购部分内容。2、使用CSS+DIV实现页面布局，页面居中，文字颜色效果要求一致。40分3、鼠标悬停时的动画效果。10分4、“进入查看”标签与样式。10分5、定义一个javascript数组，数组中存放6个对象，每个对象描述服装的名称，价格，图片信息。10分6、使用angular将数组中的数据动态展示...
web前端常见二十道面试题
yw00yw的博客
11-01 502
01 作用域 var num1 = 55; var num2 = 66; ​ function f1(num, num1){ // var num = 55; // var num1 = 66; num = 100; num1 = 100; num2 = 100; console.log(num) // 100 console.log(num...
前端上机面试题
02-18
要求： 1、编写一段js代码，实现列表数据渲染，点击对应的筛选条件（全部、按进度排序、按总需人次排序、即将揭晓）加载及渲染相应的数据，所有筛选条件的url请求地址都为http://192.168.2.10:90/app/mock/21/list，（返回的数据不需要排序，假设后台返回数据时已经根据实际要求排好序）。
前端面试题目总结
weixin_34253539的博客
08-21 2089
一个200*200的div在不同分辨率屏幕上下左右居中，用css实现 div { position:absolute; width:200px; height:200px; top:50%; left:50%; margin-left:-50px; height:-50px; z-index:1000; } 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载...
牛客前端机试题
weixin_43791884的博客
07-25 1101
牛客
前端面试题（JS篇三）
weixin_74068942的博客
07-15 861
资料参考:《JavaScript 深入理解之继承》资料参考:《JavaScript 深入理解之作用域链》t=N7T8t=N7T8《JavaScript 深入理解之继承》http://cavszhouyou.top/JavaScript%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E4%B9%8B%E7%BB%A7%E6%89%BF.html。
前端面试题（超全！）
weixin_57136547的博客
09-09 5057
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型CSS的盒子模型区别：标准盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：/*标准盒子模型*//*IE盒子模型*/伪元素什么是伪元素：是用于创建并操作元素的特定部分，它可以在DOM中创建一个不存在的元素，并为其添加样式。::before：在元素内容之前插入内容。
21道前端面试题，值得收藏～
祈澈菇凉
09-30 873
不点蓝字，我们哪来故事？1、scrollWidth,clientWidth,offsetWidth的区别scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视...
前端机试题目.zip
08-22
前端机试题目.zip
2020中旬初级前端开发机试题
11-11
本资源来自本人2020年中旬面试时遇到公司的机试题~如有想试试的下载zip文件即可，里面有记录，以及本人的解答~~~初学者，有更好的请@我~~~内附答案
【前端面试题】—19道有关前端测试的面试题(附答案)
web前端开发
03-17 1103
虽然工作中有专门的测试人员（QA工程师）帮我们实现对代码的测试，但是为保证开发的代码质量，我们还是要进行单测、自测。测试部分的面试题主要考察应试者对前端测试的了解，主要涉及单测和自测部分，...
Web前端面试题(附答案及解析)（2025.7月最新版）
热门推荐
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 30万+
Web前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！ （2025.7月最新版）感谢支持，你们的鼓励是我的动力！
前端机考编程题
阿赛
02-16 751
求解立方根 计算一个浮点数的立方根，不使用库函数。 保留一位小数。 function kaigeng(number, geng) { let fu = false; if (number < 0) { number = -number; fu = true; } let gen = 0; while(gen**geng <= number) { gen += 0.001; } return
字节前端机试题
QQ_852213985
08-17 1016
字节跳动外包前端面试题之一 机试过了，面试挂了… 很难受 … var arr = [], strUrl = "https://baidu.com?a=123&b=456#asd"; // strUrl = "https://baidu.com"; // strUrl = "https://baidu.com?a=123&b=456"; // strUrl = "https://baidu.com?a=123"; var arrUrl =
220道前端面试题（精选版 含答案）中
IT教育任姐姐的博客
12-03 835
接上篇、、、、 二十一、说说TCP传输的三次握手四次挥手策略 为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。 发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。 若在握手过程中某个阶段莫名中断，TCP协议会再...
什么是 Ajax 和 JSON，它们的优缺点？
qq_41696819的博客
08-02 5775
ajax的概念：ajax是一种通过后台与服务器进行少量的数据交换，使页面实现异步更新                     是一种创建交互式网页应用的网页开发技术。 json的概念：json是一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性 ajax的优缺点 优点：异步请求响应快，用户体验好；页面无刷新、数据局部更新；按需取数据，减少了冗余请求和服务器的负担； 缺点：异步回调问...
前端机试题
qq_50237207的博客
08-21 688
点击二级标题右侧的弹窗按钮，在页面中心弹出一个区块和一个蒙层，区块中展示当前按钮所在一级标题和二级标题的index。点击蒙层，隐藏蒙层和区块。
java机试面试题
最新发布
04-28
### Java机试面试题练习 以下是关于Java机试的相关面试题及其解答方式： #### 输入输出处理 在Java机试中，输入输出是一个常见的考点。以下是一道经典的A+B问题实现[^2]： ```java import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); while (scanner.hasNext()) { // 处理多组输入 int a = scanner.nextInt(); int b = scanner.nextInt(); System.out.println(a + b); // 输出两数之和 } scanner.close(); } } ``` 此代码展示了如何利用`Scanner`类读取标准输入并计算两个整数的和。 --- #### 华为OD机试试题解析 针对华为OD机试中的高频题目，通常会考察算法优化能力以及多种编程语言的应用场景[^1]。例如，在解决字符串反转问题时，可以采用如下方法（以Java为例）： ```java public class StringReversal { public static String reverseString(String s) { StringBuilder sb = new StringBuilder(s); return sb.reverse().toString(); // 使用StringBuilder内置方法reverse() } public static void main(String[] args) { String input = "hello world"; System.out.println(reverseString(input)); // 输出：dlrow olleh } } ``` 该程序实现了字符串的快速反转操作，时间复杂度为O(n)[^1]。 --- #### 高级知识点复习 对于更复杂的机试题目，可能涉及到多线程、并发控制等内容。根据高洪岩老师的总结[^3]，以下是一个简单的生产者消费者模型示例： ```java class Buffer { private final Object lock = new Object(); private boolean full = false; private int content = 0; public void produce(int value) throws InterruptedException { synchronized (lock) { while (full) { lock.wait(); // 如果缓冲区已满，则等待 } content = value; full = true; System.out.println("Produced: " + content); lock.notifyAll(); // 唤醒其他线程 } } public int consume() throws InterruptedException { synchronized (lock) { while (!full) { lock.wait(); // 如果缓冲区为空，则等待 } full = false; int result = content; System.out.println("Consumed: " + result); lock.notifyAll(); // 唤醒其他线程 return result; } } } public class ProducerConsumerExample { public static void main(String[] args) { Buffer buffer = new Buffer(); Thread producerThread = new Thread(() -> { try { for (int i = 1; i <= 5; i++) { buffer.produce(i); Thread.sleep(1000); // 模拟延迟 } } catch (InterruptedException e) { e.printStackTrace(); } }); Thread consumerThread = new Thread(() -> { try { for (int i = 1; i <= 5; i++) { buffer.consume(); Thread.sleep(1500); // 模拟延迟 } } catch (InterruptedException e) { e.printStackTrace(); } }); producerThread.start(); consumerThread.start(); } } ``` 这段代码演示了如何通过同步机制来协调多个线程之间的协作[^3]。 --- #### HTML与前端机试补充 除了传统的后台开发外，部分企业还会测试HTML/CSS/JavaScript等前端技能[^4]。下面展示了一个简单的表单验证功能： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form Validation</title> <script> function validateForm() { const nameInput = document.getElementById('name'); if (nameInput.value.trim() === '') { alert('Name is required!'); return false; } return true; } </script> </head> <body> <form onsubmit="return validateForm()"> Name:<br> <input type="text" id="name"><br><br> <button type="submit">Submit</button> </form> </body> </html> ``` 以上代码片段用于检测用户提交的数据是否合法[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值