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

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

时间:2024-09-15 11:48:48浏览次数:16  
标签:el 第几 SVG svg js HTML ._ NS points

文章目录


前言

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.

标签:el,第几,SVG,svg,js,HTML,._,NS,points
From: https://blog.csdn.net/qq_25987725/article/details/142175997

相关文章

  • 获取动态页面html
    AJAXAJAX(异步JavaScript和XML)是一种无需重新加载整个页面的情况下,与服务器交换数据,将增量信息局部更新在用户界面上的技术。AJAX具有异步性,AJAX请求不会阻塞用户界面,用户可以在请求处理的同时继续与页面交互,具有更强的交互性。AJAX能使网页从浏览器请求少量信息而不是整个页面。......
  • jsp城市路边停车收费系统的设计与实现9h2w9
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能用户,车位信息,车位预约,入场信息,出场信息开题报告内容一、项目背景与意义随着城市化进程的加速,城市路边停车管理成为城市交通管理中的一大难题。......
  • jsp城市公交查询系统q208j
    jsp城市公交查询系统q208j本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能用户,站点信息,车次信息技术要求:   开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Spring技术主......
  • jsp城市集中隔离中心信息系统3h442
    jsp城市集中隔离中心信息系统3h本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能用户,医生,防疫物资,疫苗信息,疫苗接种,密触人员,核酸检测,医生诊断,出入登记技术要求:   开发语言:JSP前端使用......
  • jsp宠物寻回系统u5zde
    jsp宠物寻回系统u5zde本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能用户,宠物分类,宠物信息,接取信息,完成信息开题报告内容一、项目背景与意义随着宠物数量的不断增加,宠物走失问题日益凸显,给宠......
  • jsp宠物网站laf7a
    jsp宠物网站laf7a本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能用户,宠物种类,领养宠物,寄养宠物,用户分享技术要求:   开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Spr......
  • Vue + Three.js魔法:让3D模型在你的网页上舞动起来!
    ......
  • 110java jsp SSM Springboot电子书图书小说阅读系统小程序(源码+文档+运行视频+讲解视
    项目技术:前端运行:微信开发者工具SSM+Maven+Vue等等组成,B/S模式+Maven管理等等。环境需要1.运行环境:最好是javajdk1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境:Tomcat7.x,8.x,9.x版本均可4.......
  • 107java jsp SSM Springboot校园二手交易服务平台系统小程序(源码+文档+运行视频+讲解
    项目技术:前端运行:微信开发者工具SSM+Maven+Vue等等组成,B/S模式+Maven管理等等。环境需要1.运行环境:最好是javajdk1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境:Tomcat7.x,8.x,9.x版本均可4.......
  • cJSON-轻量级解析模块、字符串的神——编织STM32C8T6与阿里云信息传递的纽带
            编写方向:本人就不泛泛的编写一篇什么一文学会cJSON了,没什么突出点,也就我水水字数,你们看来看去也不懂,本人是从上阿里云传信息接触的cJSON的,我就此写一篇针对性的文章,希望对大家有用,后期我在其他方面用到还会继续更新。一、简介        cJSON是一个用C......