HTML新春烟花

news2025/1/22 13:36:17

系列文章

序号目录
1HTML满屏跳动的爱心（可写字）
2HTML五彩缤纷的爱心
3HTML满屏漂浮爱心
4HTML情人节快乐
5HTML蓝色爱心射线
6HTML跳动的爱心（简易版）
7HTML粒子爱心
8HTML蓝色动态爱心
9HTML跳动的爱心（双心版）
10HTML橙色动态粒子爱心
11HTML旋转爱心
12HTML爱情树
13HTML3D相册
14HTML旋转相册
15HTML基础烟花秀
16HTML炫酷烟花秀
17HTML粉色烟花秀
18HTML新春烟花
19HTML跨年烟花
20HTML音乐圣诞树
21HTML大雪纷飞
22HTML想见你
23HTML元素周期表
24HTML飞舞的花瓣
25HTML星空特效
26HTML黑客帝国字母雨
27HTML哆啦A梦
28HTML流星雨
29HTML沙漏爱心
30HTML爱心字母雨
31HTML爱心流星雨
32HTML生日蛋糕
33HTML3D旋转相册
34HTML流光爱心
35HTML满屏飘字
36HTML飞舞爱心
37HTML星空圣诞树
38HTML礼物圣诞树
39HTML粉色爱心

目录

系列文章

写在前面

技术需求

完整代码

下载代码

代码分析

1. HTML 基础结构

2. 引入外部脚本与样式

2.1 引入gameCanvas-4.0.js与script.js

2.2 引入 Live2D 动效

2.3 引入图片放大功能

2.4 引入鼠标特效

2.5 音乐播放器

2.6 随机线条特效

3. 雪花特效

4. 整体设计与效果

4.1 页面背景与气氛

4.2 技术实现

5. 总结

写在后面

写在前面

HTML语言实现新春烟花动画的完整代码，可以用浏览器直接运行。

技术需求

  1. HTML5：

    • 使用了<canvas>标签用于绘制动态效果（如随机线条、雪花飘落等）。
    • 基本的HTML结构，定义了页面的头部和主体内容。

  2. CSS3：

    • 用于设置样式，特别是背景和元素布局。
    • position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;等样式用于确保画布元素始终显示在最前面，并防止其与用户交互。

  3. JavaScript：

    • DOM操作：通过JavaScript操作页面元素，控制特效的生成和行为。
    • 动画效果：使用requestAnimationFrame和setInterval等方法实现高效的动画效果，如随机线条的绘制和雪花的飘落。
    • 事件监听：监听鼠标事件（如点击、移动等），为用户提供动态反馈和互动体验。

  4. 外部库：

    • jQuery：简化DOM操作、动画实现以及事件处理。用于雪花特效和图片放大效果。
    • Bootstrap：提供了部分样式支持，尤其是在布局和交互方面（如使用transition.js实现元素的平滑过渡）。
    • APlayer：用于实现背景音乐播放，提供了易于使用的音乐播放器界面和控制功能。
    • Meting.js：通过<meting-js>标签从网易云音乐加载音乐播放列表，结合APlayer实现音乐的流式播放。

  5. Live2D：

    • 引入外部的Live2D库，用于加载和渲染动态2D角色模型（如人物表情和动作等），增加页面的互动性和趣味性。

  6. Canvas技术：

    • 通过<canvas>元素和2D上下文API绘制图形。多个动态效果，如随机生成的线条、雪花飘落等，均是通过Canvas进行绘制和动画处理的。

  7. 外部CDN服务：

    • 引用了多个CDN资源，如APlayer、Meting.js、jQuery、Bootstrap等，简化了开发过程，并提高了页面加载速度。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>新年快乐</title>
</head>

