进度条，加载到百分比，出现不同的文字提示

最新推荐文章于 2020-09-18 16:39:37 发布
最新推荐文章于 2020-09-18 16:39:37 发布
阅读量287 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/caihuan99/p/9681576.html
版权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的jquery进度条</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
var i=0;
/*add——创建tbx下的div加文字和变宽度的方法*/
function add(i){
         var tbox =$(".tbox");
var tiao =$(".tiao");
            tiao.css("width",i+"%").html(i+"%");
        }
/*创建方法（i++循环起来）*/
    function xh(){
        if(i>100){
            $(".ok").html("正在跳转").fadeIn("slow");
            return;
            }
        else if(i>0 && i<10){
            $(".ok").html("正在验证登录权限").fadeIn("slow");
            setTimeout("xh()",200)
            add(i);
         i++;
            }
        else if(i>10 && i<20){
            $(".ok").html("正在验证菜单权限").fadeIn("slow");
            setTimeout("xh()",200)
            add(i);
         i++;
            }
        else if(i>20&&i<30){
            $(".ok").html("正在验证按钮权限").fadeIn("slow");
            setTimeout("xh()",200)
            add(i);
         i++;
            }
        else if(i>30&&i<40){
            $(".ok").html("正在加载基础框架").fadeIn("slow");
            setTimeout("xh()",200)
            add(i);
         i++;
            }
        else if(i>40&&i<50){
            $(".ok").html("正在加载基础控件").fadeIn("slow");
            setTimeout("xh()",200)
            add(i);
         i++;
            }
        else if(i>50&&i<60){
            $(".ok").html("正在同步用户数据").fadeIn("slow");
            setTimeout("xh()",200)
            add(i);
         i++;
            }
        else if(i>60&&i<70){
            $(".ok").html("正在同步项目数据").fadeIn("slow");
            setTimeout("xh()",200)
            add(i);
         i++;
            }
        else if(i>70&&i<90){
            $(".ok").html("正在同步配件数据").fadeIn("slow");
            setTimeout("xh()",300)
            add(i);
         i++;
            }
        else if(i<=100){
            setTimeout("xh()",300)
            add(i);
         i++;
            }
        }
        
/*调用xh()函数*/
    $(document).ready(function(){   
        xh();
    });
</script>
<style>
    .clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
.box{width:100%; height:100%; margin:0 auto; }
.ok{width:200px; height:100px; margin:0 auto; text-align:center; line-height:100px; color:#666; display:none; }
.tbox{width:397px; height:30px; background:rgba(236, 236, 236, 0.867); margin:0 auto;margin-top:24%;}
.tbox div{width:0px; height:30px; background:#e8e8e8; text-align:center;
font-family:Tahoma; font-size:18px; line-height:30px;color:#666;}
</style>
<div class="box">
    
<div class="tbox">
<div class="tiao"></div>
    </div>
    <div class="ok"></div>  
</div>
</body>
</html>


转载于:https://www.cnblogs.com/caihuan99/p/9681576.html

baishuwan2412
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现进度条带有文字百分比
01-23
实现进度条带有文字百分比
前端实现进度条超过文字，进度条变成相反的颜色代码
weixin_33819479的博客
12-03 660
功能代码如下，经过测试没有问题： <html> <head> <title>前端实现进度条超过文字，进度条变成相反的颜色代码</title> </head> <style> *{ margin:0; padding:0; } .wrap{ position: relative; width:200px; ...
简单的百分比进度条样式代码
06-11
简单的百分比进度条样式代码，有多种颜色风格可以选择。
可以随进度显示不同颜色的css3进度条分享
12-13
一款进度条，它的外观是一条直线，末端有个小球，在进度变化时可以显示数字百分比，更可以用不同颜色来表示当前进度的状态。来看看效果图。 接下来我们来分析一下这款HTML5进度条的实现源码，篇幅有限，我们只挑核心的代码来说。 HTML代码很简单，构造一个进度条容器和数字百分比容器： 复制代码代码如下:0 首先我们来对进度条的容器进行样式渲染，利用CSS3的渐变属性来实现不同进
Ajax 实现加载进度条
10-20
根据给定文件信息，我们将详细说明使用AJAX实现加载进度条的知识点。 AJAX全称为“Asynchronous JavaScript and XML”，即异步的JavaScript和XML技术，它允许页面在不进行刷新的情况下与服务器交换数据并更新部分...
jQuery加载进度条特效代码
04-02
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及动画制作等任务...在实际项目中，可以根据具体需求进行定制，例如添加文字提示、调整动画速度等，以满足不同场景下的用户体验需求。
基于jQuery实现模拟页面加载进度条
10-27
页面是从上到下依次加载的，我们可以大致估算在页面的某个位置加载了多少内容，然后使用jQuery来模拟进度条显示。 进度条的基本概念是在页面上创建一个可视化的进度条元素，该元素会随着页面加载的进行而动态更新...
jQuery progressbar进度条插件提示进度条进度百分比数据
10-18
在本文中，我们将深入探讨如何使用jQuery的progressbar插件来创建一个动态的进度条效果，并在用户鼠标滑过时展示进度的百分比数据。jQuery是一个轻量级的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果，...
jquery 百分比加载中
12-01
5. **提示信息**："不要走开"这样的提示信息可以作为加载过程中的文字反馈，通过jQuery的`text()`方法来设置或更新，让用户体验更加友好。 6. **优化与兼容性**：为了确保在不同浏览器上的兼容性，我们需要测试代码...
C# progressBar进度条绘制文字显示百分比
07-14
C# progressBar进度条绘制文字显示百分比
跟随进度条进度移动的文字提示
zhengkaihong的专栏
11-12 3064
跟随进度条进度移动的文字提示 ，如图 思路：动态获取进度条宽度后，算出移动布局的坐标 下载链接： http://download.csdn.net/detail/zhengkaihong/9681088
iview进度条配置
fk129
04-13 4738
// 进度条配置 Vue.prototype.$Loading.config({ color: '#2d8cf0', failedColor: '#f0ad4e', height: 10 });
iview progress 根据进度显示不同颜色
sunny_day的博客
06-04 4523
js: data:function() { return { colorful:[], } }, { align: 'center', key: 'status', render: (h, params) => { let...
帆软生成进度条相关报表（普通进度条、条形图、甘特图）
日日留心的技术专栏
03-31 6607
场景 近期做了几个帆软进度相关的报表，几经周折，总结如下： 1 普通进度条 1.1 下载安装帆软进度条插件 参考连接： 1.2 属性设置 普通进度实际上是一个在.cpt文件的单元格中，将一个小于1的值展示为一个百分比进度条。 属性设置，安装插件后才有 1.3 效果展示 2 条形图 2.1 选择类型 在.frm文件中新增条形图后，设置条形图的类型如下： 2.2 设置数据和属性 字段名必须是：...
推荐一款vue页面加载时的进度条 npropgress插件
mrhaoxiaojun的博客
09-18 1362
如果我们的程序每次页面切换时，顶部也有一个进度条，那会让用户体验提升很大的。 npropgress插件github地址 vue项目的每次路由切换时，都加载进度条 安装 npm install --save nprogress 1、引入 在路由配置文件中引入，写到路由加载前和加载后的两个钩子函数中 import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; // 进度条配置项这样写 NProgress.configure({
el-progress根据状态加载不同渐变色的进度条及百分比数值
最新发布
06-03
要根据状态加载不同渐变色的进度条及百分比数值，可以利用 `:stroke-color` 属性和 `:percentage` 属性动态绑定不同的值。具体实现方式如下： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值