操作元素之开关灯
摘要：分析： 点击按钮，设置浏览器窗口背景的颜色变化。 效果： 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>开关灯案例</title> 6 <style> 7 *{ 8 margin
阅读全文
posted @
2020-01-06 22:40
SailorM
阅读(228)
推荐(0) 编辑
操作元素之密码框验证信息+操作元素的总结
摘要：案例分析： ①首先判断的事件是表单失去焦点； ②如果输入正确则提示正确的信息颜色为绿色小图标变化； ③如果输入不是6到16位，则提示错误信息为红色小图标变化； ④因为里面变化样式较多，我们采取className修改样式。 效果： 代码： 1 <!DOCTYPE html> 2 <html lang=
阅读全文
posted @
2020-01-06 16:16
SailorM
阅读(288)
推荐(0) 编辑
操作元素之显示隐藏文本框内容
摘要：案例分析： ①首先表单需要2个新事件，获得焦点onfocus，失去焦点onblur； ②如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容； 效果： 代码： 1 <body> 2 <input type="text" value="我想你了"> 3 </body> 4 <s
阅读全文
posted @
2020-01-04 23:15
SailorM
阅读(375)
推荐(0) 编辑
操作元素之循环精灵图背景
摘要：案例分析： ①首先精灵图图片排列是有规律的； ②核心思路：利用for循环，修改精灵图片的位置background-position； ③分析图片的位置关系。 效果： 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="
阅读全文
posted @
2020-01-04 22:31
SailorM
阅读(454)
推荐(0) 编辑
操作元素之二维码关闭
摘要：可以通过JS修改元素的大小、颜色、位置等样式。 有两种方式：①element.style——行内样式操作 ②element.className——类名样式操作 案例分析： ①核心思路：利用样式的显示和隐藏完成，display:none隐藏元素，display:block显示元素； ②点击按钮，把二维
阅读全文
posted @
2020-01-03 22:30
SailorM
阅读(337)
推荐(0) 编辑
操作元素之显示密码
摘要：要求： 点击按钮将密码框切换为文本框，并可以查看密码明文。 案例分析： ①核心思路：点击眼睛按钮，把密码框的类型改为文本框就可以显示里面的密码； ②一个按钮有两种状态，点击一次切换为文本框，再点击一次切换为密码框； ③算法：利用一个flag变量，flag=1时就切换为文本框，并将flag设置为0；f
阅读全文
posted @
2020-01-03 16:52
SailorM
阅读(453)
推荐(0) 编辑
操作元素之分时问候案例
摘要：案例： 分时显示不同的图片，显示不同问候语。 案例分析： ①根据系统的不同时间来判断，所以需要用到日期内置对象； ②涉及到上午、下午、晚上，采用多分支语句； ③需要一张图片，并且根据时间修改图片，就需要用到操作元素src属性； ④需要一个div元素，显示不同问候语，修改元素内容即可。 效果图： 为了
阅读全文
posted @
2020-01-03 10:08
SailorM
阅读(595)
推荐(0) 编辑
