2021年4月27日

正则表达式-邮箱提取

摘要: 邮箱提取 - 题目描述 将字符串'小明:大神么么哒,正好是我想要的,我的邮箱是xiaoming@qq.com小红:我老公最爱看这个了,我想给他一个惊喜,么么么哒,邮箱是xiaohong@sina.com我:好人一生平安,邮箱是wuyou@163.com'中所有的邮箱号码提取出来 - 训练目标 正则表 阅读全文

posted @ 2021-04-27 20:09 前端码牛 阅读(868) 评论(0) 推荐(0)

箭头函数面试题

摘要: 1 <script type="text/javascript"> 2 3 var age = 100; 4 5 var obj = { 6 age: 20, 7 say: () => { 8 alert(this.age) 9 } 10 } 11 12 obj.say(); 13 </script 阅读全文

posted @ 2021-04-27 19:54 前端码牛 阅读(245) 评论(0) 推荐(0)

理解闭包-看代码说结果

摘要: 1 console.log('start'); 2 setTimeout(function () { 3 console.log('你猜我输出在哪'); 4 }, 0); 5 console.log('end'); 6 for (var i = 0; i < 10; i++) { 7 console 阅读全文

posted @ 2021-04-27 19:45 前端码牛 阅读(63) 评论(0) 推荐(0)

理解闭包-点赞案例

摘要: 理解闭包-点赞案例 题目描述 使用闭包实现点击每个按钮,按钮中的数字都是单独递增的,互不影响 - 训练目标 能够理解闭包 - 训练提示 结构中有四个按钮分别绑定点击事件 点击事件触发一个函数 是修改按钮中文字大数值 使用闭包实现数字的递增 阅读全文

posted @ 2021-04-27 19:43 前端码牛 阅读(82) 评论(0) 推荐(0)

闭包的使用-生成多个相同的随机数

摘要: 生成多个相同的随机数 - 题目描述 写一个函数 生成一个随机数,每次调用函数都返回第一次生成的随机数 - 训练目标 闭包的使用 - 训练提示 1. 创建一个函数 2. 函数内部随机生成一个随机数 3. 使用闭包延长生成的随机数的作用范围 阅读全文

posted @ 2021-04-27 19:42 前端码牛 阅读(218) 评论(0) 推荐(0)

实时匹配模糊查询商品

摘要: 修改课堂案例查询商品 - 题目描述 当输入框输入文字进行实时匹配(模糊查询) - 训练目标 理解属性的高级方法 - 训练提示 1. 当用户输入一个'小' 字,筛选的结果小米就显示在表格中,不需要点击查询按钮 2. 使用表单事件 3. ​重点是检测输入框的值和数据中的值是否存在包含的关系 阅读全文

posted @ 2021-04-27 19:38 前端码牛 阅读(334) 评论(0) 推荐(0)

面向对象版TAB栏

摘要: 面向对象版的tab栏 功能要点: 1.点击添加按钮可以增加一个新标签和内容; 2.点击Tab标签上的删除按钮可以删除对应的标签和内容; 3.点击Tab可以切换Tab栏 4.双击Tab名称和内容可以变成输入框,失去焦点和回车可以改变对应内容。 页面结构: <!DOCTYPE html> <html l 阅读全文

posted @ 2021-04-27 19:29 前端码牛 阅读(167) 评论(0) 推荐(0)

添加表格内容

摘要: 添加表格内容(加强训练) - 题目描述 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示,具体表现如下图: 1)如果如果输入框内容有一项为空,弹出对话框‘请将数据填入完全 2)页面见素材 - 训练目标 能够创建和添加节点 - 训练提示 1.按钮注册单击事件 2.获取并判断文本框的内容 阅读全文

posted @ 2021-04-27 19:14 前端码牛 阅读(316) 评论(0) 推荐(0)

时钟倒计时

摘要: 页面电子时钟(加强训练) - 题目描述 页面上有一个电子时钟,显示当前的年月日,时分秒,要求自动变化,具体表现如下图: 1)要求双位显示,例如:九点九分九秒,显示为09:09:09 - 训练目标 能够使用定时器。 - 训练提示 1.开启定时器,每隔1秒执行1次回调函数 2.回调函数中,使用Date对 阅读全文