<body>
  <script src="js/gameCanvas-4.0.js"></script>
  <script src="js/script.js"></script>
  <!--live2d-->
  <script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>
  <!--live2dend-->

  <!--放大图片-->
  <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css" />
  <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
  <script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script>
  <script type="text/javascript">
    $("#cnblogs_post_body img").attr("data-action", "zoom");
  </script>
  <!--放大图片end-->

  <!--鼠标特效-->
  <script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
  <canvas width="1777" height="841" style="
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 2147483647;
        pointer-events: none;
      "></canvas>
  <!--鼠标特效 end-->

  <!-- require APlayer -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
  <!-- require MetingJS -->
  <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
  <meting-js id="2829883282" lrc-type="0" server="netease" order="random" type="playlist" fixed="true" autoplay="false"
    list-olded="true">
  </meting-js>

  <!-- 随机线条 -->
  <script>
    !(function () {
      function n(n, e, t) {
        return n.getAttribute(e) || t;
      }
      function e(n) {
        return document.getElementsByTagName(n);
      }
      function t() {
        var t = e("script"),
          o = t.length,
          i = t[o - 1];
        return {
          l: o,
          z: n(i, "zIndex", -1),
          o: n(i, "opacity", 0.6),
          c: n(i, "color", "148,0,211"),
          n: n(i, "count", 99),
        };
      }
      function o() {
        (a = m.width =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth),
          (c = m.height =
            window.innerHeight ||
            document.documentElement.clientHeight ||
            document.body.clientHeight);
      }
      function i() {
        r.clearRect(0, 0, a, c);
        var n, e, t, o, m, l;
        s.forEach(function (i, x) {
          for (
            i.x += i.xa,
            i.y += i.ya,
            i.xa *= i.x > a || i.x < 0 ? -1 : 1,
            i.ya *= i.y > c || i.y < 0 ? -1 : 1,
            r.fillRect(i.x - 0.5, i.y - 0.5, 1, 1),
            e = x + 1;
            e < u.length;
            e++
          )
            (n = u[e]),
              null !== n.x &&
              null !== n.y &&
              ((o = i.x - n.x),
                (m = i.y - n.y),
                (l = o * o + m * m),
                l < n.max &&
                (n === y &&
                  l >= n.max / 2 &&
                  ((i.x -= 0.03 * o), (i.y -= 0.03 * m)),
                  (t = (n.max - l) / n.max),
                  r.beginPath(),
                  (r.lineWidth = t / 2),
                  (r.strokeStyle = "rgba(" + d.c + "," + (t + 0.2) + ")"),
                  r.moveTo(i.x, i.y),
                  r.lineTo(n.x, n.y),
                  r.stroke()));
        }),
          x(i);
      }
      var a,
        c,
        u,
        m = document.createElement("canvas"),
        d = t(),
        l = "c_n" + d.l,
        r = m.getContext("2d"),
        x =
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function (n) {
            window.setTimeout(n, 1e3 / 45);
          },
        w = Math.random,
        y = { x: null, y: null, max: 2e4 };
      (m.id = l),
        (m.style.cssText =
          "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o),
        e("body")[0].appendChild(m),
        o(),
        (window.onresize = o),
        (window.onmousemove = function (n) {
          (n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);
        }),
        (window.onmouseout = function () {
          (y.x = null), (y.y = null);
        });
      for (var s = [], f = 0; d.n > f; f++) {
        var h = w() * a,
          g = w() * c,
          v = 2 * w() - 1,
          p = 2 * w() - 1;
        s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 });
      }
      (u = s.concat([y])),
        setTimeout(function () {
          i();
        }, 100);
    })();
  </script>

  <!-- 雪花特效 -->
  <script type="text/javascript">
    (function ($) {
      $.fn.snow = function (options) {
        var $flake = $('<div id="snowbox" />')
          .css({ position: "absolute", "z-index": "9999", top: "-50px" })
          .html("❄"),
          documentHeight = $(document).height(),
          documentWidth = $(document).width(),
          defaults = {
            minSize: 10,
            maxSize: 20,
            newOn: 1000,
            flakeColor:
              "#FFFFFF",
          },
          options = $.extend({}, defaults, options);
        var interval = setInterval(function () {
          var startPositionLeft = Math.random() * documentWidth - 100,
            startOpacity = 0.5 + Math.random(),
            sizeFlake = options.minSize + Math.random() * options.maxSize,
            endPositionTop = documentHeight - 200,
            endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
            durationFall = documentHeight * 10 + Math.random() * 5000;
          $flake
            .clone()
            .appendTo("body")
            .css({
              left: startPositionLeft,
              opacity: startOpacity,
              "font-size": sizeFlake,
              color: options.flakeColor,
            })
            .animate(
              {
                top: endPositionTop,
                left: endPositionLeft,
                opacity: 0.2,
              },
              durationFall,
              "linear",
              function () {
                $(this).remove();
              }
            );
        }, options.newOn);
      };
    })(jQuery);
    $(function () {
      $.fn.snow({
        minSize: 5 /* 定义雪花最小尺寸 */,
        maxSize: 80 /* 定义雪花最大尺寸 */,
        newOn: 200 /* 定义密集程度，数字越小越密集 */,
      });
    });
  </script>
