《上机部分JavaScriptL7章节》由会员分享,可在线阅读,更多相关《上机部分JavaScriptL7章节(19页珍藏版)》请在金锄头文库上搜索。
1、上机7,JavaScript常用特效,回顾,如何获取页面元素的样式属性? 如何设置元素滤镜效果,使用什么属性?,上机任务,变色文字效果。 文字荧光灯效果。 闪烁的页面背景。 图片的水中倒影。,训练技能点,JavaScript使用CSS滤镜效果 JavaScript控制style属性,任务说明 使用setTimeout()函数定时改变文字颜色,实现字符串中文字逐渐变色的效果,任务1,效果演示,任务1,掌握要点 setTimeout()函数的使用。 实现思路 设置颜色数组存储多种颜色。 随机获取某一种颜色。 根据不同浏览器采用不同的设置方式改变当前文字颜色。,任务1,参考代码,完整代码演示,任务1
2、,共性问题讲解、规范代码展示,任务2,任务说明 为文字设置荧光灯效果。,效果演示,任务2,实现思路 循环截取每一个文字。 使用定时器为文字设置颜色。,代码可参考理论部分文字颜色特效,任务2,共性问题讲解、规范代码展示,任务3,任务说明 页面包含两个按钮,点击开始按钮时页面背景颜色开始闪动不同颜色,点击停止则停止闪动。,效果演示,任务3,实现思路 为使用setTimeout()函数定时切换页面背景颜色。 使用document.bgColor属性切换颜色。,任务3,参考代码,共性问题讲解、规范代码展示,任务4,任务说明 使用滤镜效果为图片显示倒影效果。,效果演示,任务4,实现思路 style=“filter:wave(strength=3,freq=3,phase=0, lightstrength=30) blur() flipv()“,任务4,本次上机总结,作业,Thank You!,