05 js的应用

1.验证码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
		1. 用户在输入框中输入的内容如果正好是验证码的计算结果
		点击登录就能弹出登录成功的对话框
		不然就登录失败
		
		2. 点击验证码, 要可以更换
		数字 [0 , 9]
		符号: + - * 
	-->
	<body>
		
		请输入验证码: <input id="codeInput" type="text" />
		<span id="span1" title="点我换一张" onclick="getCode()"></span><br />
		<input type="button" value="登录" onclick="check()" />
		
		<script type="text/javascript">
			
			getCode();
			
			// 检查验证码是否输入正确
			function check(){
				// 先拿span1内部的验证码表达式
				var span1 = document.getElementById("span1");
				var exp = span1.innerText;	// 1 + 1 = ?
				// 1 + 1
				var answer = eval(exp.substring(0, exp.length - 4));

				// 拿出用户输入在input中的值
				var codeInput = document.getElementById("codeInput");
				var inputValue = codeInput.value;
				//进行比较
				if(inputValue == answer){
					alert("恭喜你答对了!登陆成功!");
				}else{
					alert("答错了! 登录失败！");
					//再次生成随机表达式
					getCode();
				}
		
				
			}
			
			//函数:生成表达式
			function getCode(){
				
				var num1 = getRandomInt(0, 10);
				var num2 = getRandomInt(0, 10);
				var optArr = [" + ", " - ", " * "];
				var optIndex = getRandomInt(0, 3);
				
				var exp = num1 + optArr[optIndex] + num2 + " = ?";
				
				var span1 = document.getElementById("span1");
				span1.innerText = exp;
				
			}
			//生成范围随机数
			function getRandomInt(start, end){
				
				var a = Math.random();	// [0, 1)
				var b = a * (end - start);//随机数的范围
				var c = b + start;//随机数的范围加上起始值
				var d = Math.floor(c);//向下取整
				return d;
			}
			
			
		</script>
	</body>
</html>

2.有提示的输入框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
		一开始显示的是 请输入用户名
		当这个控件获得焦点后, 如果内容是 请输入用户名, 就自动清空内容
			如果里面是别的内容, 不允许清空
		
		失去焦点时, 如果内容是空, 则显示 请输入用户名
	-->
	<body>
		
		用户名:<input id="uname" type="text" value="请输入用户名" onfocus="inputFocus()" onblur="inputBlur()" onchange="change()"/>
		
		
		<script type="text/javascript">
			
			function inputFocus(){
				var uname = document.getElementById("uname");
				var unameValue = uname.value;

				if(unameValue == "请输入用户名"){
					uname.value = "";
				}

			}
			
			function inputBlur(){
				var uname = document.getElementById("uname");
				var unameValue = uname.value;
				
				if(unameValue.length == 0){
					uname.value = "请输入用户名";
				}
				
			}
			
			
			function change(){
				alert("改变!");
			}
			
		</script>
		
	</body>
</html>

3.鼠标事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			#div1{
				height: 300px;
				width: 300px;
				border: 1px solid black;
				margin: 100px;
			}
			
		</style>
		
	</head>
	<body>
		<!--
			只有当鼠标按下的时候, 才会在div内部显示实时坐标
			鼠标一旦弹起, 就不会再改变div内部显示的坐标值
		-->
		<div id="div1" onmousemove="test()" onmousedown="down()" onmouseup="up()">
			
		</div>
		
		<script type="text/javascript">
			
			var isDown = false;

			function down(){
				isDown = true;
			}
			
			function up(){
				isDown = false;
			}

			function test(){
				if(isDown){
					var x = event.clientX;
					var y = event.clientY;
				
					var div1 = document.getElementById("div1");
					div1.innerText = "x = " + x + " y = " + y;
				}
			}

		</script>
	</body>
</html>

4.拖动移动div位置

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div2 {
				width: 300px;
				height: 300px;
				background-color: red;
			}
		</style>
	</head>

	<body>
		<div id="div2" onmouseup="ou()" onmousedown="od()" onmousemove="om()"  style="position: absolute;left: 50px;top:50px">

		</div>
		<script type="text/javascript">
			//把div对象作为一个全局变量
			var divn = document.getElementById("div2");
			//设置标志位,根据标志位决定是否拖动div
			var istrue = false;
			//一开始的盒子左上角位置
			var downx;
			var downy;
			//一开始的鼠标位置
			var downmousex;
			var downmousey;
			function ou() {
				//鼠标放起时标志位设为false,无法拖动
				istrue=false;
			}
			function od() {
				
				istrue = true;
				//鼠标按下时记录div的位置和鼠标按下的位置,dom对象的css属性left,top带px,用parseFloat去除px
				downx = parseFloat(divn.style.left);
				downy = parseFloat(divn.style.top);
				downmousex = event.clientX;
				downmousey = event.clientY;
			}
			function om() {
				//鼠标按下时,执行移动
				if(istrue){
				//目前鼠标的位置
				var movex = event.clientX;
				var movey = event.clientY;
				//鼠标位置相对于原点的偏移量
				var x=downmousex-downx;
				var y=downmousey-downy;
				//用当前鼠标位置减去偏移量得出当前的原点位置,并赋值给dom对象的css属性,后面加上px
				divn.style.left=movex-x+"px";
				divn.style.top=movey-y+"px";
				divn.innerHTML="相对div的位置 x="+x+"|"+"y="+y;
				divn.innerHTML+="<br/>相对整个页面的位置 x="+movex+"|"+"y="+movey;
				}
			}
		</script>
	</body>

</html>

5.密码强度检查

