優惠券領取,動態進度條

思路:

1.靜態頁面寫好

2.js設置內層div的寬度

代碼:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #loadbar {
      width: 280px;
      background-color: #F6D7A5;
      border: 1px solid #F6D7A5;
    }

    #bar {
      display: block;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      background-color: #F5A623;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="loadbar">
  <strong id="bar" style="width:60%">xxx%</strong>
</div>
<script>

</script>
</body>
</html>

效果:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章