WEB阶段_JS篇(附代码笔记)

【注意】:

demo1.css

h1{
	color:yellow;
	font-size: 80px;
}

check.js

//	alert("hello")
		function checkForm(){
			//获得文本框的值,通过标签的id	
			var username = document.getElementById("username").value;
	//				var val = username.value; //获得文本框的值,通过value是该标签的值,用链式表达式如上
	//				alert(username);
			if(username == ""){
				alert("用户名不能为空");
				return false;//表示form表单那里提交不了
			}
			
			// 校验密码:
			var password = document.getElementById("password").value;
			if(password == ""){
				alert("密码不能为空");
				return false;
			}
			
			// 校验确认密码:
			var repassword = document.getElementById("repassword").value;
			if(repassword != password){
				alert("两次密码输入不一致!");
				return false;
			}
			
			// 校验邮箱:
			var email = document.getElementById("email").value;//email代表输入的值
			// JS校验正则表达式就有两个方法:String对象中的match方法,一个是正则对象中的test方法.
			// str.match("正则表达式");  正则.test("字符串");
			
			//若email不等于/.../的内容,那么就是错误的
			if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){   //day08截图有解释,//表示开始和结束(作为字符串形式),^表示字符串开始位置,匹配字母数字_-任意个,匹配@符号....
				alert("邮箱格式不正确!");
				return false;
			}
			
		}

(一)、案例一:使用JS完成图片滚动效果

1、window对象的一个定时操作



	
		
		
		

	
	
	
			
		
	

2、案例一:使用JS完成图片滚动效果



	
		
		
		
		
		
		
	
	
	
		
		
热门商品
最新商品
关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明
Copyright © 2008-2030 老韩商城 版权所有

(二)、案例二:使用JS弹出广告

1、JS的BOM对象一

在打开新窗口时,name参数用于设置新窗口的名称。这个名称可以在后续的代码中被引用,以便对新窗口进行操作。通过设置一个特定的名称,可以确保新窗口被唯一标识,以方便其他代码对其进行控制或操作。对于指定name为“百度”,则表示新窗口的名称为“百度”,其他代码可以使用这个名称来引用或操作该窗口。



	
		
		
		
	
	
		02-HTML
链接

2、JS的BOM对象二



	
		
		
		
		
		
	
	
		03-HTML(处于中间的页面)
		链接
		

3、JS的BOM对象三

 



	
		
		
		
		
		
	
	
		04-HTML
		
	

4、案例二:使用JS定时弹出广告

或使用window.setTimeout("show()",5000);与window.setTimeout("hide()",5000);也可以!



	
		
		
		
		
		
		
	
	
	
		
		
热门商品
最新商品
关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明
Copyright © 2008-2030 老韩商城 版权所有

(三)、使用JS完成表单的提示和校验

1、使用JS完成注册页面的提示和校验



	
		
		注册页面
		
		
		
		
	
		
	
	
	
		
		
		
  • 首页
  • 首页
  • 首页
  • 首页
用户名
密码
确认密码
性别
籍贯
爱好 篮球 足球 排球 羽毛球 蛋球
邮箱

(四)、使用JS完成表格的隔行换色

1、data



	
		
		
		
		
	
	
		
分类的ID 分类的名称 分类的描述 操作
1 手机数码 手机数码 修改|删除
2 电脑办公 电脑办公 修改|删除
3 烟酒糖茶 烟酒糖茶 修改|删除
4 衣服包包 烟酒糖茶 修改|删除
5 汽车用品 烟酒糖茶 修改|删除

2、left



	
		
		
	
	
		
		

分类管理

商品管理

订单管理

3、right

 



	
		
		
	
	
		

欢迎,欢迎,热烈欢迎~!

4、top

 <是小于;>是大于



	
		
	
	
		

欢迎来到黑马商城

数据 a < 6 数据 a › 10

5、案例四:网站后台页面的显示



	
		
		
	
	
	
		
		
		
		
			
			
			
			
		
	

(五)、使用JS完成复选框的全选和全不选

1、data



	
		
		
		
		
	
	
		
分类的ID 分类的名称 分类的描述 操作
1 手机数码 手机数码 修改|删除
2 电脑办公 电脑办公 修改|删除
3 烟酒糖茶 烟酒糖茶 修改|删除
4 衣服包包 烟酒糖茶 修改|删除
5 汽车用品 烟酒糖茶 修改|删除

2、left



	
		
		
	
	
		
		

分类管理

商品管理

订单管理

3、right



	
		
		
	
	
		

欢迎,欢迎,热烈欢迎~!

4、top



	
		
	
	
		

欢迎来到黑马商城

数据 a < 6 数据 a › 10

5、案例五:网站的后台页面的显示



	
		
		
	
	
	
		
		
		
		
			
			
			
			
		
	

(六)、使用JS完成省市二级联动效果

1、DOM对象的操作一

创标签-创文本-文本如标签-标签再入标签



	
		
		
			

	
	
		
		
		
  • 上海
  • 北京

2、JS的全局函数

这段代码是将给定的URL字符串进行编码,返回编码后的结果。编码是指将URL中的特殊字符转换为表示该字符的十六进制ASCII码,并在其前面加上"%"符号。encodeURI()函数只对URL中的非字母数字字符进行编码,而不会对整个URL进行编码。



	
		
		
		
	
	
	

3、案例六:使用JS完成省市的二级联动的效果



	
		
		注册页面
		
		
		
		
	
		
	
	
	
		
		
		
  • 首页
  • 首页
  • 首页
  • 首页
用户名
密码
确认密码
性别
籍贯
爱好 篮球 足球 排球 羽毛球 蛋球
邮箱

你可能感兴趣的:(Java-WEB阶段,javascript,前端,笔记)