Java文件下载,HTML进度条实时刷新进度

2024年1月25日发(作者：)

.circliful { position: relative;

}.circle-text, .circle-info, .circle-text-half, .circle-info-half { width: 100%; position: absolute; text-align: center; display: inline-block;}.circle-info, .circle-info-half { color: #999;}.circliful .fa { margin: -10px 3px 0 3px; position: relative; bottom: 4px;}JS (function( $ ) { $.ful = function(options) { var settings = $.extend({ // These are the defaults. foregroundColor: "#556b2f", backgroundColor: "#eee", fillColor: false, width: 15, dimension: 200, size: 15,

percent: 50, animationStep: 1.0 }, options ); return (function() { var dimension = ''; var text = ''; var info = ''; var width = ''; var size = 0; var percent = 0; var endPercent = 100; var fgcolor = ''; var bgcolor = ''; var icon = ''; var animationstep = 0.0; $(this).addClass('circliful'); if($(this).data('dimension') != undefined) { dimension = $(this).data('dimension'); } else { dimension = ion; } if($(this).data('width') != undefined) { width = $(this).data('width'); } else { width = ;

width = ; } if($(this).data('fontsize') != undefined) { size = $(this).data('fontsize'); } else { size = ; } if($(this).data('percent') != undefined) { percent = $(this).data('percent') / 100; endPercent = $(this).data('percent'); } else { percent = t / 100; } if($(this).data('fgcolor') != undefined) { fgcolor = $(this).data('fgcolor'); } else { fgcolor = oundColor; } if($(this).data('bgcolor') != undefined) { bgcolor = $(this).data('bgcolor'); } else { bgcolor = oundColor; } if($(this).data('animation-step') != undefined) { animationstep = parseFloat($(this).data('animation-step')); } else { animationstep = ionStep; } if($(this).data('text') != undefined) { text = $(this).data('text'); if($(this).data('icon') != undefined) { icon = ''; } if($(this).data('type') != undefined) { type = $(this).data('type'); if(type == 'half') { $(this).append('' + icon + text + ''); $(this).find('.circle-text-half').css({'line-height': (dimension / 1.45) + 'px', 'font-size' : size + 'px' }); } else { $(this).append('' + icon + text + ''); $(this).find('.circle-text').css({'line-height': dimension + 'px', 'font-size' : size + 'px' }); } } else { $(this).append('' + icon + text + ''); $(this).find('.circle-text').css({'line-height': dimension + 'px', 'font-size' : size + 'px' }); } } else if($(this).data('icon') != undefined) { } if($(this).data('info') != undefined) { info = $(this).data('info'); if($(this).data('type') != undefined) { type = $(this).data('type'); if(type == 'half') {

$(this).append('' + info + '');

$(this).append('' + info + ''); $(this).find('.circle-info-half').css({'line-height': (dimension * 0.9) + 'px', }); } else { $(this).append('' + info + ''); $(this).find('.circle-info').css({'line-height': (dimension * 1.25) + 'px', }); } } else { $(this).append('' + info + ''); $(this).find('.circle-info').css({'line-height': (dimension * 1.25) + 'px', }); } } $(this).width(dimension + 'px'); var canvas = $('').attr({ width: dimension, height: dimension }).appendTo($(this)).get(0); var context = text('2d'); var x = / 2; var y = / 2; var degrees = percent * 360.0; var radians = degrees * ( / 180); var radius = / 2.5; var startAngle = 2.3 * ; var endAngle = 0; var counterClockwise = false; var curPerc = animationstep === 0.0 ? endPercent : 0.0; var curStep = (animationstep, 0.0); var circ = * 2; var quart = / 2; var type = ''; var fill = false; if($(this).data('type') != undefined) { type = $(this).data('type'); if(type == 'half') { var startAngle = 2.0 * ; var endAngle = 3.13; var circ = * 1.0; var quart = / 0.996; } } if($(this).data('fill') != undefined) { fill = $(this).data('fill'); } else { fill = lor; } //animate foreground circle function animate(current) { ect(0, 0, , ); ath(); (x, y, radius, endAngle, startAngle, false); dth = width - 1; // line color Style = bgcolor; (); if(fill) { yle = fill; (); } ath(); (x, y, radius, -(quart), ((circ) * current) - quart, false);

(x, y, radius, -(quart), ((circ) * current) - quart, false); dth = width; // line color Style = fgcolor; (); if (curPerc < endPercent) { curPerc += curStep; requestAnimationFrame(function () { animate((curPerc, endPercent) / 100); }); } } animate(curPerc / 100); }); };}( jQuery ));