码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript入门学习(2)--进度条

时间:2018-06-21 20:17:51      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:java   TE   完成   math   else   function   html   ntb   width   

<html>
<style type="text/css">
#bar{width:0px; height:20px;
     background:#ee00ff;}//定义进度条的前景色
</style>
<script>
   var act;
   function over(){
     var w=document.getElementById("bar").style.pixelWidth;
     if (w<400){
                 document.getElementById("bar").style.pixelWidth=w+2;
                 document.getElementById("txt").innerText="Loading..."+Math.floor((w/400)*100)+"%";
                 clearTimeout(act);
                 act=setTimeout(over,10);
     }  else{document.getElementById("txt").innerText="载入完成100%";
     };

   };
   function out(){
     var w=document.getElementById("bar").style.pixelWidth;
     if (w>0){
                 document.getElementById("bar").style.pixelWidth=w-2;
                 document.getElementById("txt").innerText="Loading..."+Math.floor((w/400)*100)+"%";
                 clearTimeout(act);
                 act=setTimeout(out,10);
     }  else{document.getElementById("txt").innerText="载入完成0%";
     };

   };
   function Apouse(){
                 clearTimeout(act);
   };
</script>
<button onclick="over()">开始转入</button><br>
<button onclick="out()">开始卸载</button><br><br>
<button onclick="Apouse()">暂停</button><br><br>


<h4  id="txt">等待载入</h4>
<div id="bar"></div>

</html>

  

JavaScript入门学习(2)--进度条

标签:java   TE   完成   math   else   function   html   ntb   width   

原文地址:https://www.cnblogs.com/tulater/p/9210729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!