Js学习---妙味课堂0-3

1.JS简易日历：

　　每个月份有自己的介绍。

• innerHTML的使用---div内部的一个属性标签。

　　特点：不仅支持文字，而且支持html语言。

• 用到了数组。 保存了每个月的信息。

onmouseover+this+oTxt.innerHTML=.. this.index + 数组的使用。

 

2.定时器的使用：

开启定时器：

• setInterval(函数,时间);   --- 一旦使用，不会停止
• setTimeout(函数,时间);  --- 只执行一次

--- 定义一个变量当做开启定时器的返回值。关闭的时候作为参数使用。

关闭定时器：

• clearInterval(开启定时器返回值);
• clearTimeout(开启定时器返回值);

 

应用：制作： 《数码时钟》

效果思路

获取系统时间  var oDate = new Date();

• Date对象
• getHours、getMinutes、getSeconds (获取时分秒.)

显示系统时间

• 字符串连接 --- 前面加个''即可。
• 空位补零  --- 设置一个函数，使用if判断+return 。

设置图片路径

• charAt方法  --- 数组名.charAt(i);  返回数组中 str[i] 位。
• aImg[i].src='img/'+str.charAt(i)+'.png';  //设置图片路径

最终开一个定时器，每隔1秒调用一次这个函数。

 

存在问题：在刷新页面的时候会存在1s  00 00 00 的时间

解决：     在开启定时器之后，立刻先手动调用一次该函数。

 

补充：Date对象的其它功能：

• getFullYear();
• getMonth(); (这个系统默认从0月开始)
• getDate();
• getDay();  星期几(默认从0开始，到6结束，0代表周日)

 

本课知识点：

• innerHTML: 向也div中显示文字或者html代码
• 数组
• 定时器的开启和关闭  
• Date对象   --- 获取当前系统时间
• 字符串连接  --- 使用 '+' 号
• charAt  ---  字符串操作，从一个大的字符串中截取某一位
• 数码时钟

 

 

本课练习：

1. 百度输入法：点击按钮时，切换输入状态
2. 百度时间效果：以文字形式展现的网页时钟
3. 简单推按展示效果：鼠标移入时，显示大图，给小图加框
4. 迅雷影片详情的提示框：鼠标移入时，显示提示框，移出时隐藏。

 

 

下节课内容：

1. 一级标题移出时，二级标题不会立即消失
2. 图片无缝滚动