前端之家

  1. 首页
  2. 问答

根据表单输入对CSS中的进度条进行动画处理（可能是Jquery）

• 问答 

progress {
width: 100%;
background: #333;
height: 20px;
border: 0;
  
}
#progress-message {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<progress max="100" value="0" id="progress"></progress>
    <div class="progress-message" id="progress-message">This form,it wants you.</div>  
    <form action="MY actION" id="contactForm" method="post">
<input type="text" name="name" id="name" title="Name" value class="input-text reqyured-entry" placeholder="Your Name" required="required" autocomplete="off" />
<input type="email" name="email" id="email" title="Email" value class="input-text required-entry validate-email" placeholder="Email Address" required="required" pattern="^\S+@\S+\.\S+$" autocomplete="off" />
<input type="tel" name="telephone" id="telephone" title="Telephone" value class="input-text" placeholder="Telephone No" required="required" min="11" pattern="[0-9]*" autocomplete="off" />  
<textarea type="text" name="comment" id="comment" title="Comment" class="required-entry input-text" placeholder="Type your Message" style="resize: vertical;" min="10" rows="7" required="required"></textarea>
<input type="submit" value="SEND" title="Submit" class="button" />
</form>

<script>
$("#contactForm input,#contactForm textarea").keyup(function() {
  
var numValid = 0;
$("#contactForm input[required],#contactForm textarea[required]").each(function() {
    if (this.validity.valid) {
        numValid++;
    }
});

var progress = $("#progress"),progressMessage = $("#progress-message");

if (numValid == 0) {
    progress.attr("value","0");
    progressMessage.text("This form,it wants you.");
}
if (numValid == 1) {
    progress.attr("value","20");
    progressMessage.text("There you go,great start!");
}
if (numValid == 2) {
    progress.attr("value","40");
    progressMessage.text("Nothing can stop you now.");
}
if (numValid == 3) {
    progress.attr("value","80");
    progressMessage.text("You're basically a hero,right?");
}
if (numValid == 4) {
    progress.attr("value","95");
    progressMessage.text("SO CLOSE. PRESS THE THING.");
}
  
});
</script>

尊敬的Stackoverflow，

我正在尝试将此简单表单添加到我的网站。当用户在表单上输入文本时，进度条将移动以显示进度。我想知道我是否可以对CSS关键帧进行某些处理以使其具有动画效果。

所以它不会立即跳跃，而是会慢慢填充

song47295743 回答：根据表单输入对CSS中的进度条进行动画处理（可能是Jquery）

您可以执行以下操作：

function updateBar(percent) {
  var elem = $("#progress");
  var width = elem.attr("value");
  var id = setInterval(frame,20);

  function frame() {
    if (width >= 100 || width >= percent) {
      clearInterval(id);
    } else {
      width++;
      elem.attr("value",width);
    }
  }
}

然后我们将progress.attr("value","20");替换为updateBar(20)

演示 

$("#contactForm input,#contactForm textarea").keyup(function() {

  var numValid = 0;
  $("#contactForm input[required],#contactForm textarea[required]").each(function() {
    if (this.validity.valid) {
      numValid++;
    }
  });

  var progress = $("#progress"),progressMessage = $("#progress-message");

  if (numValid == 0) {
    updateBar(0)
    progressMessage.text("This form,it wants you.");
  }
  if (numValid == 1) {
    updateBar(20)
    progressMessage.text("There you go,great start!");
  }
  if (numValid == 2) {
    updateBar(40)
    progressMessage.text("Nothing can stop you now.");
  }
  if (numValid == 3) {
    updateBar(80)
    progressMessage.text("You're basically a hero,right?");
  }
  if (numValid == 4) {
    updateBar(95)
    progressMessage.text("SO CLOSE. PRESS THE THING.");
  }

});

