Question

所以我想为密码输入创建一个简单的动画进度条，我目前的问题是我不知道如何在我的代码中实现动画...我不知道jquery，所以我有使用CSS / JS / HTML5。感谢您的帮助，谢谢！

	var password = document.getElementById('input');
	var feedback = document.getElementById('output');
	var progress = document.getElementById('progress');

function checkLength() {
	var passwordValue = password.value;
	if (passwordValue.length === 0) {
		feedback.textContent = 'to short!';
		progress.value = 0;
	} else if (passwordValue.length === 1) {
		feedback.textContent = 'Poor';
		progress.value = 5;
	} else if (passwordValue.length === 2) {
		feedback.textContent = 'Poor';
		progress.value = 10;
	} else if (passwordValue.length === 3) {
		feedback.textContent = 'Poor';
		progress.value = 20;
	} else if (passwordValue.length === 4) {
		feedback.textContent = 'Better';
		progress.value = 30;
	} else if (passwordValue.length === 5) {
		feedback.textContent = 'Better';
		progress.value = 40;
	} else if (passwordValue.length === 6) {
		feedback.textContent = 'Good';
		progress.value = 50;
	} else if (passwordValue.length === 7) {
		feedback.textContent = 'Good';
		progress.value = 60;
	} else if (passwordValue.length === 8) {
		feedback.textContent = 'Really Good';
		progress.value = 70;
	} else if (passwordValue.length === 9) {
		feedback.textContent = 'Perfect';
		progress.value = 80;
	} else if (passwordValue.length >= 10) {
		feedback.textContent = 'Golden';
		progress.value = 100;
	}

}
	password.addEventListener('keyup', checkLength, false);

* {
	margin: auto;
	color: #000;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
}
#content {
	min-height: 990px;
}
input {
	margin-top: 30px;
	background-color: white;
}
#progress {
	width: 500px;
	box-shadow: 0px 18px 20px black;
	-webkit-appearance: none;
    -moz-appearance: none;
	appearance: none;
	border: none;
	background-color: #6F8D96
}
#progress::-webkit-progress-bar {
	background-color: #6F8D96;
	opacity: 0.7;
}
#progress::-webkit-progress-value {
	background-color: red;
}

#progress::-moz-progress-bar {
	background-color: red;
	opacity: 0.7;
}

#output {
	color: #fff;
}

<!DOCTYPE html>
<html>
    <head>
        <title>passwordChecker</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="cssjs/passwordChecker.css">
    </head>
    <body>
        <div id="bgimage">
            <div id="content">
                <div id="topimage"></div>
                <h1>enter ur password</h1>     
                <input id="input" type="password" placeholder="let's see...">
                <br><br>
                <progress class='' id='progress' value="0" max="100"></progress>
                <div id="output">Ready</div>
            </div>
        </div>
    </body>
</html>

Answer 1

这个css类应该有

带有显示块的div，顶部还有一个div，并更改

的宽度

div所以感觉就像一个进度条，添加动画

的css3动画

关于宽度变化

document.querySelector('.loading-bar').style.width = width + 'px';

.loading-container {
  width: 400px;
  height: 80px;
  background-color: yellow;
 }

.loading-bar {
   width: 0; // this should be incremented
   height: 80px;
   background-color: green;
   will-change: width;
   transition: width 200ms ease in;
 }

Answer 2

我建议你避免

#progress::-webkit-progress-bar

只需使用两个这样的div：

<div class="progress-wrapper">
 <div class="progress-wrapper__over"></div>
</div>

的风格可以是这样的：

.progress-wrapper{
 width: 200px;
 height: 40px;
 background-color: grey;
}
.progress-wrapper__over {
 width: 0;
 height: 40px;
 background-color: red;
 will-change: width;
 transition: width 100ms ease;
}

然后输入更改只需更改progress-wrapper__over

的宽度

提示而不是使用3000，如果只是使用一个开关:)和afterall我建议避免任何情况下你可以使用CSS处理javascript动画。

Answer 3

这可能不是你的问题的答案，我也不确定是否可以使用进度标记动画进度。但是肯定可以创建＆amp;使用div＆amp ;;为进度条设置动画。 span，可能是你不想用的。另外，我在你的一条评论中看到你想要学习新的东西，所以我修改了你的js。

var password,feedback;progress ="";
 function _checkLength(){
            var passwordValue = password.value.length;
            switch(passwordValue){
           case 0: _updateProgressBar("too short!",0);
           break;
           case 1: _updateProgressBar("Poor",5);
           break;
           case 2: _updateProgressBar("Poor",10);
           break;
           case 3: _updateProgressBar("Poor",20);
           break;
           case 4: _updateProgressBar("Better",30);
           break;
           case 5: _updateProgressBar("Better",40);
           break;
           case 6: _updateProgressBar("Good",60);
           break;
           case 7: _updateProgressBar("Good",70);
           break;
           case 8: _updateProgressBar("Really Good",80);
           break;
           case 9: _updateProgressBar("Perfect",90);
           break;
           case 10: _updateProgressBar("Golden",100);
           break;
          } 
        }
function _updateProgressBar(textContent,value){
     feedback.textContent =textContent;
        progress.value = value;
}


// This will through an Uncaught TypeError:Cannot read property "addEventListener" of null if this snippet is inside head tag. You can put this script inside body tag
    // password.addEventListener('keyup', _checkLength, false);

    // Else you can use DOMContentLoaded event to addEventListener to element

    document.addEventListener("DOMContentLoaded",function(event){
        password = document.getElementById('input');
        feedback = document.getElementById('output');
        progress = document.getElementById('progress');
        password.addEventListener('keyup', _checkLength, false);
        })

这是JSFIDDLE

如何创建进度条动画

3 个答案: