js自动登录提示信息和进度条显示

自动登录

css样式

<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background: aqua;
				display: none;
			}
		</style>

js

<script type="text/javascript">
			var oLabel = document.getElementsByTagName("label")[0];//获取label
			var oDiv = document.querySelectorAll("div")[0];//获取div
			oLabel.onmouseover = function(){//鼠标移入，显示提示
				oDiv.style.display = "block";
			}
			oLabel.onmouseout = function(){//鼠标移出，隐藏
				oDiv.style.display = "none";
			}
		</script>

文档

<!--自动登录友情提示-->
		<label ><input type="checkbox" />自动登录</label>
		<div>请不要在公众网络，或网吧使用</div>

进度条

方法一：一个进度条

<div class="outer">
			<div class="inner" ></div>
		</div>

js
//方法一，针对一个进度条写的

var oBox = document.querySelectorAll(".inner")[0];//获得是个伪数组，必须加[0]
		function foo(){
		var timer = setInterval(function(){
			//此种方法需要样式写在行内
			//oBox.style.width = parseInt(oBox.style.width) + 5 +"px";
			oBox.style.width = oBox.clientWidth + 5 +"px";
			console.log(oBox.style.width);
			if(parseInt(oBox.style.width) == 350){//这个值需要初值设置+5可以得到350，如果初值是1就满足不了要求
				clearInterval(timer);
			}
		},20);
		}
		foo();

方法二：多个进度条（推荐，函数）

<div class="outer">
			<div class="inner" ></div>
		</div>
		<div class="outer">
			<div class="inner" ></div>
		</div>
		<div class="outer">
			<div class="inner" ></div>
		</div>

js代码

var inner = document.querySelectorAll(".inner");
			function jdt(domobj,num){
				var count = 0;
				var timer = setInterval(function(){//设置定时器
					count++;
					domobj.style.width = count + "%";
					if(count == num){//百分比相等的时候清除
						clearInterval(timer);
					}
				},20)
			}
			jdt(inner[0],80);
			jdt(inner[1],50);
			jdt(inner[2],30);