欢迎来到 SiteSMO | 思默AI智能问答平台!
注册或点击登录代表您同意《SiteSMO网络服务安全协议》
提示信息
请打开微信扫码登录
返回列表

来一个b站进度条的html

举报
314阅读 | 0人回复 | 2023-06-22 19:02:06

本帖由 RoC ... 发布,如有侵权联系删除 IP属地:甘肃

当然,以下是一个简单的B站进度条的HTML代码:

<!DOCTYPE html>
<html>
<head>
  <title>B站进度条</title>
  <style>
    #progress-bar {
      width: 500px;
      height: 20px;
      background-color: #f2f2f2;
      border-radius: 10px;
      margin: 50px auto;
    }

    #progress {
      width: 0%;
      height: 100%;
      background-color: #ff4d4f;
      border-radius: 10px;
      transition: width 0.3s ease-in-out;
    }
  </style>
</head>
<body>
  <div id="progress-bar">
    <div id="progress"></div>
  </div>

  <script>
    // 模拟进度增加
    var progress = 0;
    var interval = setInterval(function() {
      progress += 10;
      document.getElementById("progress").style.width = progress + "%";
      if (progress >= 100) {
        clearInterval(interval);
      }
    }, 1000);
  </script>
</body>
</html>

你可以将以上代码复制到一个HTML文件中,然后在浏览器中打开该文件,即可看到一个简单的B站进度条效果。进度条会在每秒钟递增10%,直到达到100%。你也可以根据自己的需求修改进度条的样式和动画效果。

复制
0
0

注:避免重复,不要就相同的标题进行反复追问。

回答共0个
回复禁止带推广链接、违法词及灌水,违规将封禁账号!!
您需要登录后才可以回复 注册 / 登录
每个账号仅有一次回答机会!
取消
提示信息
请选择举报理由
我要回答