2024年前端最新实战：京东购物车静态界面实现(1)，Web前端面试题高级

于 2024-05-14 00:09:21 发布
阅读量819 收藏 14
点赞数 12
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84619432/article/details/138825083
版权

web浏览器中的javascript

window对象

  • 计时器

  • 浏览器定位和导航

  • 浏览历史

  • 浏览器和屏幕信息

  • 对话框

  • 错误处理

  • 作为window对象属性的文档元素

function delete_shop(span) {

if (confirm(“确认删除吗!”)) {

if (span.parents()[2].children.length === 2) {

span.parents()[2].remove()

} else {

span.parents()[1].remove()

}

}

}

function add_shop(tag) {

let $shop_li = $(“#shops_li”)

let parents = tag.parents()

let res = parents[2].children[1];

let insertHtml = `

<img src=${parents[2].children[0].children[0].src}

alt=“”

style=“height:80px;width:80px”>

${res.children[0].children[0].textContent}

0.3mg*10片

${res.children[1].children[0].textContent}

-

1

+

${res.children[1].children[0].textContent}

<span οnclick=“delete_shop($(this))”>删除

移入关注

`

if ($shop_li.length !== 0) {

$shop_li.append(insertHtml)

} else {

insertHtml = `

  • 京东自营

    ${insertHtml}

    `

    console.log(insertHtml);

    $(“#shops_ul”).append(insertHtml)

    }

    }

    /----------头部样式----------/

    header {

    width: 100%;

    height: 25px;

    line-height: 25px;

    background: #e3e4e5;

    border-bottom: solid 1px #ddd;

    }

    header .header_nav {

    /background-color: red;/

    height: 100%;

    font-size: 8px;

    color: #999999;

    position: relative;

    }

    header ul {

    display: flex;

    }

    header ul.left {

    position: absolute;

    left: 0;

    }

    header ul.right {

    position: absolute;

    right: 0;

    }

    header ul li {

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 8px;

    }

    header ul li.home {

    cursor: pointer;

    }

    header ul li.home:hover {

    color: red;

    }

    header .down {

    margin-left: 5px;

    font-size: 14px;

    border-right: 1px solid #ccc;

    margin-right: 5px;

    }

    header .down_none {

    border-right: none

    }

    header .right_span {

    cursor: pointer;

    }

    header .right_span:hover {

    color: red;

    }

    /----------主体样式----------/

    article .article_top {

    height: 90px;

    /background-color: red;/

    display: flex;

    align-items: center;

    position: relative;

    }

    article .logo {

    display: block;

    margin-top: 2px;

    width: 134px;

    height: 42px;

    background: url(//misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@1x.png) no-repeat 0 0;

    background-size: 134px 42px;

    text-indent: -20000px;

    }

    article .search {

    background: #c91623;

    height: 24px;

    overflow: hidden;

    position: absolute;

    right: 0;

    display: flex;

    align-items: center;

    }

    article .search .itxt {

    border: 1px solid #c91623;

    height: 22px;

    line-height: 18px;

    width: 260px;

    outline: none

    }

    article .search .button {

    display: inline-block;

    vertical-align: top;

    width: 48px;

    height: 24px;

    background: #c91623;

    text-align: center;

    color: #fff;

    font-weight: 700;

    font-size: 12px;

    cursor: pointer;

    }

    article .article_position {

    margin-top: 10px;

    font-size: 13px;

    position: relative;

    height: 30px;

    display: flex;

    align-items: center;

    }

    article .article_position .left {

    color: #e2231a;

    font-weight: bold;

    position: absolute;

    left: 0;

    }

    article .article_position .right {

    display: flex;

    align-items: center;

    position: absolute;

    right: 0;

    }

    article .article_position .right .po {

    border: 1px solid #CECBCE;

    margin-left: 5px;

    padding: 1px;

    }

    article .article_show_info {

    margin-top: 20px;

    position: relative;

    background-color: #F3F3F3;

    height: 40px;

    display: flex;

    align-items: center;

    font-size: 12px;

    }

    article .article_show_info .info_select_all {

    padding-left: 10px;

    flex: 2;

    }

    article .article_show_info .info_goods {

    padding-left: 20px;

    flex: 12;

    }

    article .article_show_info .info_price {

    flex: 2.5;

    }

    article .article_show_info .info_count {

    flex: 3;

    }

    article .article_show_info .info_sum {

    flex: 2;

    }

    article .article_show_info .info_operate {

    flex: 2.5;

    }

    article .article_cart {

    height: 100%;

    font-size: 12px;

    }

    article .article_cart li .article_cart_top {

    display: flex;

    padding: 10px 0 5px 10px;

    box-shadow: 0 1px 5px #888888;

    margin-top: 10px;

    }

    article .article_cart li .article_cart_top span {

    margin-left: 10px;

    background-color: #DA0012;

    color: #Fff;

    padding: 1px;

    border-radius: 3px;

    }

    article .article_cart li .article_cart_content {

    height: 100px;

    display: flex;

    padding: 0 30px 0 10px;

    border: 1px solid #c5c5c5;

    }

    article .article_cart li .article_cart_content .article_cart_checkbox {

    width: 20px;

    padding-top: 5px;

    }

    article .article_cart li .article_cart_content .article_cart_goods {

    width: 300px;

    display: flex

    }

    article .article_cart li .article_cart_content .article_cart_goods .goods_img {

    padding: 0;

    margin-top: 3px;

    }

    article .article_cart li .article_cart_content .article_cart_goods .goods_msg {

    padding: 10px 0 0 20px;

    cursor: pointer;

    }

    article .article_cart li .article_cart_content .article_cart_goods .goods_msg:hover {

    color: red;

    }

    article .article_cart li .article_cart_content .article_cart_txt {

    padding-top: 10px;

    margin-left: 40px;

    }

    article .article_cart li .article_cart_content .article_cart_price {

    padding-top: 10px;

    margin-left: 140px;

    }

    article .article_cart li .article_cart_content .article_cart_count {

    display: flex;

    width: 80px;

    padding-top: 10px;

    margin-left: 50px;

    }

    article .article_cart li .article_cart_content .article_cart_count button {

    height: 16px;

    width: 16px;

    display: flex;

    align-content: center;

    justify-content: center;

    border: 1px solid #cbcbcb;

    }

    article .article_cart li .article_cart_content .article_cart_count button.left {

    line-height: 11px;

    }

    article .article_cart li .article_cart_content .article_cart_count div {

    width: 30px;

    height: 14px;

    font-size: 10px;

    display: flex;

    justify-content: center;

    border: 1px solid #cbcbcb;

    }

    article .article_cart li .article_cart_content .article_cart_sum {

    padding-top: 10px;

    margin-left: 50px;

    font-weight: bold;

    }

    article .article_cart li .article_cart_content .article_cart_operate {

    padding-top: 10px;

    margin-left: 45px;

    display: flex;

    flex-direction: column;

    }

    article .article_cart li .article_cart_content .article_cart_operate span {

    cursor: pointer;

    margin-bottom: 5px;

    }

    article .article_cart li .article_cart_content .article_cart_operate span:hover {

    color: red

    }

    article .article_settle {

    box-sizing: content-box;

    margin-top: 30px;

    height: 50px;

    border: 1px solid #c5c5c5;

    font-size: 12px;

    position: relative;

    }

    article .article_settle .settle_left {

    position: absolute;

    left: 0;

    height: 100%;

    display: flex;

    align-items: center;

    }

    article .article_settle .settle_left .article_cart_checkbox {

    margin-left: 10px;

    }

    article .article_settle span {

    margin-left: 15px;

    cursor: pointer;

    }

    article .article_settle span:hover {

    color: red;

    }

    article .article_settle .settle_right {

    position: absolute;

    right: 0;

    display: flex;

    }

    article .article_settle .settle_right .settle_right_select {

    color: #9c9698;

    cursor: pointer;

    position: absolute;

    right: 200px;

    width: 100px;

    margin-top: 3px;

    }

    article .article_settle .settle_right .settle_right_select span {

    padding: 0 1px;

    margin: 0;

    color: #E64347;

    font-weight: bold;

    }

    article .article_settle .settle_right .settle_right_price {

    color: #9c9698;

    margin-left: 20px;

    position: absolute;

    right: 80px;

    width: 100px;

    margin-top: 3px;

    }

    article .article_settle .settle_right .settle_right_price span {

    padding: 0 1px;

    margin: 0;

    color: #E64347;

    font-weight: bold;

    }

    article .article_settle .settle_right .settle {

    height: 52px;

    background-color: #E64347;

    position: absolute;

    right: 0;

    width: 90px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-weight: bold;

    font-size: 18px;

    cursor: pointer;

    margin-top: -1px;

    }

    article .article_recommend {

    height: 100%;

    /background-color: red;/

    }

    article .article_recommend .recommend_top {

    margin: 10px 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    }

    article .article_recommend .recommend_top div:first-child {

    margin: 5px 0 3px 0;

    }

    article .article_recommend .recommend_top div:first-child .line {

    color: #f1f1f1;

    }

    article .article_recommend .recommend_top div:first-child .content {

    font-weight: bold;

    font-size: 14px;

    }

    article .article_recommend .recommend_top div:first-child .content i {

    font-size: 18px;

    color: #E64347;

    }

    article .article_recommend .recommend_top div:last-child {

    margin-top: 5px;

    font-size: 12px;

    Vue 面试题

    1.Vue 双向绑定原理
    2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
    3.你是如何理解 Vue 的响应式系统的?
    4.虚拟 DOM 实现原理
    5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
    6.Vue 中 key 值的作用？
    7.Vue 的生命周期
    8.Vue 组件间通信有哪些方式?
    9.watch、methods 和 computed 的区别?
    10.vue 中怎么重置 data?
    11.组件中写 name 选项有什么作用？
    12.vue-router 有哪些钩子函数?
    13.route 和 router 的区别是什么？
    14.说一下 Vue 和 React 的认识，做一个简单的对比
    15.Vue 的 nextTick 的原理是什么？
    16.Vuex 有哪几种属性?
    17.vue 首屏加载优化
    18.Vue 3.0 有没有过了解？
    19.vue-cli 替我们做了哪些工作？
    …

    算法

    开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

    1. 冒泡排序
    2. 选择排序
    3. 快速排序
    4. 二叉树查找: 最大值、最小值、固定值
    5. 二叉树遍历
    6. 二叉树的最大深度
    7. 给予链表中的任一节点，把它删除掉
    8. 链表倒叙
    9. 如何判断一个单链表有环
    10. 给定一个有序数组，找出两个数相加为一个目标数
      …

    由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

    7;

    }

    article .article_recommend .recommend_top div:last-child {

    margin-top: 5px;

    font-size: 12px;

    Vue 面试题

    1.Vue 双向绑定原理
    2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
    3.你是如何理解 Vue 的响应式系统的?
    4.虚拟 DOM 实现原理
    5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
    6.Vue 中 key 值的作用？
    7.Vue 的生命周期
    8.Vue 组件间通信有哪些方式?
    9.watch、methods 和 computed 的区别?
    10.vue 中怎么重置 data?
    11.组件中写 name 选项有什么作用？
    12.vue-router 有哪些钩子函数?
    13.route 和 router 的区别是什么？
    14.说一下 Vue 和 React 的认识，做一个简单的对比
    15.Vue 的 nextTick 的原理是什么？
    16.Vuex 有哪几种属性?
    17.vue 首屏加载优化
    18.Vue 3.0 有没有过了解？
    19.vue-cli 替我们做了哪些工作？
    …
    [外链图片转存中…(img-cNA66v6Q-1715616536652)]

    算法

    开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

    1. 冒泡排序
    2. 选择排序
    3. 快速排序
    4. 二叉树查找: 最大值、最小值、固定值
    5. 二叉树遍历
    6. 二叉树的最大深度
    7. 给予链表中的任一节点，把它删除掉
    8. 链表倒叙
    9. 如何判断一个单链表有环
    10. 给定一个有序数组，找出两个数相加为一个目标数
      …
      [外链图片转存中…(img-912B5RDZ-1715616536653)]

    由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

2401_84619432
关注
  • 12
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Ajax、json实现京东购物车结算界面的数据交互实例
12-29
<input class=fl style=margin:15px 10px 0 10px; type=checkbox name= /> 全选 商品 单价</li>
1.本设计是基于京东购物网站实现的前端页面.zip
01-21
在本设计中，我们主要关注的是基于京东购物网站的前端页面实现。前端开发是构建互联网应用的重要部分，它涉及到用户与网站之间的交互和视觉呈现。在这个项目中，开发者运用了一系列前端技术来创建一个功能丰富的购物...
京东HTML+css+js+php+数据库
FZXCY的博客
10-19 5100
概括：这是模范京东的小型项目，登录，注册，首页，商品详情，购物车。 一.文件位置一定要在安装的php文件里面，数据库是php自带的小型数据库 数据库的搭建
Vuex详解
输入技术、输出想法
04-28 7322
Vuex详解认识VuexVuex是做什么的?管理什么状态呢?单界面的状态管理单界面状态管理的实现多界面状态管理Vuex基本使用安装使用Vuex简单的案例Vuex核心概念StateState单一状态树GettersGetters基本使用Getters作为参数和传递参数MutationMutation状态更新Mutation传递参数Mutation提交风格Mutation响应规则Mutation常量类型 –概念Mutation同步函数ActionAction的基本定义Action返回的PromiseModule
Vuex：简介和基本使用
程序员无羡的博客
04-07 4311
目标：明确Vuex是什么，应用场景以及优势state: {count: 0},// 定义mutations})通过mutations修改state的步骤1.定义 mutations 对象，对象中存放修改 state 的方法2.组件中提交调用 mutations(通过$store.commit(‘mutations的方法名’))getters: {// getters函数的第一个参数是 state// 必须要有返回值。
Vue——vuex简介
mantou_riji的博客
07-22 2174
vuex是专门在Vue中实现状态(）管理的一个Vue，对vue应用中 多个组件的共享状态(）进行(读/写)。 vuex也是一种，且适用于任意组件间通信。引入： 需求：组件B、C、D 都需要组件A上的数据X。 如果使用： 这时候我们就会想既然所有组件都要使用组件A中的数据我们为什么不直接把组件A中的数据提取出来作为公共数据呢，这就引入了vuex。 vuex不属于任何一个组件，里面存储的是组件公用的数据，任何组件都可以获取和修改vuex中的数据：所以只要用到共享数据就可以使用vuex。如果vue组件的请求有任
前端技术干货文章（收藏）
黄新的博客
06-29 8079
让你受益匪浅的前端技术干货系列 这是一个凝聚了很多优秀前端开发者心血的精选技术干货列表，希望你能从中学习提升前端开发技术。如果觉得这个系列有收获，欢迎推荐给朋友。 有新内容加入后，这个列表每月将更新一次，除在公号推送外，还将在 Github 、知乎专栏 和 前端大全主页君的个人微信同步更新。 // 最新更新时间 2020/6/28 一）前端基本功 前端相关的基础知识 《HTTP/3 来了 ！未来可期》 《你可能已经忽略的 git commit 规范》 《手...
2024年汇编语言的程序设计方法（循环结构和分支结构），2024年字节跳动+京东+美团面试总结
最新发布
2301_82244279的博客
05-07 810
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
各类商城前端静态界面模板
04-21
本主题聚焦于“各类商城前端静态界面模板”，这些模板是预设计的、可重复使用的网页布局，专为电子商务平台定制，以提供吸引人的用户体验和高效的功能。以下是关于这个主题的详细知识点： 1. **前端开发基础**：...
web购物车（javascript实现）
08-31
总结来说，"web购物车（javascript实现）"项目涵盖了JavaScript在前端开发中的基础应用，如数据操作、事件监听、DOM操作和用户交互，这些都是成为一个优秀web前端开发者必备的技能。通过对该项目的学习和实践，...
react-infinite-scroll:ReactJS无限滚动方法
05-12
React无限滚动 ReactJS无限滚动方法。
Scroll5版下拉刷新上拉加载Dome
10-30
Dome使用的官方CSS文件+iscroll-probe.js+jquery-1.9.1.min.js Scroll5基本解决了4存在个各种不兼容Bug
利用npm 安装删除模块的方法
01-02
npm安装模块 【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录； 【npm install -g xxx】利用npm安装全局模块xxx； 本地安装时将模块写入package.json中： 【npm install xxx】安装但不写入package.json； 【npm install xxx –save】 安装并写入package.json的”dependencies”中； 【npm install xxx –save-dev】安装并写入package.json的”devDependencies”中。 npm 删除模块 【npm uninstall xxx
react-reactscrollbarReact的滚动条组件
08-15
react-scrollbar - React的滚动条组件
cache-cart:简单，静态的PayPal购物车，可轻松实现前端
05-14
一个简单的Javascript驱动的PayPal购物车，不需要任何后端代码。 查看。 指示： 导入css： <link href="./cache-cart.css" media="screen" rel="stylesheet" type="text/css" /> 导入reqwest以进行ajax调用，...
分享 50 个前端效率工具、网站和书籍
前端达人
02-29 172
本文包含了在线编译，在线编辑、实用工具、可视化工具、各种前端电子书等50多个网站，快放到你的收藏夹吃灰吧如果你看到最后了，记得给我一个免费的赞哦在线编译（编辑）、playgroundJS 代码混淆www.jsfuck.com/[1]http-::www.jsfuck.com:.jpg嗯，优点是你可以用来给你的前端工程师好友搞恶作剧，缺点是只能用一次SCSS 转 CSS 在线编译www.sassme...
VUE经典面试题2022年，面试常用题
海贼王某人的博客
03-30 4898
v-for为什么要加key 值？ vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件,key的作用主要是为了高效的更新虚拟DOM。 v-if和v-for 不能同用的原因？ 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，所以不推荐v-if和v-for同时使用，可以把list放在计算属性中遍历 v-model的实现原理是什么？ v-model主要提供了两个功能，view层输入值影响data
【Intersection Observer 介绍】React 中使用 Intersection Observer 和 LazyLoad来实现无限滚动，分页和懒加载
WarrenLee的博客
05-25 2390
实现前需要了解这些 Intersection Observer API 根据MDN的文档，“Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。”。 通俗讲，就是一个能够监听元素是否到了当前视口的事件，一步到位 使用例子 对于实现一张图片的懒加载，我们可以采用ntersection Observer + dataSet。假如我们的电脑是1920*1080的话，现在有个图片，他距离顶部有1500px，我们希望在它在滚动到可视区
Web前端开发技术-综合案例（无缝轮播图）.pptx
07-07
本资源是一份关于Web前端开发的综合案例，主要聚焦于"无缝轮播图"和"留言板"功能，以及"电梯导航"的设计与实现。首先，无缝轮播图部分讲解了如何通过焦点图的横向排列、外边框设置和left值变化来实现图片的无缝切换...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值