- 浏览: 1048893 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1441)
- 软件思想&演讲 (9)
- 行业常识 (250)
- 时时疑问 (5)
- java/guava/python/php/ruby/R/scala/groovy (213)
- struct/spring/springmvc (37)
- mybatis/hibernate/JPA (10)
- mysql/oracle/sqlserver/db2/mongdb/redis/neo4j/GreenPlum/Teradata/hsqldb/Derby/sakila (268)
- js/jquery/jqueryUi/jqueryEaseyUI/extjs/angulrJs/react/es6/grunt/zepto/raphael (81)
- ZMQ/RabbitMQ/ActiveMQ/JMS/kafka (17)
- lucene/solr/nuth/elasticsearch/MG4J (167)
- html/css/ionic/nodejs/bootstrap (19)
- Linux/shell/centos (56)
- cvs/svn/git/sourceTree/gradle/ant/maven/mantis/docker/Kubernetes (26)
- sonatype nexus (1)
- tomcat/jetty/netty/jboss (9)
- 工具 (17)
- ETL/SPASS/MATLAB/RapidMiner/weka/kettle/DataX/Kylin (11)
- hadoop/spark/Hbase/Hive/pig/Zookeeper/HAWQ/cloudera/Impala/Oozie (190)
- ios/swift/android (9)
- 机器学习&算法&大数据 (18)
- Mesos是Apache下的开源分布式资源管理框架 (1)
- echarts/d3/highCharts/tableau (1)
- 行业技能图谱 (1)
- 大数据可视化 (2)
- tornado/ansible/twisted (2)
- Nagios/Cacti/Zabbix (0)
- eclipse/intellijIDEA/webstorm (5)
- cvs/svn/git/sourceTree/gradle/jira/bitbucket (4)
- jsp/jsf/flex/ZKoss (0)
- 测试技术 (2)
- splunk/flunm (2)
- 高并发/大数据量 (1)
- freemarker/vector/thymeleaf (1)
- docker/Kubernetes (2)
- dubbo/ESB/dubboX/wso2 (2)
最新评论
项目里需要一个进度条,所以就在网上查找资料学习,看到了网友“雪狼”的代码分享,写的很高明,很精练,很厉害,原文链接:http://www.ngnice.com/showcase/#/show/progress,结合自己的项目需要,自己改编了个简单的进度条,可以加在项目里面,进度条的开始和结束由自己决定。
var myApp = angular.module('myApp', []);
myApp.controller('main', ['$scope', '$interval', function($scope, $interval){
var vm = $scope.vm = {};
vm.value = 0;
vm.style = 'progress-bar-danger';
vm.showLabel = true;
vm.striped = true;
$scope.selectValue = function (){
console.log(vm.style);
};
var index = 0;
var timeId = 500;
$scope.count = function(){
var start = $interval(function(){
vm.value = ++index;
if (index > 99) {
$interval.cancel(start);
}
if (index == 60) {
index = 99;
}
}, timeId);
};
}]);
2. [代码]html
<div ng-class="{progress: true, 'progress-striped': vm.striped}" class="col-md-4">
<div ng-class="['progress-bar', vm.style]" ng-style="{width: vm.value + '%'}">
<div ng-if="vm.showLabel">{{vm.value}}%</div>
</div>
</div>
<button class="btn btn-success" ng-click="count()">开始进度</button>
var myApp = angular.module('myApp', []);
myApp.controller('main', ['$scope', '$interval', function($scope, $interval){
var vm = $scope.vm = {};
vm.value = 0;
vm.style = 'progress-bar-danger';
vm.showLabel = true;
vm.striped = true;
$scope.selectValue = function (){
console.log(vm.style);
};
var index = 0;
var timeId = 500;
$scope.count = function(){
var start = $interval(function(){
vm.value = ++index;
if (index > 99) {
$interval.cancel(start);
}
if (index == 60) {
index = 99;
}
}, timeId);
};
}]);
2. [代码]html
<div ng-class="{progress: true, 'progress-striped': vm.striped}" class="col-md-4">
<div ng-class="['progress-bar', vm.style]" ng-style="{width: vm.value + '%'}">
<div ng-if="vm.showLabel">{{vm.value}}%</div>
</div>
</div>
<button class="btn btn-success" ng-click="count()">开始进度</button>
发表评论
-
JS解析json数据(如何将json字符串转化为数组)
2018-01-11 09:56 846<!DOCTYPE HTML PUBLIC &quo ... -
bootstrap-datetimepicker 日期控件的开始日期
2017-09-22 00:59 1134今天做日期控件,需求要求设置一个时间范围限制,选择从今天开始 ... -
AngularJS ng-show 指令
2017-09-26 09:50 428http://www.runoob.com/angul ... -
js 判断数组中是否包含
2017-09-15 19:35 522可以使用数组的indexOf()方法,如果返回值为-1则说 ... -
jquery中html()、text()、val()的区别
2017-09-13 16:02 777.html()用为读取和修改元素的HTML标签 对应j ... -
grunt nodejs npm的关系是什么样的?
2017-09-11 15:03 548昨天自己鼓捣grunt,开始的时候不大明白,现在好像有种模糊 ... -
grunt安装及使用
2017-09-11 14:54 1216Grunt是什么? Grunt是一个基于JavaScri ... -
NPM是随同NodeJS一起安装的包管理工具
2017-09-11 14:22 572NPM 使用介绍 NPM是随同NodeJS一起安装的包管理 ... -
浅谈 Flash/Flex/HTML5 技术选型
2017-09-11 11:09 513在HTML5发布以前,RIA领 ... -
JSON数据的删除某个元素
2017-09-07 16:39 1094有一组JSON数据: var tempJSON = [{id ... -
JS异步加载的三种方式
2017-09-01 12:19 798一:同步加载 我们平时使用的最多的一种方式。 & ... -
Javascript异步编程的4种方法
2017-09-01 12:19 480你可能知道,Javascript ... -
AngularJS 实现按需异步加载实例代码
2017-09-01 12:19 757AngularJS 通过路由支持多视图应用, 可以根据路由 ... -
angularJS页面加载完成后调用,循环结束后调用
2017-08-31 19:19 1585angularJS页面加载完成后调用,代码如下 ... -
JS 跨域原因及其解决方案
2017-08-18 10:57 634产生跨域问题的原因 跨域问题是浏览器同源策略限制,当前域名 ... -
gRaphael——JavaScript 矢量图表库
2017-06-12 17:34 854gRaphael 是一个致力于帮 ... -
Raphael.js简易教程
2017-06-12 17:35 983Raphael.js 的教程非常简单,仅首页一段代码,然后 ... -
Zepto.js
2017-05-26 15:58 778Zepto是一个轻量级的针对现代高级浏览器的JavaScr ... -
阿里g2图表
2017-04-11 12:22 13311.百度的Echart ECharts,缩写来自Ente ... -
为什么js文件的名字像MD5运算过的一样?
2017-04-07 00:24 463这个过程叫做 revision。如果你有一个名字是 main ...
相关推荐
在本示例中,我们通过使用AngularJS框架来实现一个动态的进度条功能,该进度条可以根据用户交互而变化。以下将详细介绍实现此功能的原理、相关知识点以及注意事项。 ### 功能描述 1. **样式选择**:进度条的样式...
在本篇文章中,我们将探讨如何使用jQuery和AngularJS这两种流行的JavaScript库来实现百分比进度条。 首先,让我们了解jQuery的实现方式。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互...
在本篇文章中,将介绍如何使用Spring Boot、AngularJS和Bootstrap来实现一个进度条的功能。 首先,了解Spring Boot是一种用来简化新Spring应用的初始搭建以及开发过程的框架。它利用了特定的方式来配置应用,通常...
创建圆形进度条的AngularJS模块 用法 下载 只需在您的页面中包含dist/circularProgress.min.js (或circularProgress.min.js ) 您还可以通过运行bower install angular-circular-progress来使用 用法 将angular-...
- 第三方框架:如Bootstrap、AngularJS、Vue.js等提供了内置的进度条组件,方便开发者快速集成。 3. **JQUERY插件**: - jQuery进度条插件,如`ProgressBar.js`,提供了丰富的自定义选项和动画效果,适用于各种...
- 进度条功能主要在前端实现,通过JavaScript(例如jQuery或AngularJS)监听文件API的`progress`事件来获取上传进度。 - 当文件被分成多个部分上传时,`progress`事件会提供已上传的数据量和总数据量,从而更新...
AngularJS 文件上传插件是基于 AngularJS 框架开发的一种功能组件,它极大地简化了在 Web 应用中处理文件上传的过程。AngularJS 是一个强大的前端JavaScript框架,由Google维护,它提供了一种模块化、数据绑定和依赖...
在实际项目中,你可能还需要考虑错误处理、多文件上传、进度条显示等功能,以及安全性问题,比如防止跨站脚本攻击(XSS)和跨站请求伪造(CSRF)。在开发过程中,确保遵循最佳实践,为用户提供安全、流畅的体验。
8. 自定义组件:可能包括进度条、时间线、滑块等,根据实际需求定制。 在实际使用过程中,开发者需要根据自己的业务需求对模板进行扩展和定制。例如,添加新的API接口以与服务器进行通信,调整样式以符合企业品牌...
4. **数据绑定**:如果图片数量较多,我们可以使用数据绑定技术(如AngularJS或Vue.js)来动态加载和切换图片,同时更新进度条的值。这使得代码更加模块化,更容易维护。 5. **事件监听**:通过监听用户的行为,如...
在实际开发中,pace.js还可以与其他前端框架如Bootstrap、AngularJS等无缝集成,提供一致的加载体验。同时,如果你的项目使用了模块化构建工具如Webpack或Browserify,pace.js也可以通过npm或yarn安装并按需引入。 ...
为了提高用户体验,可以使用AngularJS的`ng-file-upload`库,它提供了更高级的功能,如进度条、取消上传和预览。这个库已经封装好了与后端交互的复杂逻辑,使得前端代码更简洁。 在HTML模板中,`ng-file-upload`库...
同时,Bootstrap还提供了诸如模态框(Modal)和进度条(Progress Bar)等组件,可以用来展示文件上传的进度和状态。 例如,当用户选择文件后,我们可以显示一个模态框,实时更新每个文件的上传进度: ```html ...
CSS和JS目录中的文件可能包含了样式和额外的功能增强,例如进度条显示、错误提示等。在`js`目录下,可能有用于处理文件选择、进度更新和错误处理的辅助函数。CSS文件则用于美化上传界面。 总之,使用AngularJS进行...
Loadingbar则是AngularJS生态系统中的一个插件,它为开发者提供了一种简单的方式来添加进度条,展示应用中的HTTP请求过程。 **主要功能和特点** 1. **自动检测HTTP请求**:AngularJS Loadingbar能够自动监听所有的...
角圆进度使用 Angular JS 的圆形进度条使用安装 angular-round-progress 。$ bower install angular-round-progress --save快速开始将这些库添加到您的页面: < link href =" bower_components/angular-round-...
jQuery-File-Upload则是流行的文件上传插件,它支持多文件选择、进度条显示、预览、删除等功能,且兼容各种浏览器。 这篇名为“AngularJS封装jQuery-File-Upload”的博文主要探讨了如何将jQuery-File-Upload的功能...
《AngularJS实现用户头像上传功能详解》 在现代Web应用开发中,用户头像上传是一项常见的功能,它能够提供个性化的用户体验,并帮助用户更好地识别彼此。本篇文章将深入探讨如何利用AngularJS这一强大的前端框架来...