jquery实现进度条状态展示


Posted in jQuery onMarch 26, 2020

本文实例为大家分享了jquery实现进度条状态展示的具体代码,供大家参考,具体内容如下

jquery实现进度条状态展示

如上图所示,由于项目需要,需要做一个状态展示,当点击的时候填满整个长度,你需要下载jquery,代码如下:

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

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  .title-bar {
   width: 300px;
   height: 20px;
   margin: 0 auto;
   text-align: center;
  }

  .title-bar span {
   display: inline-block;
   width: 69px;
   font-size: 12px;
   cursor: pointer;

  }

  .title-bar span i {
   display: inline-block;
   border-radius: 10px;
   width: 5px;
   height: 5px;
   margin-bottom: 2px;
   margin-right: 4px;
  }

  .color-yellow {
   background-color: #FFCA25;
  }

  .color-blue {
   background-color: #3960FB;
  }

  .color-azury {
   background-color: #00D5FF;

  }

  .color-red {
   background-color: #FD1E60;
  }

  .total-bar {
   width: 900px;
   height: 15px;
   background-color: #ccc;
   margin: 20px auto;
   border-radius: 20px;
  }

  span {
   padding: 0;
   margin: 0;
   float: left;
  }

  .on-work {
   display: inline-block;
   width: 40%;
   height: 100%;
   background: #FFCA25;
   border-radius: 20px 0px 0px 20px;
  }

  .on-waite {
   display: inline-block;
   width: 20%;
   height: 100%;
   background: #3960FB;
  }

  .on-close {
   display: inline-block;
   width: 20%;
   height: 100%;
   background: #00D5FF;
  }

  .on-waring {
   display: inline-block;
   width: 20%;
   height: 100%;
   background: #FF2563;
   border-radius: 0px 20px 20px 0px;
  }

  .left,
  .right {
   float: left;
   margin-top: 20px;
  }

  .left {
   padding-left: 5px;
  }

  .right {
   float: right;
   padding-right: 5px;

  }
 </style>
</head>

<body>
 <div class="title-bar">
  <span class="work"><i class="color-yellow"></i>加工</span>
  <span class="waite"><i class="color-blue"></i>待机</span>
  <span class="close"><i class="color-azury"></i>关机</span>
  <span class="waring"><i class="color-red"></i>报警</span>
 </div>
 <div class="total-bar">
  <span class="on-work">
   <span class="left">8:00</span>
   <span class="right">9:00</span>
  </span>
  <span class="on-waite">
   <span class="left">9:00</span>
   <span class="right">12:00</span>
  </span>
  <span class="on-close">
   <span class="left">13:00</span>
   <span class="right">16:00</span>
  </span>
  <span class="on-waring">
   <span class="left">13:00</span>
   <span class="right">16:00</span>
  </span>

 </div>
</body>
<script src="./jquery.min.js"></script>
<script>
 $(function () {
  
  $('.title-bar').on('click', 'span', function () {
   var i = $(this).index();
   console.log(i);
   if (i == 0) {
    $('.on-work').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#FFCA25", "z-index": "10" }).siblings().hide()
   } else if (i == 1) {
    $('.on-waite').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#3960FB", "z-index": "10" }).siblings().hide()
   } else if (i == 2) {
    $('.on-close').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#00D5FF", "z-index": "10" }).siblings().hide()
   } else if (i == 3) {
    $('.on-waring').show().css({ "width": "100%", "border-radius": "20px", "background-color": "#FD1E60", "z-index": "10" }).siblings().hide()
   }
  })

 })
</script>

</html>

希望可以给有需要的人提供思路。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery中each循环的简单回滚操作
May 05 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 #jQuery
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
jquery实现垂直手风琴菜单
Mar 04 #jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
You might like
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python中获取网页状态码的两个方法
2014/11/03 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python中bisect的使用方法
2019/12/31 Python
python em算法的实现
2020/10/03 Python
python import 上级目录的导入
2020/11/03 Python
家长寄语大全
2014/04/02 职场文书
文体活动总结范文
2014/05/05 职场文书
李开复演讲稿
2014/05/24 职场文书
爱国之歌(8首)
2019/09/29 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang