前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
腾讯云架构师技术同盟
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP腾讯云架构师技术同盟
返回腾讯云官网
社区首页 >专栏 >【Html.js——功能实现】产品360度展示（蓝桥杯真题-18557）【合集】

【Html.js——功能实现】产品360度展示（蓝桥杯真题-18557）【合集】

作者头像
Rossy Yan
发布于 2025-02-21 09:34:26
发布于 2025-02-21 09:34:26
5100
代码可运行
举报
文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台
运行总次数：0
代码可运行

背景介绍

在电子商务网站中，用户可以通过鼠标或手势交互实现 360 度全方位查看产品，提升用户体验。现在需要你设计一个 Pipeline 管道函数，用于控制 360 度展示产品的动画序列，通过管道连接各个动画步骤，使产品以流畅的方式呈现给用户。

准备步骤

本题已经内置了初始代码，打开实验环境，目录结构如下：

代码语言：javascript
代码运行次数：0
复制
├── css
├── effect.gif
├── js
│   ├── index.js
│   └── utils.js
└── index.html

其中：

  • css 是样式文件夹。
  • index.html 是主页面。
  • js/index.js 是动画序列代码的 js 文件。
  • js/utils.js 是待补充代码的 js 文件。
  • effect.gif 是页面最终的效果图。

在浏览器中预览 index.html 页面效果如下：

目标效果

请在 js/utils.js 文件中的 TODO 部分，实现以下目标：

封装一个支持异步的 pipeline 管道函数，能够按顺序执行一系列异步操作，每个异步操作的结果将作为下一个异步操作的输入。

函数参数说明：

  • initialValue：管道的初始值（即 sequence 中第一个函数的参数）。它是整个异步管道的起点。第一个异步步骤将以此值开始，并且后续步骤将在前一步骤的输出基础上进行。
  • sequence：是一个由具有返回值和可以传参的函数组成的数组，函数可以是普通函数也可以是 Promise 函数。每个函数接收前一个步骤的输出（即该函数的参数是上一个函数的执行结果），并返回一个 Promise。这个数组定义了整个管道中的处理步骤和它们的顺序。

函数返回值说明：

  • pipeline 函数返回一个 Promise，这个 Promise 最终解析为整个管道执行完成后的结果。

测试用例如下：

请注意以下用例仅供参考，实际判题时会修改测试用例，请保证代码的通用性。

  • 示例 1：sequence 中都为普通函数
代码语言：javascript
代码运行次数：0
复制
function fn1(data){ 
    return data +'2.开始左转'
 }
 function fn2(data){ 
    return data+'3.开始右转'
 }
 pipeline('1.动画开始',[fn1, fn2]).then(res => {
     console.log(res)  
 })
// 打印结果为：'1.动画开始2.开始左转3.开始右转'
  • 示例 2：sequence 中都为 promise 函数
代码语言：javascript
代码运行次数：0
复制
function fn1(data){ 
  return new Promise(resolve => {
      resolve(data+'->执行第一个动画')
  })
}
function fn2(data){ 
  return new Promise(resolve => {
      resolve(data+'->执行第二个动画')
  })
}
pipeline('动画开始',[fn1, fn2]).then(res => {
    console.log(res)
})
// 打印结果为：'动画开始->执行第一个动画->执行第二个动画' 

完成后，点击屏幕触发动画序列，最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

要求规定

  • 请勿修改 js/utils.js 文件外的任何内容。
  • 判题时会随机提供不同参数对 pipeline 函数功能进行检测，请保证函数的通用性，不能仅对测试数据有效。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题⽆法通过。

判分标准

  • sequence 参数都为普通函数且满足需求正确输出，得 5 分。
  • sequence 参数都为 promise 函数且满足需求正确输出，得 5 分。

通关代码✔️

代码语言：javascript
代码运行次数：0
复制
//utils.js
/**
 * @param {*} initialValue 初始值
 * @param {Array} sequence 由普通函数或 Promise 函数组成的数组
 * @return {Promise} 
 */

const pipeline = (initialValue, sequence) => {
    // TODO: 待补充代码
    let promise = Promise.resolve(initialValue);

    for(let func of sequence){
        promise = promise.then(result=>{
            return func(result);
        })
    }
    return promise;
};



// 检测需要，请勿删除
try {
    module.exports = { pipeline };
} catch { }

代码解析📑

一、HTML 部分

代码语言：javascript
代码运行次数：0
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品360度展示</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>产品展示</h1>
  <p class="tip">点击屏幕，360度产品展示</p>
  <div class="computer">
    <div class="inner">
      <div class="screen">
        <div class="face-one">
          <div class="camera"></div>
          <div class="display">
            <div class="shade">
              <div class="computer-screen">
                <div class="loading-bar"></div>
                <div class="loading-text">正在启动...</div>
              </div>
            </div>
          </div>
          <span>蓝桥云课</span>
        </div>
        <title>Layer 1</title>
      </div>
      <div class="computerbody">
        <div class="face-one">
          <div class="touchpad">
          </div>
          <div class="keyboard">
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key space"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
          </div>
        </div>
        <div class="pad one"></div>
        <div class="pad two"></div>
        <div class="pad three"></div>
        <div class="pad four"></div>
      </div>
    </div>
    <div class="shadow"></div>
  </div>
  <script src="./js/utils.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>

