Question

我有一个带有JavaScript进度条的简单HTML页面。我的页面每30秒重新加载一次，我的进度条设置为30秒加载。

我想要的是每次页面重新加载时清除进度条的值，并从0到100％再次开始加载。谁能帮我这个？谢谢！

这是我到目前为止所拥有的。

HTML

<input type="text" id="val1" placeholder="Search" onKeyPress="Val1KeyPress()" onKeyUp="Val1KeyPress()"/>

<input type = "text" id="date" placeholder="date to">
            <img src="cal1.png" />
            <input type = "text" id="date1" placeholder="date from">
            <img src="cal2.png" />
            <input type="submit" id="btn_search"  value="search"/>


<div class = "iframe-div">
            <iframe id="iframe" src='http://mypage.aspx' runat="server" allowTransparency='true' width='850px' height='500px'>
            </iframe> 

        </div>

  <div id="progressbar" class="progress-wrap progress" data-progress-percent="100">
  <div class="progress-bar progress"></div>
  </div>

CSS

  .progress {
  width: 100%;
  height: 50px;
  margin-top:-10px !important;
}

.progress-wrap {
  background: #f80;
  border-radius: 0 !important;
  overflow: hidden;
  position: relative;
}
.progress-wrap .progress-bar {
  background: #ddd;
  position: absolute;

}

的Javascript

    <script>
function setURL(url){
    document.getElementById('iframe').src = url;
}
</script>

<script>
    function Val1KeyPress()
    {
        var val1 = document.getElementById("val1");
        var sr = val1.value;
        var lblValue = document.getElementById("lblValue");
        lblValue.innerText = " "+s;
    }
    function sample(){
        var val1 = document.getElementById("val1");
        var sr = val1.value;

        var date = document.getElementById("date");
        var dtep = "&dateto=".concat(date.value);

        var date1 = document.getElementById("date1");
        var dtep1 = "&datefrm=".concat(date1.value);

        setURL('http://mypage.aspx?search='.concat(sr, dtep, dtep1))
    }
</script>


  <script>
    var picker = new pikdate
    (
{
    field: document.getElementById('date'),
    firstDay: 1,
    format: 'MM/DD/YYYY',
    minDate: new Date(2000, 0, 1),
    maxDate: new Date(2020, 12, 31),
    yearRange: [2000, 2020]
});
</script>
 <script>
     var picker = new Pikaday(
{
    field: document.getElementById('date1'),
    firstDay: 1,
    format: 'MM/DD/YYYY',
    minDate: new Date(2000, 0, 1),
    maxDate: new Date(2020, 12, 31),
    yearRange: [2000, 2020]
});

</script>

  <script>


 moveProgressBar();
    $(window).resize(function() {
        moveProgressBar();
    });
    function moveProgressBar() {
      console.log("moveProgressBar");
        var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
        var getProgressWrapWidth = $('.progress-wrap').width();
        var progressTotal = getPercent * getProgressWrapWidth;
        var animationLength = 30000;

        // on page load, animate percentage bar to data percentage length
        // .stop() used to prevent animation queueing
        $('.progress-bar').stop().animate({
            left: progressTotal
        }, animationLength);
            clearInterval('.progress-wrap');

         var interval = setInterval(function () {
            clearInterval(interval);

               setURL('http://mypage.aspx?search?stat=');})
            setTimeout(arguments.callee, 31000);
}

Answer 1

<style>
    @keyframes progress {
        from {
            transform: scale(0, 1);
        }
        to {
            transform: none;
        }
    }
    .progress {
        background-color: blue; /*some color*/
        height: 4px; /*some height*/
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        transform-origin: left;
    }
    .animation {
        animation: progress 30s;
    }
</style>
<div class="progress animation"></div>
<script>
    var progressBar = document.querySelector('.progress');
    function restartprogressBar() {
        progressBar.classList.remove('animation');
        progressBar.offsetWidth = progressBar.offsetWidth;
        progressBar.classList.add('animation');
    };
    setInterval(function() {
        //setURL function comes here
        restartprogressBar();
    }, 30000);
</script>

https://jsfiddle.net/namannehra/osae4u5e/

加载后Javascript进度条清除值

1 个答案: