我无法更新jquery中的进度条宽度

这里进度条宽度没有正确更新。我使用socket.io来发送进度百分比。我无法更新jquery中的进度条宽度

尽管进度百分比是100％，但它显示在提供的屏幕截图中。如果我手动重新压缩html页面，则进度条宽度会正确更新。

我真的陷入了here.Can请人帮我了关于这个问题......

我app.js：

var express = require('express'); 
var path = require('path'); 
var favicon = require('serve-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 
var fs = require('fs'); 
var request = require('request'); 
var progress = require('request-progress'); 
var targz = require('tar.gz'); 

var DOWNLOAD_DIR = '/usr/local/'; 
var file_name = 'node-v0.12.7.tar.gz' 


var routes = require('./routes/index'); 
var users = require('./routes/users'); 


var app = express(); 
var http = require('http').createServer(app); 
var io = require('socket.io')(http); 


http.listen(8085, function(){ 
    console.log('listening on *:8085'); 
}); 

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'jade'); 

// uncomment after placing your favicon in /public 
//app.use(favicon(__dirname + '/public/favicon.ico')); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.use('/', routes); 
app.use('/users', users); 

app.get('/get', function (req, res) { 
res.sendfile('views/index.html'); 

}); 



io.of('/socket_issue').on('connection', function (socket) { 
     console.log("Socket connected :"+socket.id); 
    }); 
var callback = function(state){ 
    console.log('received size in bytes', state.received); 
    console.log('total size in bytes', state.total); 
    console.log('percent', state.percent); 

    io.of('/socket_issue').emit('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: file_name})); 

} 

progress(request('https://nodejs.org/dist/v0.12.7/node-v0.12.7.tar.gz'), { 
    throttle:0, 
    delay: 0  
}) 
.on('progress', callback) 

.pipe(fs.createWriteStream(DOWNLOAD_DIR + file_name)) 
.on('error', function (err) { 
console.log("error"); 
}) 
.on('close', function (err){ 
console.log("Download Complete"); 
}) 


// catch 404 and forward to error handler 
app.use(function(req, res, next) { 
    var err = new Error('Not Found'); 
    err.status = 404; 
    next(err); 
}); 

// error handlers 

// development error handler 
// will print stacktrace 
if (app.get('env') === 'development') { 
    app.use(function(err, req, res, next) { 
     res.status(err.status || 500); 
     res.render('error', { 
      message: err.message, 
      error: err 
     }); 
    }); 
} 

// production error handler 
// no stacktraces leaked to user 
app.use(function(err, req, res, next) { 
    res.status(err.status || 500); 
    res.render('error', { 
     message: err.message, 
     error: {} 
    }); 
}); 


module.exports = app;

我的index.html：

<html> 
<head> 

<style> 
     #progressBar { 
     width: 400px; 
     height: 22px; 
     border: 1px solid #111; 
     background-color: #292929; 
    } 
    #progressBar div { 
     height: 100%; 
     color: #fff; 
     text-align: right; 
     line-height: 22px; /* same as #progressBar height if we want text middle aligned */ 
     width: 0; 
     background-color: #0099ff; 
    } 
</style> 
</head> 

<body> 

<script type="text/javaScript"> 

</script> 
<script src="http://localhost:8085/javascripts/socket.js"></script> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

    <div id="progressBar"><div></div></div> 


<script type="text/javascript"> 
var socket = io('http://localhost:8085/socket_issue'); 
    socket.on('connect', function(){ console.log('connected to socket'); }); 
    socket.on('error', function(e){ console.log('error' + e); }); 
    socket.on('message', function(data){ 
    console.log(data); 
var percentage = JSON.parse(data).percent; 

     function progress(percent, $element) { 
     var progressBarWidth = percent * $element.width()/100; 
     $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% "); 
    } 
    progress(percentage, $('#progressBar')); 

    }); 
    socket.on('disconnect', function(){}); 
</script> 

</body> 
</html>

进度条的屏幕截图：

来源

2015-11-20 dev333

不要过分复杂的东西。

socket.on('message', function(data){ 
    $('#progressBar div').css("width", data + "%"); 
    $('#progressBar div').html(data + "%"); 
}

然后加入CSStransition规则

#progressBar div { 
    transition: 500ms ease-in; 
}

这将消除需要使用animate功能。

来源

2015-11-20 06:48:50 kaytrance

非常感谢kaytrance.It为我工作 – dev333

我无法更新jquery中的进度条宽度

回答

相关问题