PHP JS 进度条

最新推荐文章于 2024-04-15 10:46:07 发布

maltMai

最新推荐文章于 2024-04-15 10:46:07 发布

阅读量440

点赞数

分类专栏： mysql php 文章标签： php javascript

本文链接：https://blog.csdn.net/q423498555/article/details/54290586

版权

mysql 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

php

1 篇文章 0 订阅

订阅专栏

在大量数据从Excel导入到数据库的过程中，为提升用户体验，本文介绍了如何结合PHP和JavaScript实现一个动态的进度条。通过PHP逐条处理数据并配合JS更新HTML，最终实现了一个简单的进度条效果。

摘要由CSDN通过智能技术生成

从excel表中导入数据到数据库中，如果数据量比较大的时候，就需要一定的处理时间，这个时候如果可以出现一个进度条使得用户体验好一点。

//php关键代码
echo str_repeat(" ", 4096);//输出足够大小的内容，使得浏览器渲染
for($i = 0;$i < 10;$i++){
    echo $i;
    ob_flush();
    flush();
    sleep(1);
}

使用上面的代码就可以1秒输出1个数字了，但是我们的目标是想输出动态的进度条，那么还要配合上js跟html才可以完成

最终代码

<html xmlns="http://www.w3.org/1999/html">
<body>
<style>
    #bg{
        width: 200px;
        height: 20px;
        background-color: grey;
    }
    #pro{
        height: 20px;
        width: 0px;
        background-color: red;
    }
</style>
<div id="bg">
    <div id="pro">

    </div>
</div>
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    function update_pro(total,now)
    {
        $('#pro').css('width',now/total * 100 + '%');
    }
</script>


<?php
echo str_repeat("", 4096);//输出足够大小的内容，使得浏览器渲染
for($i = 0;$i < 10;$i++){
    echo "<script>update_pro(9,$i)</script>";
    ob_flush();
    flush();
    sleep(1);
}
?>
</html>

这样就可以完成1个简单的进度条了

maltMai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PHP JS 进度条

从excel表中导入数据到数据库中，如果数据量比较大的时候，就需要一定的处理时间，这个时候如果可以出现一个进度条使得用户体验好一点。//php关键代码echo str_repeat(" ", 4096);//输出足够大小的内容，使得浏览器渲染for($i = 0;$i < 10;$i++){ echo $i; ob_flush(); flush(); sleep(
复制链接

扫一扫

专栏目录