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!

相关文章
|
9天前
|
前端开发 JavaScript
杨老师课堂之JavaScript案例手动切换轮播图片
杨老师课堂之JavaScript案例手动切换轮播图片
12 2
|
9天前
|
前端开发 JavaScript
杨老师课堂之JavaScript案例之自动切换轮播图片
杨老师课堂之JavaScript案例之自动切换轮播图片
11 1
|
5天前
|
存储 JavaScript 前端开发
JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)
【6月更文挑战第25天】JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)。
10 2
|
8天前
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
19 2
|
8天前
|
机器学习/深度学习 JavaScript 前端开发
【JS】深度学习JavaScript
【JS】深度学习JavaScript
7 2
|
9天前
|
前端开发 JavaScript
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
9 2
|
13天前
|
JavaScript 前端开发 Android开发
kotlin开发 webview如何在收到JS调用后,native返回数据给到JS
这段内容描述了在Hybrid App开发中,使用Kotlin的Compose构建的Web视图(WebView)如何通过JsBridge实现JavaScript与原生代码的交互
|
2天前
|
JavaScript 前端开发
Vue.js中使用JavaScript实现路由跳转详解
Vue.js中使用JavaScript实现路由跳转详解
2 0
|
3天前
|
前端开发 JavaScript
HTML+CSS+JS 倒计时动画效果
HTML+CSS+JS 倒计时动画效果