JavaScript实例教程(十五)状态栏文字拉长的效果

JavaScript实例教程(十五)状态栏文字拉长的效果
JavaScript实例教程(十五)状态栏文字拉长的效果

本例实现的效果是状态栏的文字由右向左,风一样的飘过来,当都飘到右边的时候,不停的循环前一次的效果,给人耳目一新的感觉呢。

下面是源代码:

在和标签之间输入以上代码

把改为

就是载入函数wiper()

以下是上述代码的运行结果:

例中的关键部分还是在于wiper()这个函数,希望大家对于这段函数代码多多揣摩研究,一定会有不小的收获的,如果不太清楚函数的用法,请参考以前所讲的和相关资料。

《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解

《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 (课程英文名称) 课程编号:201509210011 学分:5学分 学时:64学时(其中:讲课学时:45 上机学时: 19 ) 先修课程:计算机基础、计算机网络、计算机应用 后续课程:UI设计、 JavaScript网页特效 适用专业:信息及其计算机相关专业 开课部门:计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习,学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向,熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事(2学时) [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用

使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准,明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作,能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面(4学时) [相关案例] 【案例1】简单的网页: 【案例2】新闻页面: 【案例3】图文混排: [知识点] HTML文档基本格式

《HTML+CSS+JavaScript网页制作案例教程》课程教学

传智播客 《HTML+CSS+JavaScript网页制作案例教程》 教学设计 课程名称:HTML+CSS+JavaScript网页制作案例教程 授课年级:2015年级 授课学期:2015学年第二学期 教师姓名:某某老师

201 年月日 课题名称第5章列表与超链接 计划 课时 6课时 内容分析通过第4章盒子模型的学习,已经很容易对网页做一个简单的结构划分。但是一个网站由多个网页构成,每个网页上都有大量的信息,要想使网页中的信息排列有序,条理清晰,并且网页与网页之间有一定的联系,就需要使用列表和超链接。本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。 教学目标●掌握无序、有序及定义列表的使用,可以制作常见的网页列表模块; ●掌握超链接标记的使用,能够使用超链接定义网页元素; ●掌握CSS伪类,会使用CSS伪类实现超链接特效; 重点及措施 教学重点:无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。 措施:通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点:有序列表、定义列表、链接伪类。 措施:通过上机操作加强学习和补充案例进行巩固。 教学方式教学采用教师课堂讲授为主,使用教学PPT讲解。 教学过程 第一课时 (制作“精美电商悬浮框”,讲解无序列表、有序列表) 复习上节课内容 在讲解本节内容前,抛出以下问题让学生回答,以复习第四章“CSS盒子模型”的相关知识。 1、一个盒子的宽(width)和高(height)均为300px,左内边距为30px, 同时盒子有3px的边框,请问这个盒子的总宽度是多少?() A、333px B、366px C、336px D、363px

《JavaScript项目式实例教程》课程标准

《JavaScript项目式实例教程》课程标准 课程编号:02104 课程类型:非核心课程、一体化课程学时:72 适用对象:软件与信息服务专业二年级学生编制者:屹峰审核者: 编制日期: 2014-07-05 一、课程的性质1、课程定位 《JavaScript项目式实例教程》课程是计算机软件与信息服务专业的一门重要的专业课,定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程,在整个课程体系中具有重要的作用。本课程的前导课程:静态网页设计、DIV+CSS布局。后续课程:网页美工、PHP 动态网页设计、C#程序设计与应用等。 2、课程任务 《JavaScript项目式实例教程》课程课程任务是培养网页设计、网页美工以及WEB综合开发的初、中级专业人才,通过本课程的学习,学生能掌握JavaScript语言的基本编程思想,并能熟练利用JavaScript控制WEB页面各级元素,实现WEB前端的验证、动态展示等任务。 二、职业活动 通过本课程的学习,使学生形成一定的学习能力、沟通与团队的协作能力,形成良好的思考问题、分析问题和解决问题的能力,养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规,形成关键性的软件开发与应用的能力。最终成为具备较全面的软件开发与信息服务的技术人才。 该课程涉及的知识是Web应用程序或前端开发人员必备的基本技能,职业活动与课程容的对应关系如下: Web前端开发岗位职业能力教学容(理实一体化课)模块化设计思想任务模块化(第1章)程序设计基本流程判断、循环结构(第2、3章)与基本对象的交互设计事件(第4章)事件高级应用(第8章)操作浏览器窗口窗口对象(第5章)操作Document 文档对象(第6章)操作DOM DOM对象(第7章)动画基础运动基础(第9章) 三、教学目标1、职业关键能力目标 (1)掌握JavaScript语言的基本语法及常用的置函数(2)掌握事件以及事件的触发机制(3)掌握BOM对象的常用属性和方法《JavaScript项目式实例教程》课程标准 3 (4)掌握文档对象的常用属性和方法(5)掌握Cookie对象的使用方法 (6)掌握DOM的概念以及利用DOM操作文档节点的方法(7)掌握事件流和事件绑定(8)掌握利用JavaScript设计缓冲运动的原理和方法2、职业专门能力目标 (1)通过完成相关的项目,掌握JavaScript语言的语法结构。 (2)通过完成相关的项目,掌握JavaScript各种置对象的使用方法和应用情境。 (3)通过完成相关的项目,寻找发现问题途径,学会解决问题的方法3、方法能力目标形成一定的学习能力、沟通与团队的协作能力,形成良好的思考问题、分析问题和解决问题的能力,养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规,形成关键性的软件开发与应用的能力。 四、课程容1、预备知识

JavaScript程序设计实例教程教案第11单元

《用户登陆及密码修改》《JavaScript程序设计》课第11单元 课程单元教学设计 (2019~2020学年第1学期) 所属系部:计算机与通信工程学院 制定人: 合作人: 制定时间:2020.8 ***学院教务处制

JavaScript程序设计课程单元教学设计

单元教学进度设计(纲要)

一、情境导入 介绍本节课的教学目标 二、引入 任务:密码修改的遮罩锁屏效果三、知识点讲解 增加元素如:

遮罩样式设定: #change { width: 35px; height: 30px;

line-height: 30px; cursor: pointer; } #screen1 { position: absolute; top: 0; left: 0; background: #000; z-index: 9998; filter: alpha(opacity=30); opacity: 0.3; display: none; } #login,#repass{ width: 350px; height: 250px; border: 1px solid #ccc; position: absolute; z-index: 9999; background: #fff; display:none; } #login h2,#repass h2 { height: 40px; line-height: 40px; text-align: center; font-size: 14px; letter-spacing: 1px; color: #fff; background: #044599; margin: 0; padding: 0;