</body>

</html>

下载代码

下载链接：https://pan.quark.cn/s/a87ae62622dd

代码分析

这段HTML代码主要实现了一个动态且富有节日气氛的页面，包含了多个前端特效，如鼠标点击特效、雪花飘落特效、背景音乐播放器、以及图片放大特效。页面的整体效果适用于节庆活动或祝福场合。以下将详细分析各部分代码的功能和实现方式。

1. HTML 基础结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>新年快乐</title>
</head>
<body>
  ...
</body>
</html>

这一部分定义了HTML文档的基础结构：

  • <!DOCTYPE html>：声明文档类型为HTML5。
  • <html lang="en">：指定文档的语言为英语。
  • <meta charset="UTF-8" />：设置字符编码为UTF-8，确保支持多语言字符集。
  • <title>新年快乐</title>：为页面设置了标题，显示为“新年快乐”。

2. 引入外部脚本与样式

页面包含了多个外部脚本和样式的引用，这些脚本和样式实现了不同的功能和特效。

2.1 引入gameCanvas-4.0.js与script.js

<script src="js/gameCanvas-4.0.js"></script>
<script src="js/script.js"></script>

这两行脚本引入了gameCanvas-4.0.js和script.js，虽然代码中没有显示这两个文件的具体内容，但根据命名可以推测，它们可能涉及到一个游戏或动态画布的实现，提供画布绘图、动画等功能。

2.2 引入 Live2D 动效

<script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>

这段代码引入了autoload.js，这是一个外部库，用于加载Live2D模型。Live2D是一个可以在网页上显示2D角色模型并使其动起来的技术，通常用于实现角色动画效果，如表情、动作等。这个特效一般用于增强用户互动感或提升页面的动态效果。

2.3 引入图片放大功能

<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css" />
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
<script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script>

这一部分代码引入了图片放大的CSS和JavaScript库。通过引用zoom.css和zoom.js，以及jQuery库，它为页面中的图片添加了放大查看的功能。具体实现是：当用户点击图片时，图片会放大并显示在页面的中心，提升了用户体验。data-action="zoom"属性被设置在图片元素上，表示这些图片可以被放大。

2.4 引入鼠标特效

<script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

mouse-click.js脚本通过监听用户的鼠标点击事件，生成动态的点击效果，常用于提升页面的互动性。这些动态效果会显示在画布<canvas>元素上。<canvas>元素的样式设置使得它始终显示在页面的最上层，且不与页面其他元素交互（pointer-events: none）。

2.5 音乐播放器

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" />
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js id="2829883282" lrc-type="0" server="netease" order="random" type="playlist" fixed="true" autoplay="false" list-olded="true">
</meting-js>

这部分代码实现了页面背景音乐播放功能。APlayer是一个流行的音频播放器，Meting.js是一个音频API，用于播放来自网易云音乐等服务的音乐。<meting-js>标签配置了一个播放列表，指定了网易云音乐作为音源服务器，并设置了一些播放器参数，如autoplay（是否自动播放）和order（播放顺序）。通过这些配置，页面可以根据需求自动播放背景音乐。

