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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jquery实现拖拽添加元素功能
Dec 01 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调用三种数据库的方法(1)
2006/10/09 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
javascript简易画板开发
2020/04/12 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
python抖音表白程序源代码
2019/04/07 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
python中_del_还原数据的方法
2020/12/09 Python
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
人生感悟经典句子
2019/08/20 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers