实现一个简单的进度条

提纲:本文主要说明了Linux系统和Windows系统下回车和换行的区别,以及Linux下缓冲区的问题,最后运用这两点知识实现一个简单的进度条。
一、关于回车和换行
不同操作系统下的回车和换行
1、Windows操作系统下
回车’\r’:就是将光标移到本行的开头,并将之前的内容覆盖掉;
换行’\n’:就是将光标移到下一行的开头;

2、Unix/Linux系统下
回车’\r’:就是将光标移到本行的开头,并将之前的内容覆盖掉;
换行’\n’:就是将光标移到下一行,但并不一定是下一行的开头,如果下一行有内容的话就将光标移到那些内容的后面,如果下一行没有内容的话,就将光标移动到下一行的开头;

二、在Linux系统下实现一个简单的进度条
1、基本思路
(1)要实现一个进度条,首先先要给一段空间,我们假设这段空间是100,并且将它控制在[]之间;
(2)由于是一个进度条,因此要动态的增长,于是我们第一次输入一个字符‘#’,然后加上睡眠时间,再回到该行的起始位置输入两个‘#’字符,以此类推,就达到了进度条的效果;
2、代码实现,有了以上的思路,我们简单的实现一下代码:
这里写图片描述
运行此代码之后发现我的进度条是一段一段打印出来的,这就很尴尬了,查阅相关资料之后才发现,是因为我没有刷新缓冲区造成的
3、刷新缓冲区
printf是一个行缓冲函数,先写到缓冲区,满足条件后,才将缓冲区刷到对应文件中,刷缓冲区的条件如下:
(1)缓冲区填满;
(2)写入的字符中有‘\n’ ,’\r’;
(3)调用fflush手动刷新缓冲区;
(4)调用scanf要从缓冲区中读取数据时,也会将缓冲区内的数据刷新;
满足上述条件之一,就可以刷新缓冲区。
我们再来对我们的代码进行修改:在每次打印完之后,用fflush函数对缓冲区进行刷新,代码如下:
这里写图片描述
至此,我们可以实现进度条的基本功能了。
4、对进度条的两点完善
(1)由于在实际场景中,我们通常会看到进度条的后面都会有进度显示,即当前的进度是百分之几,因此我们在代码中加上进度显示,代码如下:
这里写图片描述
效果如下:
这里写图片描述
(2)如果想要进一步完善的话,可以再加上旋转的动态效果图,以判断程序运行的快慢以及是否卡住,完善后的代码如下:
这里写图片描述
至此,简单进度条的实现就完成了,重点是对平常用的回车和换行有了进一步的认识,同时还了解了一点缓冲区的概念~

在React中实现一个动态进度条,你需要创建一个组件,它可以根据传入的进度值来更新进度条的外观。以下是一个简单实现示例: 1. 创建一个新的React组件`ProgressBar`。 2. 在该组件的状态中维护一个表示进度的值。 3. 在组件的`render`方法中,根据状态中的进度值来设置进度条的宽度。 4. 可以通过props传递进度值给`ProgressBar`组件,或者使用内部的状态管理来更新进度。 以下是一个简单的组件代码示例: ```jsx import React, { useState } from 'react'; import './ProgressBar.css'; // 假设你已经创建了一个样式文件来美化进度条 function ProgressBar(props) { const [progress, setProgress] = useState(0); // 初始化进度状态 // 模拟进度更新的函数 const updateProgress = () => { // 假设每段时间进度增加10%,直至100% setProgress(progress < 100 ? progress + 10 : 100); setTimeout(updateProgress, 1000); // 递归调用以模拟进度条更新 }; // 组件加载完成后开始更新进度 React.useEffect(() => { updateProgress(); }, []); return ( <div className="progress-bar"> <div className="progress-bar-fill" style={{ width: `${progress}%` }} // 根据进度设置宽度 ></div> </div> ); } export default ProgressBar; ``` 对应的CSS样式`ProgressBar.css`可能如下所示: ```css .progress-bar { width: 100%; background-color: #e0e0e0; padding: 3px; border-radius: 3px; box-shadow: 0 2px 3px #ccc inset; } .progress-bar-fill { height: 20px; background-color: #76c043; border-radius: 3px; transition: width 0.5s ease-in-out; } ``` 使用该组件时,你可以在父组件中通过状态提升或其他方式控制`ProgressBar`的进度更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值