基于华为云主机 CodeArts IDE 与 JavaScript 的多彩主题背景切换-优快云博客

本案例由开发者：华为2024年第三批次协同育人项目-山东科技大学-崔宾阁老师提供

1 概述

1.1 案例介绍

现代网页应用日益注重用户的个性化体验，主题切换作为常见的自定义功能，有助于提升界面的美观性和灵活性。在不同场景下提供多种颜色主题，已成为提升用户满意度与界面友好度的重要方式。本案例围绕“多彩主题背景切换”的功能开发，展示如何构建支持用户选择主题并实时更新界面的前端页面。

本案例依托华为开发者空间提供的云主机与CodeArts IDE，结合JavaScript技术，实现了网页多主题背景的动态切换。开发者可在云主机上高效完成前端代码的编写，并通过事件驱动动态修改CSS样式，实现实时主题切换，背景的选择可以包括纯色背景、渐变色背景或动态变化的图案等。开发者可在云端环境中进行代码编写与运行，利用弹性高效的计算资源，无需关注底层基础设施，即可专注于前端功能的实现。

通过实践，开发者将掌握事件绑定、DOM操作及动态样式控制，了解多主题设计与实现方法。同时，开发者将能够在云主机上使用JavaScript框架进行Web应用开发。通过使用华为云主机的开发工具，开发者不仅能够高效进行项目开发，还将提升个性化网页设计能力，为构建灵活、可定制的Web应用打下坚实的基础。

1.2 案例时间

本案例总时长预计30分钟。

1.3 案例流程

20c369b0a24642939d774f406a1b206e

说明：

① 申请并登录华为开发者空间—云主机，打开CodeArts IDE创建工程；

② 在云主机CodeArts IDE中编写案例项目代码；

③ 通过Firefox启动案例项目的入口文件。

1.4 资源总览

本案例预计花费总计0元。

资源名称	规格	单价（元）	时长（分钟）
开发者空间—云主机	鲲鹏通用计算增强型 kC2 \| 4vCPUs \| 8G \| Ubuntu	免费	30
CodeArts IDE	CodeArts IDE for Java	免费	30

2 操作步骤

2.1 配置开发者空间—云主机

本案例中，使用华为开发者空间所提供的云主机平台以及CodeArts+JavaScript开发工具，完成多彩主题背景切换案例的开发工作。点击链接（ https://support.developer.huaweicloud.com/doc/development/resource-tools/zh-cn_topic_0000002367559525-0000002367559525 ）可跳转至免费领取云主机指南。

1. 在浏览器中输入华为云开发者空间网址：https://developer.huaweicloud.com/developerspace，进入到华为云开发者空间页面。

在华为开发者空间页面点击“免费领取”，跳转到开发者空间页面，如未领取根据页面提示进行云主机领取。

feb0e1b93e8345aea2a322beac3a2b18

2. 在开发者空间页面，点击左侧“工作台”按钮进入工作台页面，再点击“配置云主机”进行云主机的配置。

b6b885e7f4b44457a0c835fec8d8cf86

3. 在配置云主机窗口中自定义云主机名称，配置完毕后点击“安装”。

f908cf7e575e4f5a9f096a821c15fff3

4. 安装完毕后点击“打开云主机”>“进入桌面”即可进入云主机。

2596b9e85653484c9852816dbee68e69

5. 等待环境云主机下载镜像、安装系统、安装工具集，首次进入云主机大约需要3至5分钟。

9577e9353a3c45619afe1601f771fc8f

6. 环境准备完毕后，即可进入云主机，云主机桌面如下图所示。

00e3ba8c36374e7d91ec972056de44b2

2.2 创建项目

1. 双击打开云主机桌面上的CodeArts IDE for Java（虽然IDE名称带有“Java”，但本案例用于编写JavaScript前端代码）。

0006713778c04926ac7f97de93de6c25

2. 点击左上角文件，打开新建，选择新建工程，创建多彩主题背景切换工程项目。

10ec9d2f501044d8837033cf6dcaa3a0

3. 新建工程后，在工程名称栏输入：ColorfulChange，工程存放位置、构建系统及JDK直接使用默认配置，再点击右下方蓝色“创建”按钮。

a5e8c8e3b5444f2e8eb44b6726c3a227

4. 在新建的“ColorfulChange”工程项目中，点击左上角新建文件夹，输入：images，输入完毕后按下回车键创建完毕，该文件夹用于存放网页的背景图，可通过点击此链接（https://pan.baidu.com/share/init?surl=gHMhoV9iEc6SBirWR4vr0A&pwd=9xnu）下载案例中用到的四张背景图像（bg_yellow.jpg、bg_purple.jpg、bg_green.jpg、bg_gray_orange.jpg）。

