HTML + js 生成一个线路走向图,可以标记总共有多少站,用户到达第几站了

news2024/11/13 18:02:29

文章目录

  • 前言
  • 一、用途
  • 二、使用步骤
    • 1.轨迹代码
    • 2.运行


前言

HTML + js 生成一个线路走向图

在这里插入图片描述

例如:用来记录用户到达那一站了,可以标记总共有多少站,用户到达第几站了


提示:以下是本篇文章正文内容,下面案例可供参考

一、用途

用来记录用户到达那一站了,可以标记总共有多少站,用户到达第几站了

二、使用步骤

1.轨迹代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轨迹</title>
</head>
<body>
  <div id="track-box" style="position: relative; width: 100%; height: 300px;"></div>
  <script>
    class Track {
     

      SVG_NS = 'http://www.w3.org/2000/svg'
      SVG_LINK_NS = 'http://www.w3.org/1999/xlink'
      STROKE_COLOR = '#deb0bd'
      STROKE_WIDTH = 10

      constructor(el, points) {
     
        this.parent = el
        this.bounds = this._getBoundary(points)
        this.points = this._pointConvert(points)
        this.viewBox = [0, this.bounds.maxY - el.clientHeight, el.clientWidth, el.clientHeight]

        this._isMouseDown = false
        this._moveStart = {
      x: 0, y: 0 }
        this._offset = {
      x: 0, y: 0 }

        this.init()
      }

      init() {
     
        if (this.svg) return

        const {
      SVG_NS, SVG_LINK_NS, STROKE_COLOR, viewBox, _moveStart, _offset } = this
        const svg = document.createElementNS(SVG_NS, 'svg')
        svg.

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

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

相关文章

保姆级AI编程Cursor-Vscode使用教程

一: 下载&#xff0c;安装(输入语言后&#xff0c;然后迁移插件) 下载地址&#xff1a;https://www.cursor.com/settings 二: 登录 三. 玩AI--给一张UI图&#xff0c;一键生成需求代码&#xff08;需要自己去小改一下&#xff0c;大部分都可用&#xff09; 四、项目实践-优…

苹果手机管理软件哪个好用 苹果手机如何从安卓手机导入数据

随着科技的发展&#xff0c;手机已经成为我们日常生活中不可或缺的一部分。苹果手机以其稳定的性能和卓越的用户体验受到广大用户的喜爱。然而&#xff0c;如何高效管理苹果手机以及如何从安卓手机导入数据&#xff0c;是许多用户在使用过程中常遇到的问题。本文将围绕“苹果手…

异步和多线程

概念 异步&#xff08;Asynchronous&#xff09;&#xff1a; 异步是一种编程模型&#xff0c;其核心思想是在等待I/O操作&#xff08;如文件读写、网络通信等&#xff09;完成时&#xff0c;不阻塞当前线程的执行&#xff0c;而是允许程序继续执行其他任务。当I/O操作完成后&…

Linux系统调用进程标识符

目录 一、冯诺依曼体系结构 二、操作系统 2.1什么是操作系统&#xff1f; 2.2为什么需要操作系统&#xff1f; 2.3怎么管理&#xff1f; 2.4总结 2.5系统调用 三、进程的理解 3.1进程的基本概念 3.2对进程的描述 3.3对进程的组织 3.4task_struct内容的分类 3.5Linux下…

2024年【危险化学品生产单位安全生产管理人员】考试资料及危险化学品生产单位安全生产管理人员考试试卷

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年危险化学品生产单位安全生产管理人员考试资料为正在备考危险化学品生产单位安全生产管理人员操作证的学员准备的理论考试专题&#xff0c;每个月更新的危险化学品生产单位安全生产管理人员考试试卷祝您顺利通过…

5大公有公有云数据库厂商发展太猛!作为DBA的我,有点焦虑!

未来数据库的战场主要是公有云&#xff0c;且公有云的比重确实也在逐年上升&#xff0c;那么是不是这么回事呢&#xff1f;我们来分别看下几个云厂商巨头的公有云营收和增速&#xff01; 全球公有云王者AWS 2022年半年报&#xff1a; 2023年半年报&#xff1a; 2024年半年报&a…

Games101笔记-线性代数(一)

1、图形学和计算机视觉的区别 计算机视觉&#xff1a;一切需要猜测的都可以归类到计算机视觉 图形学&#xff1a;光栅化、几何、光追、动画/模拟 2、向量 向量表示2个东西&#xff1a;方向长度&#xff0c;向量与起始位置无关 向量加法&#xff1a;得到1个三角形或者平行四边…

分享一波中高级测试面试题(偏Java)

dubbo协议介绍下 Dubbo是一款高性能、轻量级的开源RPC框架&#xff0c;支持多种协议&#xff0c;其中之一就是Dubbo协议。 Dubbo协议是一种基于TCP的高性能传输协议&#xff0c;它是Dubbo框架默认的传输协议。Dubbo协议采用了一种自定义的数据传输格式&#xff0c;采用简单的…

java之认识异常

在 Java 中&#xff0c;异常&#xff08;Exception&#xff09;用于处理程序运行时出现的错误或异常情况。Java 的异常处理机制基于 try, catch, finally 和 throw 关键字。 1.异常的分类&#xff1a; 1.1&#xff1a;检查型异常(CheckedException)&#xff1a; 定义:程序在…

ChatGPT实战100例 - (21) 搞定汉字新解,o1-mini 在李继刚老师这扳回一局

文章目录 搞定汉字新解,o1-mini 在李继刚老师这扳回一局翻车开车飙车出图福利在这福利+1搞定汉字新解,o1-mini 在李继刚老师这扳回一局 昨天朋友圈刷爆了 李继刚老师 的 汉字新解,废话不说,上 prompt ;; 作者: 李继刚 ;; 版本: 0.1 ;; 模型: Claude Sonnet ;; 用途: 将一…

【2025】基于PHP职业病健康管理系统(源码+论文+部署讲解等)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

参数传了报错没传参数识别不到参数传丢

【记一次参数传值了但报错未传值的问题解决历程】 问题描述&#xff1a;同一个接口&#xff0c;用测试类调可以成功&#xff0c;用postman调用一直报错少参数&#xff0c;后又尝试了用idea自带的http调用&#xff0c;同样报错参数未传值。 如图&#xff0c;传值了报错未传值。…

怎样还原空白试卷?2024教你快速还原空白试卷的软件

怎样还原空白试卷&#xff1f;2024教你快速还原空白试卷的软件 还原空白试卷是一项常见的需求&#xff0c;尤其是在教学、考试准备或练习时需要重新使用原有试卷时。通过使用AI技术或专业的图片编辑软件&#xff0c;能够快速去除试卷上的答案或标记&#xff0c;恢复原始空白状…

卷积神经网络(二)CIFAR100类别分类

一.数据介绍 总共一百个类&#xff0c;每个类有600个图像。每类500个训练图像&#xff0c;100个测试图像。没填图像都带有一个"精细"标签&#xff08;它所属的类&#xff09;核一个粗糙标签&#xff08;它所属的超类&#xff09; 二.API使用 用于构建CNN模型的API …

构建全景企业画像,深度评估企业风险,保障商业利益!

战略投资、招商引资、融资贷款、市场合作等商业行为&#xff0c;都需要对目标企业进行尽调&#xff0c;评估企业的风险。依据评估结果&#xff0c;投资者可以识别并量化潜在投资风险&#xff0c;保障投资的安全性和收益性;招商工作可以甄别优质企业&#xff0c;确保引进高质量、…

Android 内置应用裁剪

文章目录 查询目标 APK 的 Android.mk&#xff08;或 Android.bp&#xff09;文件apk裁剪方式1.注释或删除.mk/.bp文件2.将 APK 名称加入“OVERRIDES”配置项中3.自定义“PRODUCT_PACKAGES_REMOVE”配置项 查询目标 APK 的 Android.mk&#xff08;或 Android.bp&#xff09;文件…

【YashanDB知识库】执行sql语句时报YAS-04401 data type - expected, but BLOB got异常

本文转载自YashanDB官方网站&#xff0c;具体链接为&#xff1a;执行sql语句时报YAS-04401 data type - expected, but BLOB got异常 问题现象 某客户的.net小程序在通过.net驱动执行业务时&#xff0c;报YAS-04401 data type - expected, but BLOB got异常&#xff1a; 问题…

2024/9/13 数学20题

根的个数问题&#xff1a; 数列&#xff1a;

OPENAIGC开发者大赛企业组银奖 | Gambit-AI智能合同审核助手

在第二届拯救者杯OPENAIGC开发者大赛中&#xff0c;涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到&#xff0c;我们特意开设了优秀作品报道专栏&#xff0c;旨在展示其独特之处和开发者的精彩故事。 无论您是技术专家还是爱好者&#xff0c;希望能带给您…

SSO单点登录简易认证流程

流程说明 导入依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version></dependency>模拟代码 客户端 import cn.hutool.core.codec.Base64; import cn.hutool.crypto…