HTML5+CSS+JQuery 实现简单的进度条功能

样式:

<style type="text/css">
    .processcontainer2{
       width:450px;
       border:1px solid #6C9C2C;
       height:25px;
       border-radius: 10px;
       box-shadow: 5px 10px 20px lightgray;
     }
    #processbar2{
       background:green;
       float:left;
       height:100%;
       text-align:center;
       line-height:150%;
       border-radius: 10px;
       color: white;
     }
</style>

关键HTML代码:

<body>
        <div class="processcontainer2">
            <div id="processbar2">0</div>
        </div>
</body>

脚本:

    <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
    <script type="text/javascript">
        function gogogo(){
            var bar=$("#processbar2");
            $(bar).html(parseInt($(bar).html())+1+"%")
            $(bar).css("width",$(bar).html())
            console.log($(bar).html())
            //进度条满
            if($(bar).html()=="100%"){
                window.clearInterval(start);
            }
        }
        var start=setInterval(function(){gogogo()},50);
        $(document).ready(function(){
            start;
        })
    </script>

效果:

原文地址:https://www.cnblogs.com/EdinburghOne/p/9392346.html

时间: 2024-10-14 19:29:20

HTML5+CSS+JQuery 实现简单的进度条功能的相关文章

简单的进度条

对于我知识吸收慢,就从简单的学起吧!简单的进度条.感觉自己写的代码很差劲,所以如果有大神不经意经过的话,还望动动尊指,指点一二,多多指教^-^! 接下来我讲出我的故事!我就希望我的代码后期重用性可以好点,所以就想自己写一些组件,这样可以既方便又快捷.先从进度条开始! 这是jq宝宝: /* 进度条(长方形简单) 传入class.宽度width.长度height.边框颜色border.圆角radius.进度条颜色bgColor,时间time */ function getProBar(obj){ $

简单的进度条程序

简单的进度条程序 1 import sys,time 2 for i in range(31): 3 sys.stdout.write("\r") #每一次清空原行 4 sys.stdout.write("%s | %s" % (int(i/30*100),int(i/30*100)*"*")) 5 sys.stdout.flush() #强制刷新屏幕 6 time.sleep(0.5) #每隔0.5秒打印一次

基于jQuery网页步骤流程进度条代码

基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="step_context test"></div> 当前步骤:第<input type="text" value="5" id="currentStepVal" />步 <button onclick=&qu

.Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能

.Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能 我的项目需求是:在.net4.5中用mvc5实现上传xml文件,后台实时导入数据库时传到前台进度,进度条实现动态在走. 网上看了很多实现此需求的方法(服务器轮训向客户端发送消息)ajax.webscoket.singal等. 之前的代码是前段用定时器ajax去访问后台的进度数据.然后给进度条赋值.发现有时候ajax请求总出现pending的状态. 之前的缓存实现代码: var cc=true;

js 实现进度条功能。

/** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options && options.width)?parseFloat(options.width) : parseFloat(this.options.width); this.h = (options && options.height)?parseFloat(options.height) : pa

python基础学习日志day8-实现进度条功能,for和yield实现

实现进度条功能 方法一:简单FOR实现打印进度条功能 for i in range(10): print("#",end="",flush=True) time.sleep(0.4) #方法二,yeild实现复杂进度条功能 def show_process(total): recive_size=0 current_size=0 while recive_size<total: if int(recive_size/total*100) >current

简单的进度条演示

今天在回答一个网友的问题时,学习了一下进度条的制作,其实也简单,是用jQuery的animate来实现的. 这是animate的的文档,进度条里主要用到了step和complete两个属性:http://jquery.bootcss.com/animate/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docum

JS框架_(JQuery.js)纯css3进度条动画

进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="w

HTML5+CSS3+jquery实现简单的音乐播放器

...最近天热的,感觉就像煎饼...然后别人在把妹子的时候,只有偶们这帮苦逼的程序员在那边撸代码...我日哦! 然后今天晒的是偶早年写的一个播放器...看上去是不是很有感觉的样子!一番宝物,Lisa唱的   在angel beats的插曲 最后在简述这个东西怎么写之前,本人男,24岁,籍贯上海,诚招女友一枚,要求:性格温顺...(省略500字) <div class="Music"> <div class="MusicPlaySound">