JavaScript程序设计实例教程教案第13单元

《学生信息添加界面设计》《JavaScript程序设计》课第13单元 课程单元教学设计 (2019~2020学年第1学期) 所属系部:计算机与通信工程学院 制定人: 合作人: 制定时间:2020.8 ***学院教务处制

JavaScript程序设计课程单元教学设计

单元教学进度设计(纲要)

一、情境导入 介绍本节课的教学目标 二、引入 任务:学生信息管理页面-界面设计 三、知识点讲解 文本框样式: ui_input_txt02{ width: 60px; height: 16px; margin: 2px 2px 2px 5px; outline: 0; padding: 5px; border: 1px solid; border-color: #C0C0C0 #D9D9D9 #D9D9D9; border-radius: 2px; background: #FFF; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2); -webkit-transition: box-shadow, border-color .5s ease-in-out; -moz-transition: box-shadow, border-color .5s ease-in-out; -o-transition: box-shadow, border-color .5s ease-in-out; } this.firstname=firstname; https://www.360docs.net/doc/c79922972.html,stname=lastname; this.age=age; this.eyecolor=eyecolor; }

javascript菜鸟基础教程

JavaScript 简介 JavaScript 有什么特点 JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。 Java 与 JavaScript 有什么不同 很多人看到 Java 和 JavaScript 都有“Java”四个字,就以为它们是同一样东西,连我自己当初也是这样。其实它们是完完全全不同的两种东西。Java,全称应该是Java Applet,是嵌在网页中,而又有自己独立的运行窗口的小程序。Java Applet 是预先编译好的,一个 Applet 文件(.class)用 Notepad 打开阅读,根本不能理解。Java Applet 的功能很强大,可以访问 http、ftp等协议,甚至可以在电脑上种病毒(已有先例了)。相比之下,JavaScript 的能力就比较小了。JavaScript 是一种“脚本”(“Script”),它直接把代码写到 HTML 文档中,浏览器读取它们的时候才进行编译、执行,所以能查看HTML 源文件就能查看JavaScript 源代码。JavaScript 没有独立的运行窗口,浏览器当前窗口就是它的运行窗口。它们的相同点,我想只有同是以 Java 作编程语言一点了。开发 JavaScript 该用什么软件 一个 JavaScript 程序其实是一个文档,一个文本文件。它是嵌入到 HTML 文档中的。所以,任何可以编写 HTML 文档的软件都可以用来开发 JavaScript。在此我推荐大家用 FrontPage 2000 附带的 Microsoft 脚本编辑器(在FrontPage 菜单 | 工具 | 宏 | Microsoft 脚本编辑器)。它是个像 Visual Basic / C++ 一样的程序开发器,能对正在输入的语句作出简要提示。配合 FrontPage 2000,使工作量大大减少。 JavaScript 语言的基础在什么地方插入 JavaScript JavaScript 可以出现在 HTML 的任意地方。使用标记,你可以在 HTML 文档的任意地方插入 JavaScript,甚至在之前插入也不成问题。不过如果要在声明框架的网页(框架网页)中插入,就一定要在之前插入,否则不会运行。 基本格式