2.6 随机线条特效

<script>
  !(function () {
    function n(n, e, t) {
      return n.getAttribute(e) || t;
    }
    ...
  })();
</script>

这段代码实现了一个动态的随机线条效果。通过在浏览器中绘制随机生成的线条，并使它们根据特定规则运动，创造出一种星空或者流动的视觉效果。<canvas>元素被用来绘制这些线条，requestAnimationFrame用于高效地进行动画渲染。线条的运动方向和位置会随着页面窗口的大小变化而调整，确保在不同屏幕上都有良好的效果。

3. 雪花特效

<script type="text/javascript">
  (function ($) {
    $.fn.snow = function (options) {
      ...
    };
  })(jQuery);
  $(function () {
    $.fn.snow({
      minSize: 5,
      maxSize: 80,
      newOn: 200,
    });
  });
</script>

这一段实现了雪花飘落的效果。通过使用jQuery库，创建了一个插件$.fn.snow，该插件可以在页面中生成不同大小、不同速度的雪花。雪花的位置、大小和透明度都由随机数控制，使得每次加载页面时雪花效果都具有一定的随机性。setInterval函数用于定期生成雪花，animate函数则控制雪花从顶部飘落到页面底部的动画效果。

4. 整体设计与效果

4.1 页面背景与气氛

这段代码使用了多种动态特效来增强页面的节日气氛。背景音乐的播放、雪花的飘落以及鼠标点击特效等都增加了页面的互动性和趣味性。结合“新年快乐”这一主题，页面可以用于新年祝福、节庆活动等场合，通过这些特效营造出一种欢庆和喜庆的氛围。

4.2 技术实现

  • Canvas技术：多个特效都使用了<canvas>元素来绘制图形（如随机线条、雪花特效等），通过JavaScript动态控制画布上的图形内容，达到了动画效果。
  • jQuery库：许多特效（如图片放大、雪花飘落等）都依赖于jQuery库，它简化了DOM操作和动画实现。
  • 外部库：如APlayer和Meting.js提供了方便的音乐播放功能，Live2D技术则提供了二维动画效果，使得页面更加生动和富有动感。

5. 总结

整体而言，这段代码通过多个前端特效和技术的结合，创造了一个互动性强、视觉效果丰富的页面。无论是雪花飘落、鼠标点击特效，还是背景音乐播放，都能够增强用户的体验感，营造出温馨、欢乐的氛围。它适用于节庆活动、祝福页面或互动式展示，能够吸引用户的注意力并提供愉悦的浏览体验。

写在后面

我是一只有趣的兔子，感谢你的喜欢。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2280390.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

从结构嵌套的幻梦里：递归与数据构建的精巧和鸣

从结构嵌套的幻梦里：递归与数据构建的精巧和鸣

大家好啊&#xff0c;我是小象٩(๑ω๑)۶ 我的博客&#xff1a;Xiao Xiangζั͡ޓއއ 很高兴见到大家&#xff0c;希望能够和大家一起交流学习&#xff0c;共同进步。 这一节我们来学习递归的相关知识 函数递归 一、什么是递归1.1 递归的思想 二、递归的限制条件三、递归的…
阅读更多...
【Linux系统】—— 编译器 gcc/g++ 的使用

【Linux系统】—— 编译器 gcc/g++ 的使用

【Linux系统】—— 编译器 gcc/g 的使用 1 用 gcc 直接编译2 翻译环境2.1 预处理&#xff08;进行宏替换&#xff09;2.2 编译&#xff08;生成汇编&#xff09;2.3 汇编&#xff08;生成机器可识别代码&#xff09;2.4 链接2.5 记忆小技巧2.6 编译方式2.7 几个问题2.7.1 如何理…
阅读更多...
【Unity3D】3D物体摆放、场景优化案例Demo

【Unity3D】3D物体摆放、场景优化案例Demo