posted @ 2021-04-27 19:09 前端码牛 阅读(434) 评论(0) 推荐(0)

tab栏切换

摘要: tab栏切换 阅读全文

posted @ 2021-04-27 18:56 前端码牛 阅读(28) 评论(0) 推荐(0)

执行队列

摘要: 执行队列 阅读全文

posted @ 2021-04-27 18:55 前端码牛 阅读(30) 评论(0) 推荐(0)

插件轮播图

摘要: 插件轮播图 多找几个轮播图插件 bootstrap轮播图插件 阅读全文

posted @ 2021-04-27 18:53 前端码牛 阅读(26) 评论(0) 推荐(0)

筋斗云导航栏

摘要: 筋斗云导航栏 筋头云案例 - 题目描述 把课上的筋头云案例写一遍 - 训练目标 能够会使用动画函数书写返回筋头云案例 - 训练提示 1. 利用动画函数做动画效果 2. 原先筋斗云的起始位置是0 3. 鼠标经过某个小li,把当前小li的offsetLeft 位置做为目标值即可 4. 鼠标离开某个小li 阅读全文

posted @ 2021-04-27 18:50 前端码牛 阅读(84) 评论(0) 推荐(0)

本地存储

摘要: 本地存储:Cookie、localStorage、sessionStorage 项目 Cookie localStorage sessionStorage 容量 <4KB (URL的大小决定了Cookie不会太大) <20MB <5MB 传递方式 数据始终在同源的http请求中携带(即使不需要),即 阅读全文

posted @ 2021-04-27 18:49 前端码牛 阅读(156) 评论(0) 推荐(0)

轮播图

摘要: 轮播图 1、网页轮播图 - 题目描述 把课上的网页轮播图写一遍 - 训练目标 能够独立完成网页轮播图案例,会使用动画函数 - 训练提示 ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 ​ 3.图片播放的同时,下面小圆 阅读全文

posted @ 2021-04-27 18:48 前端码牛 阅读(475) 评论(0) 推荐(0)

移动端拖动元素

摘要: 移动端拖动元素 移动端拖动元素 - 题目描述 把课上的移动端拖动元素案例写一遍 - 训练目标 能够会使用touch事件书写移动端拖动元素案例 - 训练提示 1. touchstart、touchmove、touchend可以实现拖动元素 2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targ 阅读全文

posted @ 2021-04-27 18:44 前端码牛 阅读(102) 评论(0) 推荐(0)

动画函数封装

摘要: 封装简单动画函数 - 题目描述 把课上的封装动画函数写一遍 - 训练目标 能够理解动画函数的封装步骤 - 训练提示 1. 获得盒子当前位置 2. 让盒子在当前位置加上1个移动距离 3. 利用定时器不断重复这个操作 4. 加一个结束定时器的条件 5. 注意此元素需要添加定位,才能使用element.s 阅读全文

posted @ 2021-04-27 18:41 前端码牛 阅读(57) 评论(0) 推荐(0)

拖动的模态框

摘要: 模态框拖拽 - 题目描述 把今天课上讲的模态框拖拽写一遍 - 训练目标 能够独自完成模态框拖拽的制作 - 训练提示 1.点击弹出层,会弹出模态框, 并且显示灰色半透明的遮挡层。 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页 阅读全文

posted @ 2021-04-27 18:39 前端码牛 阅读(96) 评论(0) 推荐(0)

侧边栏

摘要: 仿淘宝固定右侧侧边栏 - 题目描述 把课上的仿淘宝固定右侧侧边栏写一遍 - 训练目标 能够独立完成仿淘宝固定右侧侧边栏案例 - 训练提示 1. 原先侧边栏是绝对定位 2. 当页面滚动到一定位置,侧边栏改为固定定位 3. 页面继续滚动,会让 返回顶部显示出来 1、返回顶部 - 题目描述 把课上的返回顶 阅读全文

posted @ 2021-04-27 17:54 前端码牛 阅读(583) 评论(0) 推荐(0)

隔行变色

摘要: 隔行变色 阅读全文

posted @ 2021-04-27 17:52 前端码牛 阅读(26) 评论(0) 推荐(0)

导航