js开发实例 —— 循环精灵图&显示隐藏文本框内容

三、循环精灵图

思路:

① 首先精灵图图片排列有规律的。

② 利用for循环修改精灵图片的背景位置background- position。

③ 剩下的就是考验你的数学功底了。

HTML 代码:

js开发实例 —— 循环精灵图&显示隐藏文本框内容_第1张图片

JS 代码:
js开发实例 —— 循环精灵图&显示隐藏文本框内容_第2张图片

四、显示隐藏文本框内容

思路:

① 首先表单需要2个新事件,获得焦点onfocus失去焦点onblur

② 如果获得焦点,判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容。

③如果失去焦点,判断表单内容是否为空,如果为空,则表单内容改为默认文字。

HTML 代码:

在这里插入图片描述

JS 代码:

js开发实例 —— 循环精灵图&显示隐藏文本框内容_第3张图片

你可能感兴趣的:(前端,javascript)