随笔分类 - 案例
javascript、css、HTML案例
摘要：基于JavaScript以及canvas实现输入颜色预览以及背景颜色变为输入颜色值的效果。 输入框中默认值为黑色，下方画布显示该颜色。通过输入新的颜色值后，点击【显示颜色】按钮，画布中的二维正方形显示对应的颜色。点击【设为背景颜色】按钮，整个页面背景颜色均采用该颜色。 <!DOCTYPE html>
阅读全文
摘要：javascript基础综合练习：从字符串中提取数字内容。已知字符串str的内容为数字、字母和特殊符号的组合。利用学习的js处理字符串的方法，将其中的数字内容以数组的形式提取出来。譬如字符串"ae33tyt99htr47"提取数字内容[33,99,47]。试试同时提取出字符串中的非数字内容吧。 参考
阅读全文
摘要：案例：简易的Div拖拽 鼠标移入Div区域后，按下鼠标左键，可以拖动Div移动;松开鼠标左键，Div拖动停止。同时要求Div不能拖出屏幕显示区域外。 拖拽原理：距离不变、三个事件(onmousedown、onmousemove、onmouseup) 解决问题： 1、拖拽过程中，鼠标容易滑出Div区块
阅读全文
摘要：贪吃蛇是一款80后、90后比较熟悉的经典游戏，下面通过简单的JS代码来实现低仿版贪吃蛇效果：随着鼠标的移动，在页面中呈现所有Div块跟随鼠标依次移动，效果如下图所示。 参考代码： 思考：为什么采用下面递增循环代码就无法达到预期效果？ 代码： 效果： 如果递增循环设计进行修改后，可以实现其它独特效果：
阅读全文
摘要：默认状态下，灰色面板出现。当点击页面按钮以及灰色面板外区域时，面板消失;点击按钮，灰色面板出现;点击灰色面板区域，面板不能消失。 主要考察：事件冒泡与取消事件冒泡。 代码： 参考代码：
阅读全文
摘要：要求：点击页面鼠标右键，阻止默认右键菜单的弹出，并弹出自定义右键菜单。 效果示例： 参考代码：
阅读全文
摘要：3-3 编程练习 完善下面的代码，在input框中输入内容的时候同样显示在下面的p标签中 任务 1、选中input元素 2、使用键盘事件，将input框中的内容添加到p标签中 任务提示 val()方法返回或者设置被选元素的值，获取输入框中的内容可以使用val() 参考代码 $($).ready(fu
阅读全文
摘要：6-4 编程练习 结合所学的jQuery过滤器知识，实现如下图所示的隔行换色效果 任务 使用jQuery的.css()方法设置样式，语法css('属性 '属性值') 使用:odd和:even过滤器实现效果 参考代码：
阅读全文
摘要：4-6 编程练习 结合所学的兄弟选择器" ~ "，实现如下图所示效果： 任务 (1)使用兄弟选择器" ~ "将技术语言的背景色变成红色 (2)使用jQuery的.css()方法设置样式，语法css('属性 '属性值') 参考代码：
阅读全文
摘要：4-2 编程练习 结合所学的祖先后代选择器，实现如下图所示效果 任务 (1)使用祖先后代选择器将第二段文字背景色变成红色 (2)使用jQuery的.css()方法设置样式，语法css('属性 '属性值') 参考代码：
阅读全文
摘要：2-5 编程练习 请请使用*选择器将div标签中的字体颜色变成红色 效果图： 任务 （1）使用通配符选择器 （2）使用jQuery的.css()方法设置样式，语法css('属性 '属性值') 参考代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta
阅读全文
摘要：3-5 编程练习：jQuery实现简单的图片对应展示效果 通过这个章节的学习， 老师带领大家完成了一个基本的图片切换特效，接下来，我们也实现一个类似的效果，点击相应的按钮，切换对应的图片。 效果图 : 任务 1、首先建立一个就绪函数ready函数，把所有的jQuery内容都写到这个函数中。 2、选中
阅读全文
摘要：慕课网5-2编程练习：flex布局制作卡片布局案例 小伙伴们，学习了卡片布局，接下来我们根据效果图，也写出一个卡片布局的页面吧! 效果图如下： 任务 1、主体内容的卡片一行只能显示两个。 2、卡片与卡片之间的距离相等，行与行之间的距离也相等。 3、卡片的主体内容居中显示。 4、当鼠标放在按钮上时，按
阅读全文
摘要：2-5编程练习 我们刚学习了通过媒体查询进行响应式布局，接下来我们来实现图片在显示器大小变化时，布局由4列变3列变2列变1列的响应式效果吧。 要求： (1)显示器宽度大于960px时，图片呈一行4列布局; (2)宽度小于960px大于780px时，呈一行3列布局; (3)宽度小于780px大于440
阅读全文
摘要：2-3编程练习 我们刚学习过了媒体查询的用法，接下来我们事先一个小的响应式效果吧。（建议到本地践行测试哦） 要求： （1）浏览器窗口宽度大于1100px时，文字颜色为红色； （2）小于1100px大于960px时，文字颜色为橙色； （3）小于960px大于800px时，文字颜色为黄色； （4）小于8
阅读全文
摘要：小伙伴们，伸缩容器的属性我们已经学完了，接下来使用我们所学的伸缩容器属性完成下面的效果图。 要求： 1、logo、导航项、登录注册按钮这三项在水平和垂直方向上都对齐，而且他们之间的距离也相等。 2、导航项各项之间的距离也是一样的。 3、登录、注册按钮之间的距离也是一样的。 慕课网logo图： 效果图
阅读全文
摘要：小伙伴们，我们学习了伸缩容器的一些属性，接下来使用我们所学的伸缩容器属性完成下面的效果图。 完成效果： 任务 1、先将容器设置为伸缩容器 2、在垂直方向上对齐，行与行之间的空白距离一样 3、在水平方向上对齐，第一个和最后一个项目位于容器的最左边和最右边 参考代码：
阅读全文
摘要：小伙伴们，掌握了JavaScript的语法、流程控制语句、内置对象以及DOM和BOM的知识，运用所学知识完成如下图所示的交互效果——轮播图。效果图如下： 具体交互效果图参考gif动态效果图，gif效果图如下： 任务描述一、语言和环境 1、实现语言 HTML、CSS、JavaScript 2、环境要求
阅读全文
摘要：多物体运动框架，鼠标移入Div，此Div逐渐变宽，鼠标移出后，此Div逐渐缩短恢复原长度。 核心：为每一个div定义一个单独的定时器，从逻辑层面上确保定时器之间互不影响。 问题（1）for循环中变量i所能影响的范围是什么？像下面这样定义每个Div的定时器为什么控制台会报错？
阅读全文
摘要：区块变速运动模拟案例 红色区块点击按钮实现区块运动速度逐渐减小到left值为300px停止。 (1)div的style属性#div1{width:200px;height:100px;background:red;position:absolute;left:0;}实现该功能。 (2)div的sty
阅读全文
浙公网安备 33010602011771号