javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播

简介: javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播

官方名称

jQuery仿造星球大战激光剑效果水平进度条


插件JS

ProgressBarWars.js

使用步骤

引入外部JS包

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/ProgressBarWars.js"></script>


html代码

  <div id="vaderSize" style="width: 200px;padding: 0;margin: 40px 0 0 18px;"></div>


JS代码

        $(function () {
            //初始加载;
            getBars("#vaderSize", 87, true);
            //定时刷新;
            setInterval(function () {
                var number = Math.floor(Math.random() * 99 + 1);
                getBars("#vaderSize", number, false)
            }, 5000);
        });
        /*封装进度条
         * id,进度条所在容器的id;
         * num,初始数值;
         * */
        function getBars(id, num, flag) {
            $(id).ProgressBarWars4({
                porcentaje: num,
                estilo: "vader10",//vader,vader1~10,柱图颜色;
                tiempo: 5980,
                alto: "12px",//高度
                flag: flag
            });
        }


Done!

相关文章
|
6月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1134 58
|
6月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
376 24
|
9月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
210 32
|
8月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
8月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 HTML5
《HTML5+JavaScript动画基础》——2.6 小结
本章介绍了理解书中示例所需要的JavaScript基础知识。现在你应该了解了如何创建HTML5文件、调试、循环、事件以及事件处理程序。本章简单介绍了JavaScript对象,基本的用户交互,并且创建了一系列用于简化代码的工具函数。
1451 0
|
JavaScript 前端开发 HTML5
《HTML5+JavaScript动画基础》——第2章 动画的JavaScript基础 2.1动画基础
本书着重于动态动画的规则,其中会介绍改变图像描述的各种不同技术,正是依赖于这些技术才得以实现逼真的动画效果。本章将介绍如何定义图像起始描述的结构,如何为每一帧应用变化规则以及如何将两者结合在一起完成一个程序。在此过程中我们会创建大量可行的实例。
1571 0
|
前端开发 HTML5 移动开发
《HTML5+JavaScript动画基础》——1.4 小结
归功于创新驱动的现代浏览器,Web编程的一个新纪元创造性地拉开序幕。HTML5中的canvas元素为我们带来了一个遵循标准。跨平台的组件,使用它可以创建更加高级的Web图像。本书将探究那些以编程方式创建动画的原理,而这些动画则是构成下一代图形交互的重要元素。
1430 0

热门文章

最新文章