html5表单注册进度条提示效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5表单注册进度条提示效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>html5表单注册进度条提示效果</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fort.css">
<style>
.top-banner {
	background-color: #333;
}
.nav {
	margin-bottom: 30px;
}
.nav li.current a{
	background-color: #009DFF;
	color: #fff;
	padding: 10px;
}
.nav a {
	margin: 5px;	
	color: #333;
	text-decoration: none;
}
</style>
<script src="fort.js"></script>
</head>
<body>
<div class="form-wrapper">
	<div class="top"><div class="colors"></div></div>
	<div class="nav">
		<ul>
			<li class="current"><a href="default/index.html">效果一</a></li>
			<li><a href="flash/index.html">效果二</a></li>
			<li><a href="gradient/index.html">效果三</a></li>
			<li><a href="sections/index.html">效果四</a></li>
		</ul>
	</div>
	<form name="form" action="#">
		<div class="form">
			<div class="form-item">
				<input type="text" name="text" required="required" placeholder="昵称" autocomplete="off">
			</div>
			<div class="form-item">
				<input type="text" name="text" required="required" placeholder="用户名" autocomplete="off">
			</div>
			<div class="form-item">
				<input type="password" name="password" required="required" placeholder="密码" autocomplete="off">
			</div>
			<div class="button-panel">
				<input type="submit" class="button" title="Sign In" value="注册">
			</div>
		</div>
	</form>
</div>
<div class="footer-banner" style="width:728px; margin:200px auto 0"></div>
<script>
    solid();
</script>
</body>
</html>

JS代码(fort.js):

function solid(){
	function cback(e){
	var t = [];
	for (var n = inputs.length;
	n--;
	){
	if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
	var i = inputs.length;
	var s = document.querySelectorAll(".top");
	for (var o = s.length;
	o--;
	){
	s[o].style.width = 100 - r / i * 100 + "%";
}
}
var forms = document.querySelectorAll(".form"),inputs = [];
	for (var i = forms.length;
	i--;
	){
	var els = forms[i].querySelectorAll("input,textarea,select");
	for (var j = els.length;
	j--;
	){
	if (els[j].type != "button" && els[j].type != "submit"){
	inputs.push(els[j]);
	els[j].addEventListener("input",cback,false);
}
}
}
}
function flash(){
	function cback(e){
	var t = [];
	for (var n = inputs.length;
	n--;
	){
	if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
	var i = inputs.length;
	var s = document.querySelectorAll(".top");
	for (var o = s.length;
	o--;
	){
	s[o].style.width = 100 - r / i * 100 + "%";
	s[o].style.background = cols[i-r-1];
}
}
var forms = document.querySelectorAll(".form"),inputs = [];
	for (var i = forms.length;
	i--;
	){
	var els = forms[i].querySelectorAll("input,textarea,select");
	for (var j = els.length;
	j--;
	){
	if (els[j].type != "button" && els[j].type != "submit"){
	inputs.push(els[j]);
	els[j].addEventListener("input",cback,false);
}
}
}
var cols = ["#1ABC9C","#EC7063","#3498DB"];
}
function gradient(){
	function cback(e){
	var t = [];
	for (var n = inputs.length;
	n--;
	){
	if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
	var i = inputs.length;
	var s = document.querySelectorAll(".top");
	for (var o = s.length;
	o--;
	){
	s[o].style.width = 100 - r / i * 100 + "%";
}
}
var forms = document.querySelectorAll(".form"),inputs = [];
	for (var i = forms.length;
	i--;
	){
	var els = forms[i].querySelectorAll("input,textarea,select");
	for (var j = els.length;
	j--;
	){
	if (els[j].type != "button" && els[j].type != "submit"){
	inputs.push(els[j]);
	els[j].addEventListener("input",cback,false);
}
}
}
}
function sections(){
	function cback(e){
	var t = [];
	for (var n = inputs.length;
	n--;
	){
	if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
	var i = inputs.length;
	var s = document.querySelectorAll(".top");
	for (var o = s.length;
	o--;
	){
	s[o].style.width = 100 - r / i * 100 + "%";
}
}
var forms = document.querySelectorAll(".form"),inputs = [];
	for (var i = forms.length;
	i--;
	){
	var els = forms[i].querySelectorAll("input,textarea,select");
	for (var j = els.length;
	j--;
	){
	if (els[j].type != "button" && els[j].type != "submit"){
	inputs.push(els[j]);
	els[j].addEventListener("input",cback,false);
}
}
}
function generateCSSGradient(colours){
	var l = colours.length,i;
	for( i=0;
	i<l;
	i++) colours[i] = colours[i].join(" ");
	return "linear-gradient( to right,"+colours.join(",")+")";
}
//Edit your colors here. Enter the color twice.var cols = [["#1ABC9C","0%"],["#1ABC9C","33.3%"],["#EC7063","33.3%"],["#EC7063","66.6%"],["#3498DB","66.6%"],["#3498DB","100%"]];
	document.getElementsByClassName('top').innerHTML = '<div class="colors"></div>';
	document.querySelector(".colors").style.background = generateCSSGradient(cols);
	var window_width = window.innerWidth + "px";
	document.querySelector(".colors").style.width = window_width;
}
;

CSS代码(fort.css):

.top{background:#009dff;/*background:linear-gradient(to right,#009dff 0,#00c8ff 100%);*/
 position:fixed;z-index:1031;top:0;left:0;height:4px;transition:all 1s;width:0;overflow:hidden;}
.colors{width:100%;height:4px;}

CSS代码(style.css):

*{margin:0;padding:0;box-sizing:border-box;}
body{text-align:center;background:#fff;color:#7b8993;font:300 87.5%/1.5em 'Open Sans',sans-serif;}
.form-wrapper{padding-top:10%;border-radius:2px;margin:50px auto;position:relative;width:375px;}
form{padding:30px 20px 0;}
.form-item{margin-bottom:10px;width:100%;}
.form-item input{border:1px solid #ccc;border-radius:2px;color:#000;font-family:'Open Sans',sans-serif;font-size:1em;height:50px;padding:0 16px;transition:background 0.3s ease-in-out;width:100%;}
.form-item input:focus{outline:none;border-color:#9ecaed;box-shadow:0 0 10px #9ecaed;}
.button-panel{margin:20px 0 0;width:100%;}
.button-panel .button{-webkit-appearance:none;background:#009dff;border:none;border-radius:2px;color:#fff;cursor:pointer;height:50px;font-family:'Open Sans',sans-serif;font-size:1.2em;letter-spacing:0.05em;text-align:center;text-transform:uppercase;transition:background 0.3s ease-in-out;width:100%;}
.button:hover{background:#00c8ff;}
@media only screenand (max-width:320px){.form-wrapper{padding-top:10%;border-radius:2px;margin:50px auto;position:relative;width:320px;}
}
.cent{text-align:center;color:#000;}
.view{text-align:center;text-decoration:none;color:#7b8993;padding-top:10px;}
#ref{text-align:center;text-decoration:underline;color:#7b8993;padding-top:8px;font-size:16px;}
#ref:hover{text-align:center;color:#009dff;text-decoration:underline;-webkit-animation:hue 60s infinite linear;padding-top:8px;font-size:16px;}
ul li{display:inline-block;list-style-type:none;text-align:center;}
.h1h{color:#000;text-align:center;}
.lil{display:inline-block;}

附件:下载该文件资源,减少时间成本(增值服务)