function updateBar(percent) {
  var elem = $("#progress");
  var width = elem.attr("value");
  var id = setInterval(frame,20);

  function frame() {
    if (percent <= width) {
      if (width == percent) {
        clearInterval(id);
      } else {
        width--;
        elem.attr("value",width);
      }
    } else {
      if (width >= 100 || width >= percent) {
        clearInterval(id);
      } else {
        width++;
        elem.attr("value",width);
      }
    }

  }
}
progress {
  width: 100%;
  background: #333;
  height: 20px;
  border: 0;
}

#progress-message {
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<progress max="100" value="0" id="progress"></progress>
<div class="progress-message" id="progress-message">This form,it wants you.</div>
<form action="MY ACTION" id="contactForm" method="post">
  <input type="text" name="name" id="name" title="Name" value class="input-text reqyured-entry" placeholder="Your Name" required="required" autocomplete="off" />
  <input type="email" name="email" id="email" title="Email" value class="input-text required-entry validate-email" placeholder="Email Address" required="required" pattern="^\S+@\S+\.\S+$" autocomplete="off" />
  <input type="tel" name="telephone" id="telephone" title="Telephone" value class="input-text" placeholder="Telephone No" required="required" min="11" pattern="[0-9]*" autocomplete="off" />
  <textarea type="text" name="comment" id="comment" title="Comment" class="required-entry input-text" placeholder="Type your Message" style="resize: vertical;" min="10" rows="7" required="required"></textarea>
  <input type="submit" value="SEND" title="Submit" class="button" />
</form>

,

如果添加以下CSS规则，它将“动画化”进度。 （剩下的代码就是您所做的，没有任何更改）

::-webkit-progress-value {
  background-color: green;
}
::-moz-progress-bar {
  background-color: green;
}
::-ms-fill {
  background-color: green;
}
::-webkit-progress-value {
  transition: width 1s;
}

请参阅下面的演示，您可以详细了解here 

$("#contactForm input,#contactForm textarea").keyup(function() {
  
var numValid = 0;
$("#contactForm input[required],#contactForm textarea[required]").each(function() {
    if (this.validity.valid) {
        numValid++;
    }
});

var progress = $("#progress"),progressMessage = $("#progress-message");

if (numValid == 0) {
    progress.attr("value","0");
    progressMessage.text("This form,it wants you.");
}
if (numValid == 1) {
    progress.attr("value","20");
    progressMessage.text("There you go,great start!");
}
if (numValid == 2) {
    progress.attr("value","40");
    progressMessage.text("Nothing can stop you now.");
}
if (numValid == 3) {
    progress.attr("value","80");
    progressMessage.text("You're basically a hero,right?");
}
if (numValid == 4) {
    progress.attr("value","95");
    progressMessage.text("SO CLOSE. PRESS THE THING.");
}
  
});
progress {
width: 100%;
background: #333;
height: 20px;
border: 0;
}
#progress-message {
text-align: center;
}

::-webkit-progress-value {
  background-color: green;
}
::-moz-progress-bar {
  background-color: green;
}
::-ms-fill {
  background-color: green;
}
::-webkit-progress-value {
  transition: width 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<progress max="100" value="0" id="progress"></progress>
    <div class="progress-message" id="progress-message">This form,it wants you.</div>  
    <form action="MY ACTION" id="contactForm" method="post">
<input type="text" name="name" id="name" title="Name" value class="input-text reqyured-entry" placeholder="Your Name" required="required" autocomplete="off" />
<input type="email" name="email" id="email" title="Email" value class="input-text required-entry validate-email" placeholder="Email Address" required="required" pattern="^\S+@\S+\.\S+$" autocomplete="off" />
<input type="tel" name="telephone" id="telephone" title="Telephone" value class="input-text" placeholder="Telephone No" required="required" min="11" pattern="[0-9]*" autocomplete="off" />  
<textarea type="text" name="comment" id="comment" title="Comment" class="required-entry input-text" placeholder="Type your Message" style="resize: vertical;" min="10" rows="7" required="required"></textarea>
<input type="submit" value="SEND" title="Submit" class="button" />
</form>

cssjquery
本文链接：https://www.f2er.com/3166372.html

大家都在问