203904d12d0f42abbdbde5227b90dc9f

5. 同样在“ColorfulChange”工程项目中，点击左上角新建HTML文件，输入：background-page.html，输入完毕后按下回车键，该文件用于存放实现多彩主题背景切换的网页代码，代码内容在后续文中进行介绍。

9f7eab0c918348eca651a453cf0727f6

6. 代码编写完成后，鼠标右键单击“background-page.html”文件，选择“打开所在的文件夹”，找到多彩主题背景切换项目在云主机中的位置。

6ab1695b1e964fd18075d9dede7ace1e

7. 在打开的项目文件夹中，鼠标右键单击编写好的网页代码文件，依次点击“打开方式”>“Firefox”，在火狐浏览器中查看多彩主题背景切换页面。

79ae0b8ae5054e1f9dc9fe7e3e3718ea

2.3 编写代码

以下是多彩主题背景切换网页的实现代码（存放在backqround-page.html文件），可供参考学习。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box; /* 添加盒模型，防止边框影响布局 */
        }
        body {
            background: url(images/bg_green.jpg) no-repeat center center;
            background-size: cover; /* 使背景图片铺满整个页面 */
        }
        .nav {
            display: flex; /* 使用 flex 布局让图片整齐排列 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            gap: 10px; /* 图片之间的间距 */
            width: 700px;
            height: 200px;
            margin: 100px auto; /* 居中显示 */
            border: 1px solid #ccc;
            padding: 10px; /* 添加内边距 */
            background-color: rgba(255, 255, 255, 0.7); /* 添加半透明背景 */
        }
        img {
            width: 150px; /* 统一图片宽度 */
            height: 200px; /* 统一图片高度 */
            object-fit: cover; /* 保持图片比例，裁剪过大部分 */
            border-radius: 8px; /* 图片圆角 */
            cursor: pointer; /* 鼠标悬停时变成手指 */
            transition: transform 0.3s ease, opacity 0.3s ease; /* 添加动画效果 */
        }
        img:hover {
            transform: scale(1.1); /* 鼠标悬停时放大图片 */
            opacity: 0.8; /* 图片透明度变化 */
        }
    </style>
</head>
<body>
    <div class="nav">
        <img src="images/bg_green.jpg" alt="">
        <img src="images/bg_gray_orange.jpg" alt="">
        <img src="images/bg_purple.jpg" alt="">
        <img src="images/bg_yellow.jpg" alt="">
    </div>
    <script>
        var images = document.querySelector('.nav').querySelectorAll('img'); //获取nav下面的 所有img
        for (var i = 0; i < images.length; i++) { //循环
            images[i].onclick = function() { //images里面的第 i 个 点击事件
                console.log(this.src);
                document.body.style.backgroundImage = 'url(' + this.src + ')';
                // this.src 就是我们点击图片的路径images/bg_gray_orange.jpg
                // 把这个路径 this.src 给body 就可以了
                //body的背景图片 url(images/bg_green.jpg) 更换为 '+this.src+';
            }
        }
    </script>
</body>
</html>

本案例通过综合运用HTML的结构布局、CSS的样式与动画、以及JavaScript的DOM操作与事件绑定，实现了一个点击缩略图切换背景图的多彩主题背景切换网页，主要技术实现如下：

1. HTML结构：整体上HTML只是用来放置内容和提供基础布局。使用标准的<!DOCTYPE html>、<head>、<body>结构，在<div class="nav">中放置四张背景图片，作为用户可以点击的“选项”。

2. CSS布局：全局设置通过{ margin:0; padding:0; box-sizing:border-box; }统一了盒模型，避免浏览器默认边距对布局的影响。页面背景图通过body的background-image设置，并使用background-size: cover让图片自适应并铺满整个窗口。.nav使用display:flex，结合 justify-content:center和align-items:center，让图片在容器中水平、垂直居中排列。图片样式方面，统一了尺寸，使用object-fit: cover保持图片比例并裁剪多余部分，border-radius添加圆角效果。动态交互效果通过:hover状态实现，鼠标悬停时通过transform: scale(1.1)放大图片并通过opacity: 0.8降低透明度，transition动画实现平滑过渡效果。

3. JavaScript动态互动：利用document.querySelector('.nav').querySelectorAll('img')选中.nav下的所有<img>图片；用for循环遍历所有图片，并给每张图片绑定onclick事件；当点击某张图片时：this.src获取到该图片的路径；document.body.style.backgroundImage = 'url(' + this.src + ')' 将页面背景换成这张图片，由此实现点击缩略图切换页面背景的功能。