一.封装格式化日期
功能思路分析:
\1. 第一个参数format表示指定的时间格式
\2. 第二个参数date为指定的时间(可以不传,默认当前时间)
\3. 获取第二个参数中指定时间的年月日时分秒
\4. 将format中的格式利用replace()方法替换
#二.表单验证
效果图:
功能思路分析:
1. 面向对象框架
2. 用户名验证
\6. 给用户名文本框绑定失去焦点事件(blur)
\7. 编写手机号正则和邮箱正则
\8. 验证文本框的内容是否符合手机号正则或邮箱正则
\9. 验证通过返回true,并且隐藏错误提示
\10. 验证失败返回false,并且显示错误提示
3. 密码验证
\6. 给密码文本框绑定失去焦点事件(blur)
\7. 编写非纯数字和非纯字母正则
\8. 验证文本框的内容是否符合非纯数字并且和纯字母正则,并且长度3-6
\9. 验证通过返回true,并且隐藏错误提示
10. 验证失败返回false,并且显示错误提示
4. 验证码验证
\4. 给验证码文本框绑定失去焦点事件(blur)
\5. 判断文本框里的内容是否与验证码盒子中的内容一致
\6. 验证通过返回true,并且隐藏错误提示
\7. 验证失败返回false,并且显示错误提示
5. 切换验证码
\2. 封装一个获取随机验证码的方法
\3. 给换一换按钮绑定点击事件(click),调用随机验证码方法
6. 登录验证
\2. 给登录按钮绑定点击事件
\3. 调用用户名、密码和验证码的失去焦点事件,当他们返回值都为真是,跳转页面(location.href),并将用户信息传递过去
7. 地址栏参数解析
\1. 拿到地址栏信息 location.search.slice(1)
\2. 前后拼接**{" "}**
\3. = 替换成 ":"
\4. & 替换成 ","
\5. JSON.parse()
#三.今日小结
1.利用正则替换字符: replace()
2.三元运算符设置默认参数
3.手机号正则:/^1[3-9]\d{9}$/
4.邮箱正则:/\w+@\w+.(com|cn|net)/
5.地址栏相关信息: location.href location.search
6.将json字符串解析成对象: JSON.parse()
#四.作业 -- 面向对象轮播
效果图:
功能思路分析:
1. 封装一个公共的切换方法
\1. 设置一个初始下标
\2. 通过classList切换选中项高亮效果
\3. 找到存放内容的大盒子,修改它的top值
2. 左侧菜单切换
\1. 通过事件委托给左侧菜单绑定点击事件
\2. 修改初始下标为当前选中项下标
\3. 调用切换方法
3. 自动轮播
\1. 设置间歇调用定时器(setInterval())
\2. 初始下标++ ,判断是否到最后一张
3.调用切换方法
4. 滑入暂停自动轮播
\1. 给大盒子绑定滑过事件(mouseover)
\2. 鼠标滑过清除定时器(clearInterval())
5. 滑出继续自动轮播
\1. 给大盒子绑定滑出事件(mouseout)
\2. 调用自动轮播方法