<!DOCTYPE html>
<html>
	<!--
		
		需求:
		用户一边在密码框输入, 一边计算用户现有密码的强度
		
		强度计算方式
		数字 小写 大小 其他字符 长度超过6
		这5个各有1分
		过弱: 1
		弱: 2
		中等: 3
		强: 4
		完善: 5
	-->
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			div{
				height: 30px;
				color: white;
				text-align: center;
				line-height: 30px;
				margin: 5px;
			}
			
			#div1{
				background-image: url(img/1.png);
				width: 50px;
			}
			
			#div2{
				background-image: url(img/2.png);
				width: 100px;
			}
			
			#div3{
				background-image: url(img/3.png);
				width: 150px;
			}
			
			#div4{
				background-image: url(img/4.png);
				width: 200px;
			}
			
			#div5{
				background-image: url(img/5.png);
				width: 250px;
			}
			
			
		</style>
	</head>
	<body>
		密码: <input id="upwd" type="text" onkeyup="check()" /><br />
		<div id="div1">过弱</div>
		<div id="div2">弱</div>
		<div id="div3">中</div>
		<div id="div4">强</div>
		<div id="div5">完善</div>
		
		<script type="text/javascript">

			hideAll();

			function check(){
				var upwdValue = document.getElementById("upwd").value;
				
				var lower = 0;
				var upper = 0;
				var num = 0;
				var other = 0;
				var len = upwdValue.length > 5 ? 1 : 0;
				
				for(var i = 0; i < upwdValue.length ; i ++){
					var c = upwdValue.charAt(i);
					if(c >= 'a' && c <= 'z'){
						lower = 1;
					}else if(c >= 'A' && c <= 'Z'){
						upper = 1;
					}else if(c >= '0' && c <= '9'){
						num = 1;
					}else{
						other = 1;
					}
				}
				
				var score = lower + upper + num + other + len;
				
				showPwdPower(score);
				
			}
			
			function showPwdPower(score){
				hideAll();
				var div = document.getElementById("div" + score);
				div.style.display = "block";
			}
			
			function hideAll(){
				
				for(var i = 1; i <= 5; i++){
					//var div = document.getElementById("div" + i);
					var div = eval("document.all.div" + i);
					div.style.display = "none";
				}
				
			}

		</script>
	</body>
</html>

6.用户名合法性检查

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			在用户输入用户名的同时, 检查用户名的合法性
			如果小于6位, 则在span中用红色字体显示, 用户名不能小于6位
			如果大于12位, 则在span中用红色字体显示, 用户名不能大于12位
			如果长度准确, 用绿色字体提示用户名正确
		-->
		用户名: <input id="uname" type="text" onkeyup="check()"/>
		<span id="span1">
			
		</span>
		
		<script type="text/javascript">
			
			function check(){
				var uname = document.all.uname;
				var span1 = document.all.span1;
				
				if(uname.value.length < 6){
					span1.innerText = "用户名不能小于6位";
					span1.style.color = "red";
				}else if(uname.value.length > 12){
					span1.innerText = "用户名不能在于12位";
					span1.style.color = "red";
				} else {
					span1.innerText = "用户名正确";
					span1.style.color = "green";
				}
				
				
			}
		</script>
	</body>
</html>

7.按钮效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			当鼠标移入图片时, 显示图片位 bt_login2.png
			当鼠标移出图片时, 显示图片位 bt_login1.png
		-->
		<img id="btn_login" src="img/bt_login1.png" onmouseover="mousein()" onmouseout="mouseout()"/>

		<script type="text/javascript">
			
			
			function mousein(){
				document.all.btn_login.src = "img/bt_login2.png";
			}
			
			function mouseout(){
				document.all.btn_login.src = "img/bt_login1.png";
			}
		</script>
	</body>
</html>

8.图片翻页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			完成2个按钮的功能, prod1.jpg - prod10.jpg的切换
			如果已经在第一张, 点上一张, 则弹出对话显示 已是第一页
			如果已经在最后一张, 点下一张, 则弹出对话框 显示已是最后一页!
		-->
		<img id="img1" src="img/prod1.jpg"/>
		
		<br /><br />
		<input type="button" value="上一张" onclick="prePage()" />
		<input type="button" value="下一张" onclick="nextPage()"/>
		
		<script type="text/javascript">
			
			var current = 1;
			
			function prePage(){
				if(current > 1){
					var img1 = document.getElementById("img1");
					current --;
					img1.src = "img/prod" + current + ".jpg";
				} else {
					alert("已经是第一页!");
				}
			}
			
			function nextPage(){
				if(current < 10){
					var img1 = document.getElementById("img1");
					current ++;
					img1.src = "img/prod" + current + ".jpg";
				}else{
					alert("已经是最后一页!");
				}
				
			}
			
		</script>
	</body>
</html>

9.this的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #cfc;
				height: 50px;
				width: 120px;
				text-align: center;
				line-height: 50px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="div1" onmouseover="mousein(this)" onmouseout="mouseout(this)">首页</div>
		<div id="div2" onmouseover="mousein(this)" onmouseout="mouseout(this)">学校介绍</div>
		<div id="div3" onmouseover="mousein(this)" onmouseout="mouseout(this)">课程介绍</div>
		<div id="div4" onmouseover="mousein(this)" onmouseout="mouseout(this)">讲师介绍</div>
		<div id="div5" onmouseover="mousein(this)" onmouseout="mouseout(this)">联系我们</div>
		
		<script type="text/javascript">
			function mousein(div){
				div.style.backgroundColor = "#fcc";
			}
			function mouseout(div){
				div.style.backgroundColor = "#cfc";
			}
		</script>
	</body>
</html>

猜你喜欢