1. 头部信息：

  • <!DOCTYPE html>：声明文档类型为 HTML5。
  • <meta charset="UTF-8">：设置字符编码为 UTF - 8。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：使页面在不同设备上正确显示，宽度适应设备宽度，初始缩放比例为 1。
  • <title>产品360度展示</title>：设置页面标题。
  • <link rel="stylesheet" href="./css/style.css">：引入外部 CSS 文件。

2. 主体内容：

  • <h1>产品展示</h1>：显示页面主标题。
  • <p class="tip">点击屏幕，360度产品展示</p>：显示提示信息，告知用户点击屏幕触发展示。
  • <div class="computer">：电脑模型的容器，包含屏幕、机身等部分。
    • <div class="inner">：内部容器，用于 3D 变换。
      • <div class="screen">：电脑屏幕部分，包含摄像头、显示屏等。
        • <div class="computer-screen">：电脑屏幕内部区域，包含加载条和加载文字。
      • <div class="computerbody">：电脑机身部分，包含触摸板、键盘等。
    • <div class="shadow">：电脑的阴影效果。

3. 脚本引入：

  • <script src="./js/utils.js"></script> 和 <script src="./js/index.js"></script>：引入外部 JavaScript 文件。

二、CSS 部分

代码语言：javascript
代码运行次数：0
复制
.tip{
    position: fixed;
    bottom: 5px;
    left: 0;
    font-size: 16px;
    width: 100%;
    text-align: center;
}
.computer {
    width: 150px;
    height: 96px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%) scale(2);
    perspective: 500px;
}
/* 其他样式规则 */

1. 提示信息样式：

  • .tip：提示信息的样式，固定在屏幕底部中央，字体大小为 16px。

2. 电脑模型样式：

  • .computer：电脑模型的容器样式，设置宽度、高度、位置、缩放比例和透视效果。
  • .shadow：电脑阴影的样式，设置位置、大小和阴影效果。
  • .screen 和 .computerbody：分别设置电脑屏幕和机身的样式，包括背景、边框、3D 变换等。
  • .loading-bar 和 .loading-text：加载条和加载文字的样式，使用动画实现加载效果。
  • 定义了多个 @keyframes 动画，如 loading 实现加载条的增长，fade - in 实现加载文字的淡入效果，hide - loading - bar 实现加载条的隐藏动画。

三、JavaScript 部分

代码语言：javascript
代码运行次数：0
复制
/**
 * @param {*} initialValue 初始值
 * @param {Array} sequence 由普通函数或 Promise 函数组成的数组
 * @return {Promise} 
 */
const pipeline = (initialValue, sequence) => {
    let promise = Promise.resolve(initialValue);

    for(let func of sequence){
        promise = promise.then(result=>{
            return func(result);
        })
    }
    return promise;
};

// 检测需要，请勿删除
try {
    module.exports = { pipeline };
} catch { }

1. pipeline 函数：

  • 该函数接收两个参数：initialValue 为初始值，sequence 是一个由普通函数或 Promise 函数组成的数组。
  • 使用 Promise.resolve(initialValue) 将初始值包装成一个已解决的 Promise。
  • 通过 for...of 循环遍历 sequence 数组，使用 then 方法将每个函数依次应用到前一个 Promise 的结果上，确保函数按顺序执行。
  • 最后返回一个 Promise，该 Promise 在所有函数执行完成后解析为最终结果。

2. 模块导出：

  • try { module.exports = { pipeline }; } catch { }：尝试将 pipeline 函数导出为一个模块，可能用于测试或其他模块引用。

四、工作流程▶️ 1. 页面加载：

  • 浏览器解析 HTML 文件，构建 DOM 树。
  • 加载 CSS 文件，根据样式规则渲染页面，显示电脑模型和提示信息。
  • 加载 JavaScript 文件，定义 pipeline 函数。

2. 用户交互（点击屏幕）：

  • 虽然当前代码中未体现点击屏幕的具体处理逻辑，但推测在 js/index.js 文件中会监听点击事件。
  • 点击屏幕后，可能会触发一系列异步操作，利用 pipeline 函数按顺序执行这些操作。
  • 例如，可能会先显示加载条和加载文字，通过 CSS 动画实现加载效果。
  • 加载完成后，可能会隐藏加载条和加载文字，显示产品的 360 度展示效果，可能涉及到 3D 变换等操作。

3. 异步操作执行：

  • 如果有异步操作，会使用 pipeline 函数按顺序执行。每个异步操作的结果会作为下一个异步操作的输入，最终完成整个展示流程。

测试结果👍

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-02-20，如有侵权请联系 cloudcommunity@tencent.com 删除
html
class
产品
动画
函数

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

html
class
产品
动画
函数
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 背景介绍
  • 准备步骤
  • 目标效果
  • 要求规定
  • 判分标准
  • 通关代码✔️
  • 代码解析📑
    • 一、HTML 部分
    • 二、CSS 部分
    • 三、JavaScript 部分
  • 测试结果👍
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论