Skip to content

Instantly share code, notes, and snippets.

@antronic

antronic/progress-time.html

Last active June 25, 2022 01:02
Download ZIP

Revisions

  1. antronic revised this gist Jun 25, 2022. 1 changed file with 5 additions and 2 deletions.
    7 changes: 5 additions & 2 deletions progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,8 +30,11 @@
    </div>
    <p id="num">loading...</p>
    <script>
    var start = new Date(1647867600000).getTime() // Mon Mar 21 2022 20:00:00 GMT+0700 (Indochina Time)
    var target = new Date(1647874800000).getTime() // Mon Mar 21 2022 22:00:00 GMT+0700 (Indochina Time)
    var startTime = 1656124200000
    var endTime = 1656127800000

    var start = new Date(startTime).getTime() // Mon Mar 21 2022 20:00:00 GMT+0700 (Indochina Time)
    var target = new Date(endTime).getTime() // Mon Mar 21 2022 22:00:00 GMT+0700 (Indochina Time)

    setInterval(function() {
    var now = Date.now()
  2. antronic revised this gist Mar 21, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@
    html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    }
    #wrapper {
    width: 100%;
  3. antronic revised this gist Mar 21, 2022. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -29,8 +29,8 @@
    </div>
    <p id="num">loading...</p>
    <script>
    var start = new Date(1647867158177).getTime()
    var target = new Date(1647874800000).getTime()
    var start = new Date(1647867600000).getTime() // Mon Mar 21 2022 20:00:00 GMT+0700 (Indochina Time)
    var target = new Date(1647874800000).getTime() // Mon Mar 21 2022 22:00:00 GMT+0700 (Indochina Time)

    setInterval(function() {
    var now = Date.now()
  4. antronic revised this gist Mar 21, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@
    var progressEl = document.querySelector('#progress')
    var numEl = document.querySelector('#num')
    progressEl.style.width = (100 - diff) + '%'
    numEl.innerText = (100 - diff) + '%'
    numEl.innerText = Number(100 - diff).toFixed(2) + '%'
    }, 1000)
    </script>
    </body>
  5. antronic revised this gist Mar 21, 2022. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -18,12 +18,16 @@
    background: #fafafa;
    transition: all 1s linear;
    }

    #num {
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="progress"></div>
    </div>
    <p id="num">loading...</p>
    <script>
    var start = new Date(1647867158177).getTime()
    var target = new Date(1647874800000).getTime()
    @@ -33,7 +37,9 @@
    var diff = ((target - now) / (target - start)) * 100

    var progressEl = document.querySelector('#progress')
    var numEl = document.querySelector('#num')
    progressEl.style.width = (100 - diff) + '%'
    numEl.innerText = (100 - diff) + '%'
    }, 1000)
    </script>
    </body>
  6. antronic revised this gist Mar 21, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,7 +33,7 @@
    var diff = ((target - now) / (target - start)) * 100

    var progressEl = document.querySelector('#progress')
    progressEl.style.width = diff + '%'
    progressEl.style.width = (100 - diff) + '%'
    }, 1000)
    </script>
    </body>
  7. antronic revised this gist Mar 21, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -25,7 +25,7 @@
    <div id="progress"></div>
    </div>
    <script>
    var start = new Date(1647867600000).getTime()
    var start = new Date(1647867158177).getTime()
    var target = new Date(1647874800000).getTime()

    setInterval(function() {
  8. antronic revised this gist Mar 21, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,7 +33,7 @@
    var diff = ((target - now) / (target - start)) * 100

    var progressEl = document.querySelector('#progress')
    progressEl.style.width = diff
    progressEl.style.width = diff + '%'
    }, 1000)
    </script>
    </body>
  9. antronic revised this gist Mar 21, 2022. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,13 +26,15 @@
    </div>
    <script>
    var start = new Date(1647867600000).getTime()
    var now = Date.now()
    var target = new Date(1647874800000).getTime()

    var diff = ((target - now) / (target - start)) * 100

    var progressEl = document.querySelector('#progress')
    progressEl.style.width = diff
    setInterval(function() {
    var now = Date.now()
    var diff = ((target - now) / (target - start)) * 100

    var progressEl = document.querySelector('#progress')
    progressEl.style.width = diff
    }, 1000)
    </script>
    </body>
    </html>
  10. antronic revised this gist Mar 21, 2022. 1 changed file with 13 additions and 4 deletions.
    17 changes: 13 additions & 4 deletions progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,14 +8,15 @@
    }
    #wrapper {
    width: 100%;
    height: 2px;
    background: #fafafa;
    height: 5px;
    background: #111;
    }

    #progress {
    width: 100%;
    width: 0%;
    height: 100%;
    background: #f00;
    background: #fafafa;
    transition: all 1s linear;
    }
    </style>
    </head>
    @@ -24,6 +25,14 @@
    <div id="progress"></div>
    </div>
    <script>
    var start = new Date(1647867600000).getTime()
    var now = Date.now()
    var target = new Date(1647874800000).getTime()

    var diff = ((target - now) / (target - start)) * 100

    var progressEl = document.querySelector('#progress')
    progressEl.style.width = diff
    </script>
    </body>
    </html>
  11. antronic revised this gist Mar 21, 2022. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,10 @@
    <head>
    <title>Progress time</title>
    <style type="text/css">
    html, body {
    margin: 0;
    padding: 0;
    }
    #wrapper {
    width: 100%;
    height: 2px;
  12. antronic revised this gist Mar 21, 2022. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,17 @@
    <head>
    <title>Progress time</title>
    <style type="text/css">
    #wrapper {
    width: 100%;
    height: 2px;
    background: #fafafa;
    }

    #progress {
    width: 100%;
    height: 100%;
    background: #f00;
    }
    </style>
    </head>
    <body>
  13. antronic created this gist Mar 21, 2022.
    14 changes: 14 additions & 0 deletions progress-time.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <html>
    <head>
    <title>Progress time</title>
    <style type="text/css">
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="progress"></div>
    </div>
    <script>
    </script>
    </body>
    </html>