Javascript进度条在加载后清除值
Javascript progress bar clear value after load
我有一个简单的HTML页面,上面有一个JavaScript进度条。我的页面每 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;
}
爪哇语
<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);
}
<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/
相关文章:
- 在Chrome中重新加载页面后清除表单输入值
- Bloodhound JS在加载时清除LocalStorage
- 清除网格中的存储和加载搜索结果
- 谷歌地图API-在从ajax页面加载新数据之前清除标记、多段线
- 在页面加载时清除/重新应用表分类器筛选
- Javascript进度条在加载后清除值
- 清除搜索词,并在选择任何项目后重新加载 Select2 输入的所有项目
- 使用办公加载项清除 Excel 2013 中的工作表
- 在不重新加载页面的情况下清除值
- 清除文本框字段后再次加载选择框
- 是否存在清除从文档中删除的DOM子树的方法(至少可以阻止加载该子树中的图像)
- 为什么获胜'尝试重新加载数据时,我的$scope字段不清除
- 当jQuery.remove()用于删除脚本标记时,它是否清除加载的javascript
- Rails:表单部分在AJAX提交后未清除/重新加载
- 如何观察属性并在重新加载时清除它们
- 强制重新加载页面时清除url get参数
- jQuery:加载后立即清除输入字段
- 何时创建/清除$_FILES |重新加载与javascript的关系
- 加载AJAX后从内存中清除对象的Javascript
- 如何清除加载了ajax的表单