SailorM - 博客园

2020年1月4日

摘要：案例分析： ①首先表单需要2个新事件，获得焦点onfocus，失去焦点onblur； ②如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容；效果：代码： 1 <body> 2 <input type="text" value="我想你了"> 3 </body> 4 <s 阅读全文

posted @ 2020-01-04 23:15 SailorM 阅读(372) 评论(0) 推荐(0) 编辑

操作元素之循环精灵图背景

摘要：案例分析： ①首先精灵图图片排列是有规律的； ②核心思路：利用for循环，修改精灵图片的位置background-position； ③分析图片的位置关系。效果：代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=" 阅读全文

posted @ 2020-01-04 22:31 SailorM 阅读(451) 评论(0) 推荐(0) 编辑

2020年1月3日

操作元素之二维码关闭

摘要：可以通过JS修改元素的大小、颜色、位置等样式。有两种方式：①element.style——行内样式操作 ②element.className——类名样式操作案例分析： ①核心思路：利用样式的显示和隐藏完成，display:none隐藏元素，display:block显示元素； ②点击按钮，把二维阅读全文

posted @ 2020-01-03 22:30 SailorM 阅读(330) 评论(0) 推荐(0) 编辑

操作元素之显示密码

摘要：要求：点击按钮将密码框切换为文本框，并可以查看密码明文。案例分析： ①核心思路：点击眼睛按钮，把密码框的类型改为文本框就可以显示里面的密码； ②一个按钮有两种状态，点击一次切换为文本框，再点击一次切换为密码框； ③算法：利用一个flag变量，flag=1时就切换为文本框，并将flag设置为0；f 阅读全文

posted @ 2020-01-03 16:52 SailorM 阅读(450) 评论(0) 推荐(0) 编辑

操作元素之分时问候案例

摘要：案例：分时显示不同的图片，显示不同问候语。案例分析： ①根据系统的不同时间来判断，所以需要用到日期内置对象； ②涉及到上午、下午、晚上，采用多分支语句； ③需要一张图片，并且根据时间修改图片，就需要用到操作元素src属性； ④需要一个div元素，显示不同问候语，修改元素内容即可。效果图：为了阅读全文

posted @ 2020-01-03 10:08 SailorM 阅读(593) 评论(0) 推荐(0) 编辑

2019年12月22日

涉及到图片切换的一些页面设计

摘要：前两周一直在忙老师布置的案例库的任务，这周把之前要帮同门弄的图片界面设计的活重新拾了起来，里面涉及到了图片定时自动切换和轮播的一些东西，有点乱，先放个图，不至于博客长草，后面再一一详细学习记录。2019年马上就要结束了，前面的时间浪费了，就珍惜好最后的这几天，然后2020一定要变强！阅读全文

posted @ 2019-12-22 20:14 SailorM 阅读(364) 评论(0) 推荐(0) 编辑

2019年12月9日

随机点名

摘要：今天听课听到了Math对象中的随机数方法random()，然后就想用它设计一个简单的随机点名系统。我记得之前高中的时候语文老师用过一个，是类似于名字滚动的那种，现在太菜就先不考虑这个了，后续有机会再研究吧。先展示一下最终的效果图。下面是html代码部分 1 <!DOCTYPE html> 2 < 阅读全文

posted @ 2019-12-09 20:47 SailorM 阅读(1418) 评论(0) 推荐(0) 编辑