扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jquery插件实现仪表盘
  • 734

0
分享到

jquery插件实现仪表盘

2024-04-02 19:04:59 734人浏览 安东尼
摘要

Jquery插件实现仪表盘，供大家参考，具体内容如下 做了个简易的仪表盘，就是很常见的那种码表，实现没啥困难，就是需要算一点点位置 实现效果 代码部分 *{ margin:

Jquery插件实现仪表盘，供大家参考，具体内容如下

做了个简易的仪表盘，就是很常见的那种码表，实现没啥困难，就是需要算一点点位置

实现效果

代码部分


*{
 margin: 0;
 padding: 0;
}
.rel{
 display: flex;
 justify-content:center;
 align-items:center;
 position: relative;
}
.bp{
 border-radius:50% ;
 border: 1px solid lightgray;
 position:relative;
 display: flex;
 justify-content: center;
 align-items: center;
 transfORM: rotate(-45deg);
}
.kd{
 position:absolute;
 width: 100%;
 font-size: 12px;
}
.point{
 background-color:lightgray;
 height: 100px;
 width: 20px;
 border-radius:100%;
 transform: rotate(90deg);
 transform-origin:10px 0px;
 z-index: 9;
 position: absolute;
 transition: all 0.5s;
}
.kb{
 position: absolute;
 bottom: 20px;
 font-size: 24px;
 color: gray;
 transition: all 0.5s;
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>做个仪表盘</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/zgybp.js"></script>
  <link href="CSS/zgybp.css" rel="stylesheet" type="text/css" />
  <style>
   #div{
    border: 1px solid lightgray;
    width: 90%;
    height: 400px;
    margin: 20px auto;
   }
  </style>
 </head>
 <body>
  <div id="div"></div>
 </body>
</html>
<script>
 var temp = zgybp("div");
 setInterval(function(){
  var f = Math.floor(Math.random()*101);
  temp.load(f);
 },700)
</script>

var zgybp = function(id){
 var $id = $("#"+id);
 $id.addClass("rel");
 var a = $id.width()>$id.height()?$id.height():$id.width();
 $bp = $("<div class='bp'></div>");
 $bp.appendTo($id);
 $bp.css({
  "width":a,
  "height":a
 })
 //绘制刻度，只绘制3/4 270/100=2.7，每一个刻度都是2.7
 for(var i =100;i>=0;i--){
  $kd = $("<div class='kd'><span class='txt'>-</span></div>");
  if(i%5==0){
   $kd.find('.txt').text(i)
  }
  $kd.appendTo($bp);
  $kd.css("transform","rotate("+(i*2.7)+"deg)");
 }
 $point = $("<div class='point'></div>")
 $point.appendTo($bp)
 $point.css({
  "left":a/2,
  "top":a/2
 })
 $kb = $("<div class='kb'>0</div>");
 $kb.appendTo($id)
 //然后将表盘转1/8的角度，就差不多了
 return{
  $id:$id,
  $bp:$bp,
  $point:$point,
  $kb:$kb,
  load:function(f){
   var that = this;
   f  = f<0?0:f>100?100:f;
   var temp = parseInt(f)*2.7;
   that.$point.css({
    "transform":"rotate("+(90+temp)+"deg)"
   })
   that.draw(f);
  },
  draw:function(f){
   var that =this;
   that.$kb.text(f);
  }
 }
}

实现思路

  • 嗯，看到车上的码表就想到要实现一下这个仪表盘
  • 这个就分为三步，先话表盘，当然是只画3/4，然后就是画指针并且得定位正确的位置，最后就是根据输入的参数把指针旋转对应的位置就行了
  • 这里面我都挑最简单的方法实现了，比如表盘这些啥的，我想全部画上文字，不过太挤了就变成五个画一个中间刻度，接着就是指针我是直接画的div变形的，这里定位我直接用它自己与父容器的flex居中配合的地方，因此这里面有个不好解释的地方就是将指针从中心点挪到下方或者其他偏离中心点的位置上，想要让指针对准正确的刻度，接着算偏转距离的时候就要多一个换算的步骤了，我记得这里面有个啥函数来着，不过不记得了，所以就没有为了美观把指针挪下来了。
  • 这里还是记下笔记我之前的transform-origin这个属性，这个属性真的很重要的，像是这种画指针的地方我感觉很有用
  • transform-origin: x-axis y-axis z-axis;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: jquery插件实现仪表盘

本文链接: https://lsjlt.com/news/124602.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • jquery插件实现仪表盘
    jquery插件实现仪表盘，供大家参考，具体内容如下 做了个简易的仪表盘，就是很常见的那种码表，实现没啥困难，就是需要算一点点位置 实现效果 代码部分 *{ margin: ...
    99+
    2024-04-02
  • Android实现仪表盘控件开发
    仪表盘在工业软件中很常见，今天整一个图片式仪表盘控件（非几何图形绘制）。实现非常简单，一张背景图，一张指针。创建一个RelativeLayout布局文件，然后在里面布置好控件的位置，...
    99+
    2024-04-02
  • Qt自定义控件实现仪表盘
    目录1.预览图2. 代码头文件源文件3. 用法1.预览图 2. 代码 头文件 #ifndef MOTORMETER_H #define MOTORMETER_H #include...
    99+
    2024-04-02
  • Android实现仪表盘效果
    本文实例为大家分享了Android实现仪表盘效果的具体代码，供大家参考，具体内容如下 仪表盘效果，圆弧可变色，效果图如下： 通过自定义view实现，代码如下： public c...
    99+
    2024-04-02
  • Qt如何实现仪表盘
    这篇文章主要介绍Qt如何实现仪表盘，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、前言仪表盘在很多汽车和物联网相关的系统中很常用，最直观的其实就是汽车仪表盘，这个以前主要是机械的仪表，现在逐步改成了智能的带屏带操作...
    99+
    2023-06-22
  • VueEcharts简易实现仪表盘
    目录前言仪表盘的特点仪表盘的基本实现仪表盘的常见效果前言 本篇来学习写仪表盘图 仪表盘的特点 可以更直观的表现出某个指标的进度或实际情况 仪表盘的基本实现 ECharts 最基本的代...
    99+
    2022-12-17
    Vue Echarts仪表盘 Vue Echarts Vue仪表盘
  • vue实现echarts中的仪表盘
    本文实例为大家分享了vue实现echarts中的仪表盘的具体代码，供大家参考，具体内容如下 最终结果 一、安装 1. 首先需要安装echarts依赖包 npm install ec...
    99+
    2024-04-02
  • vue Echarts实现仪表盘案例
    本文实例为大家分享了vue Echarts实现仪表盘案例的具体代码，供大家参考，具体内容如下 1、main.js 页面 import Vue from 'vue' import Ap...
    99+
    2024-04-02
  • Qt仪表盘的实现示例
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 仪表盘在很多汽车和物联网相关的系统中很常用，最直观的其实就是汽车仪表盘，这个以前主要是机械的仪表，现在逐步改成了...
    99+
    2024-04-02
  • android实现简单仪表盘效果
    本文实例为大家分享了android实现简单仪表盘效果的具体代码，供大家参考，具体内容如下 实现这个效果： 中间的文字很好写，外层的进度条就需要自定义控件了，代码如下： publ...
    99+
    2024-04-02
  • vue怎么实现echarts中的仪表盘
    这篇文章主要介绍“vue怎么实现echarts中的仪表盘”，在日常操作中，相信很多人在vue怎么实现echarts中的仪表盘问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现echarts中的仪表盘...
    99+
    2023-06-29
  • vue-cli3+echarts实现渐变色仪表盘组件封装
    本文实例为大家分享了vue-cli3+echarts实现封装一个渐变色仪表盘组件，供大家参考，具体内容如下 效果预览 思路 1、使用两个仪表盘叠加，起始角度一样，底部仪表盘结束角度...
    99+
    2024-04-02
  • python如何实现实时可视化仪表盘
    这篇文章主要介绍python如何实现实时可视化仪表盘，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！python的数据类型有哪些python的数据类型：1. 数字类型，包括int（整型）、long（长整型）和float...
    99+
    2023-06-14
  • 如何实现一个微信小程序仪表盘组件
    小编给大家分享一下如何实现一个微信小程序仪表盘组件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！前言最近开发了一个小程序动态仪表...
    99+
    2024-04-02
  • jQuery如何实现validata插件
    这篇文章将为大家详细讲解有关jQuery如何实现validata插件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。为了打LOL,我写快点，代码我都复制在最下面了，并且写了...
    99+
    2024-04-02
  • 怎么用vue-cli3+echarts实现渐变色仪表盘组件封装
    本篇内容主要讲解“怎么用vue-cli3+echarts实现渐变色仪表盘组件封装”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用vue-cli3+echarts实现渐变色仪表盘组件封装”吧!...
    99+
    2023-06-29
  • jQuery插件实现简单动画
    本篇内容主要讲解“jQuery插件实现简单动画”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jQuery插件实现简单动画”吧!jQuery 提供了一系列的动画方...
    99+
    2024-04-02
  • jquery插件实现图片悬浮
    本文实例为大家分享了jquery插件实现图片悬浮的具体代码，供大家参考，具体内容如下 很常见的一个效果，就是点击之后图片悬浮出来展示 效果如下 代码部分 <!DOCTYP...
    99+
    2024-04-02
  • jquery插件实现搜索历史
    每天一个jquery插件-做搜索历史，供大家参考，具体内容如下 效果如下 代码部分 <!DOCTYPE html> <html> <head&g...
    99+
    2024-04-02
  • jquery插件实现图片对比
    本文实例为大家分享了jquery插件实现图片对比的具体代码，供大家参考，具体内容如下 很常见的一个效果，做起来不难 效果如下 代码部分 <!DOCTYPE html>...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作