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实现进度条状态展示相关推荐

更新QTableView中的进度条状态
前段时间,我接触了,如何在一个QTableView中加入一个控件,类似于QCheckBox QProgressBar,QLineEdit等. 最近在项目中实际运用,才发现,在Qt中自定义委托,如果插入 ...
图片轮播php代码下载,jQuery带进度条滚动图片轮播代码
jQuery带进度条滚动图片轮播代码 jQuery带进度条滚动图片轮播代码是一款带左右箭头按钮控制图片滚动轮播,标题和进度条显示效果. $(document).ready(function(e) { ...
jquery 圆形进度条
最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使用说明比较的方便,于是就下载了它并将自己 ...
JQuery圆形进度条
上面的效果,需要圆心中间的数字动态展示,并且在颜色值在小于50的时候为绿色,大于50的时候为红色: 第一步: 页面布局 <!DOCTYPE html PUBLIC "-//W3C//D ...
macbook卡在进度条开不了机_苹果电脑一直处在进度条状态，不能开机怎么办？...
解决办法: 正常进入DFU恢复: 1.将手机连上电脑,然后将手机关机. 2.同时按住开关机键和home键. 3.当你看见白色的苹果logo时,请松开开关机键,并继续保持按住home键. 4.开启iTu ...
Android开发之动态添加WebView实现进度条标题栏展示效果
老路子:看图说白了就是不用layout的xml写布局,直接用纯代码手写布局实现上面的效果:代码如下: 请将下面代码放到onCreate中动态加载布局即可 LinearLayout linearLay ...
jquery实现页面加载进度条(转)
实现原理: 根据页面执行js的顺序将遮罩层和loading图片最先显示出来,等到页面加载完成后,用js控制图片消失.既在网页的头部放置一个文字或者图片的 loading 状态,然后页尾载入一段 JS ...
excel导出百万数据与进度条展示
前言需求:用户在UI界面上选择想要导出的列,然后点击导出按钮,就能导出用户想要的数据. 效果展示可能会产生的问题 1.如果导出数据量较大,接口很容易造成超时. 2.如果把数据一次性装载到内存里,很 ...
ajax 进度条 php,php – Jquery :: Ajax提供进度条？
您可以通过.html()将动画gif加载到结果区域,直到ajax函数返回结果.只是一个想法关于jquery ui进度条,间歇地通过你的脚本,你会想要一个表示完成百分比的数值作为一个赋值的javasc ...

jquery实现进度条状态展示

jquery实现进度条状态展示相关推荐

最新文章

热门文章