html 一个简单的进度条

最新推荐文章于 2024-09-22 14:04:58 发布

小张晚安

最新推荐文章于 2024-09-22 14:04:58 发布

阅读量1.6k

点赞数 1

文章标签： javascript html5 html css

本文链接：https://blog.csdn.net/weixin_45004942/article/details/116589646

版权

本文通过HTML5、CSS和JavaScript展示了如何创建一个简单的进度条。通过实例代码，读者可以了解进度条的实现过程和关键代码片段。

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

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style> 
    .div1{
        width: 80%;  /*进度条宽度，可自定义*/
        height: 20px;  /*进度条高度，可自定义*/
        border: 1px solid black;  /*进度条边缘颜色，可自定义*/   
    }

    #couds{
        background: red;  /* 进度条颜色*/
        float: left;        /* 浮动   使其在左显示*/
        color: white;       /*字体颜色 */
        text-align: center;  /* 进度条显示过程中，字体保持居中*/
    }
</style>

<div class="div1">
    <strong id="couds"></strong>
</div>
<script type="text/javascript">
// 这里为什么不用var ，是因为var 会直接显示完进度条，let相当于一个局部变量，仅可以在此内部使用，使其不受其他因素影响
    for(let i=0;i<101;i++){
        setTimeout(function(){
            couds.style.width = i + "%