目录 PlaceManager.cs(放置管理类) Ground.cs(地板类) 和 GroundData.cs(地板数据类) 额外知识点说明 1、MeshFilter和MeshRenderer的Bounds区别 2、Gizmos 绘制一个平行于斜面的立方体 通过网盘分享的文件&#xff1a;PlaceGameDemo2.unitypackage 链接: https://pan.baid…
阅读更多...
智能系统的感知和决策

智能系统的感知和决策

智能系统在感知和决策过程中具备的关键能力表现在智能感知/自主判定上&#xff0c;下面可以从感知的本质、自主判断的含义及其在智能系统中的作用进行深入分析。 1、智能感知&#xff1a;信息获取与理解 智能感知是指智能系统通过传感器或其他数据采集手段获取环境中的信息&…
阅读更多...
Spring 中的事件驱动模型

Spring 中的事件驱动模型

事件驱动的基本了解 事件模式也就是观察者模式&#xff0c;当一个对象改变的时候&#xff0c;所有依赖的对象都会收到一个通知。 Subject&#xff1a;抽象主题 Observer&#xff1a;具体主题 Concrete Subject&#xff1a;抽象观察者&#xff0c;在得到更新通知之后去更新自…
阅读更多...
linux-FTP服务配置与应用

linux-FTP服务配置与应用

也许你对FTP不陌生&#xff0c;但是你是否了解FTP到底是个什么玩意&#xff1f; FTP 是File Transfer Protocol&#xff08;文件传输协议&#xff09;的英文简称&#xff0c;而中文简称为 “文传协议” 用于Internet上的控制文件的双向传输。同时&#xff0c;它也是一个应用程序…
阅读更多...
linux-NFS网络共享存储服务配置

linux-NFS网络共享存储服务配置

1.NFS服务原理 NFS会经常用到&#xff0c;用于在网络上共享存储&#xff0c;这样讲&#xff0c;你对NFS可能不太了解&#xff0c;举一个例子&#xff0c; 加入有三台机器A,B,C&#xff0c;它们需要访问同一个目录&#xff0c;目录中都是图片&#xff0c;传统的做法是把这些 图…
阅读更多...
Jenkins 启动

Jenkins 启动

废话 这一阵子感觉空虚&#xff0c;心里空捞捞的&#xff0c;总想找点事情做&#xff0c;即使这是一件微小的事情&#xff0c;空余时间除了骑车、打球&#xff0c;偶尔朋友聚会 … 还能干什么呢&#xff1f; 当独自一人时&#xff0c;究竟可以做点什么&#xff0c;填补这空虚…
阅读更多...
消息队列篇--原理篇--Pulsar（Namespace，BookKeeper，类似Kafka甚至更好的消息队列）

消息队列篇--原理篇--Pulsar（Namespace，BookKeeper，类似Kafka甚至更好的消息队列）

Apache Pulusar是一个分布式、多租户、高性能的发布/订阅&#xff08;Pub/Sub&#xff09;消息系统&#xff0c;最初由Yahoo开发并开源。它结合了Kafka和传统消息队列的优点&#xff0c;提供高吞吐量、低延迟、强一致性和可扩展的消息传递能力&#xff0c;适用于大规模分布式系…
阅读更多...
Python配置MITMPROXY中间人监听配置

Python配置MITMPROXY中间人监听配置

1、安装python 环境&#xff0c;此处可以使用conda安装:conda create --name my_new_env python3.12 2、pip安装mitmproxy&#xff1a;pip install mitmproxy&#xff0c;安装后如果使用mitmproxy --version 成功返回结果&#xff0c;说明已经在环境变量路径中&#xff0c;如果…
阅读更多...
Java-数据结构-二叉树习题(2)

Java-数据结构-二叉树习题(2)

第一题、平衡二叉树 ① 暴力求解法 &#x1f4da; 思路提示&#xff1a; 该题要求我们判断给定的二叉树是否为"平衡二叉树"。 平衡二叉树指&#xff1a;该树所有节点的左右子树的高度相差不超过 1。 也就是说需要我们会求二叉树的高&#xff0c;并且要对节点内所…
阅读更多...
【网络原理】万字详解 HTTP 协议

