js定时器应用一则

时间：2021-08-10 23:27:54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现进度条</title>
<style>
 .progressBar{width:300px;height:30px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
 #bar{width:0px;height:30px;background:#5EC4EA;}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
  var arr = new Array();
  arr.push('1 春种一粒粟，秋收万颗子。');
  // 这个超出显示区域长度，会断句，新增到下一行
  arr.push('2 四海无闲田，农夫犹饿死。1 春种一粒粟，秋收万颗子。');
  arr.push('3 锄禾日当午，汗滴禾下土。');
  arr.push('4 谁知盘中餐，粒粒皆辛苦。');

  var bar;
  var lineNum = 0;
  var lineWidth = 0;
  var status = 0;
  var contentMaxLength = 20;

 function progressBar(){
    // 开始&&继续
    if(status == 0){
        $('#btn').val('暂停');
        status = 1;
        setTimer();
    }else{
        $('#btn').val('继续');
        status = 0;
        clearInterval(bar);
    }
 }

 function setTimer(){
    var speed = 20;
        bar = setInterval(function(){
          nowWidth = parseInt($("#bar").width());
          //宽度要不能大于进度条的总宽度
          if(nowWidth <= lineWidth && lineWidth != 0){
            var barWidth = (nowWidth + 1)+"px";
            $("#bar").css("width", barWidth);
          }else{
            content();
          } 
      }, speed);
 }

 function content(){
    if(lineNum >= arr.length){
      $('#btn').val('重新开始');
      status = 0;
      lineNum = 0;
      clearInterval(bar);
    }else{
      $("#bar").css("width","0px");
      var content = arr[lineNum];
      if(content.length <= contentMaxLength){
          $("#text").html(content);
      }else{
          // 超出部分需要加入到数组中
          var view = content.substring(0, contentMaxLength);
          var newLine = content.substring(contentMaxLength);
          arr.splice(lineNum + 1, 0, newLine);
          $("#text").html(view);
          console.log('?');
      }
      lineWidth = parseInt($("#text").css("width"));
      lineNum++;
    }
 }
</script>
</head>
<body>
 <input id="btn" type="button" value="开始" onclick="progressBar()" />
 <div class="progressBar">
    <div id="bar" style="position:absolute; "></div>
    <div id="text" style="position:absolute; "></div>
  </div>
</body>
</html>


标签：

相关文章