【网络原理】万字详解 HTTP 协议

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. HTTP 前置知识1.1 HTTP 是什么1.2 HTPP 协议应用场景1.3 HTTP 协议工作过程 2. HTTP 协议格式2.1 fiddler…
阅读更多...
基于STM32的智能寝室控制系统设计（论文+源码）

基于STM32的智能寝室控制系统设计（论文+源码）

1 .系统整体设计 通过需求分析&#xff0c;本设计基于STM32的智能寝室控制系统整体架构如图2.1所示&#xff0c;整系统利用DHT11温湿度传感器获取室内环境数据&#xff0c;并通过OLED显示&#xff0c;提供用户实时信息&#xff0c;火焰传感器和烟雾传感器用于监测火灾情况&…
阅读更多...
日历热力图，月度数据可视化图表（日活跃图、格子图）vue组件

日历热力图，月度数据可视化图表（日活跃图、格子图）vue组件

日历热力图&#xff0c;月度数据可视化图表&#xff0c;vue组件 先看效果&#x1f447; 在线体验https://www.guetzjb.cn/calanderViewGraph/ 日历图简单划分为近一年时间&#xff0c;开始时间是 上一年的今天&#xff0c;例如2024/01/01 —— 2025/01/01&#xff0c;跨度刚…
阅读更多...
铁电存储器FM25CL64B简介及其驱动编写（基于STM32 hal库）

铁电存储器FM25CL64B简介及其驱动编写（基于STM32 hal库）

铁电存储器FM25CL64B简介及其驱动编写&#xff08;基于STM32 hal库&#xff09; 文章目录 铁电存储器FM25CL64B简介及其驱动编写&#xff08;基于STM32 hal库&#xff09;前言一、FM25CL64B简介二、驱动代码1.头文件2.c文件 总结 前言 FM25CL64B是赛普拉斯cypress出品的一款铁…
阅读更多...
基于微信小程序的科创微应用平台设计与实现（LW+源码+讲解）

基于微信小程序的科创微应用平台设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…
阅读更多...
HarmonyOS Next 最强AI智能辅助编程工具 CodeGenie介绍

HarmonyOS Next 最强AI智能辅助编程工具 CodeGenie介绍

随着大模型的兴起&#xff0c;在智能编码领域首先获得了应用。 市面上从Microsoft Copilot到国内阿里通义&#xff0c;字节marscode等&#xff0c;都提供了copilot方式的智能编码工具。HarmonyOS Next作为诞生一年的新事物&#xff0c;由于代码量和文档迭代原因&#xff0c;在智…
阅读更多...
WPF2-1在xaml为对象的属性赋值.md

WPF2-1在xaml为对象的属性赋值.md

1. AttributeValue方式 1.1. 简单属性赋值1.2. 对象属性赋值 2. 属性标签的方式给属性赋值3. 标签扩展 (Markup Extensions) 3.1. StaticResource3.2. Binding 3.2.1. 普通 Binding3.2.2. ElementName Binding3.2.3. RelativeSource Binding3.2.4. StaticResource Binding (带参…
阅读更多...
Appium(四)

Appium(四)

一、app页面元素定位 1、通过id定位元素: resrouce-id2、通过ClassName定位&#xff1a;classname3、通过AccessibilityId定位&#xff1a;content-desc4、通过AndroidUiAutomator定位5、通过xpath定位xpath、id、class、accessibility id、android uiautomatorUI AutomatorUI自…
阅读更多...
Windows图形界面(GUI)-QT-C/C++ - Qt List Widget详解与应用

Windows图形界面(GUI)-QT-C/C++ - Qt List Widget详解与应用

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 目录 QListWidget概述 使用场景 常见样式 QListWidget属性设置 显示方式 (Display) 交互行为 (Interaction) 高级功能 (Advanced) QListWidget常见操作 内容处理 增加项目 删除项目…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023