2016年5月25日上午（妙味课堂js预热课程-3笔记）
一、js简易日历
1、innerHTML的使用：
a：设置内容并为其加样式：
<input id="txt1" type="text" />
<input id="btn1" type="button" value="设置文字" />
<div id="div1"></div>
<style>
#div1{width:200px;height:200px;background:#ccc;}
</style>
b：为内容添加事件：（注意innerHTML的使用情况）；
<script type="text/javascript">
window.onload=function () {
var oBtn=document.getElementById("btn1");
var oTxt=document.getElementById("txt1");
var oDiv=document.getElementById("div1");
oBtn.onclick=function () {
oDiv.innerHTML=oTxt.value;
}
}
</script>
现在开始我们来做简易日历：
首先由html和css做出界面如下，接下来我们为其添加点击事件：
1、鼠标滑动到哪一个月份，那个月份就显示当前样式，其他月份恢复到原来样式；
<script type="text/javascript">
window.onload=function () {
var aLi=document.getElementsByTagName("li");
var i=0;
for(i=0;i<aLi.length;i++){
aLi[i].onmousemove=function () {
for(i=0;i<aLi.length;i++){
aLi.className="";
}
this.className="active";
}
}
}
</script>
2、下面的文字内容随着鼠标的滑动到哪个月份而随着改变：
<script type="text/javascript">
window.onload=function () {
var aLi=document.getElementsByTagName("li");
var oText=document.getElementById("tab").getElementsByTagName("div")[0];
var aDatas=[
"快过年了，大家快去玩吧！",
"快过年了，大家快去玩吧！",
"快过年了，大家快去玩吧！",
"快过年了，大家快去玩吧！",
"快过年了，大家快去玩吧！",
"........"
];
var i=0;
for(i=0;i<aLi.length;i++){
aLi.index=i;
aLi[i].onmousemove=function () {
for(i=0;i<aLi.length;i++){
aLi.className="";
}
this.className="active";
oText.innerHTML="<h2>"+this.index+1+"月活动</h2><p>"+aDatas[this.index]+"</p>";
}
}
}
</script>
这里要注意以下数组的概念......；
这样一个简易的日历就完成了。
二、定时器使用：
1、定时器的作用
2、开启定时器
setInterval 间隔型
setTimeout 延时型
两种定时器的区别
3、停止定时器
clearInterval
clearTimeout
第一步：制作两个按钮：
<input id="btn1" type="button" value="开启定时器" />
<input id="btn2" type="button" value="关闭定时器" />
第二步：为这两个按钮添加点击事件：
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
定时器打开和关闭的代码如下：
<script type="text/javascript">
function show() {
alert("a");
}
window.onload=function () {
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var timer=null;
oBtn1.onclick=function () {
timer=setInterval(show,1000);
};
oBtn2.onclick=function () {
clearInterval(timer)
}
}
</script>
这里要注意定义的变量timer以及如何应用它；
三、数码时钟
数码时钟如何做？效果的思路：
1、获取系统时间：
Date对象
getHour、getMinutes、getSeconds
2、显示系统时间
字符串链接
空位补零
3、设置图片路径
charAt方法
1、如何获取系统时间：
先声明一个Date对象；
<script type="text/javascript">
window.onload=function () {
var oDate=new Date();
alert(oDate.getSeconds());
}
</script>
它的作用是获取系统里面的时间；这里面的new是用来初始化一个对象；创建一个对象；然后用来获取系统时间即oDate.getSeconds()；
获取完整的时间：var str=oDate.getHours()+"点"+oDate.getMinutes()+"分"+oDate.getSeconds()+"秒";
alert(str);
下面对其进行布局：布局代码如下：
<img src="0.jpg" />
<img src="0.jpg" />
点
<img src="0.jpg" />
<img src="0.jpg" />
分
<img src="0.jpg" />
<img src="0.jpg" />
秒
a、注意空位补零函数代码如下：
function toDouble() {
if(num<10){
return "0"+num;
}
else{
return ""+num;
}
}
b、注意charAt方法：
charAt() 方法可返回指定位置的字符。
<script type="text/javascript">
var str="Hello world!"
document.write(str.charAt(1))
</script>
以上代码结果输出e。
2、最后整个自动跳转时间代码如下：
<script type="text/javascript">
function toDouble() {
if(num<10){
return "0"+num;
}
else{
return ""+num;
}
}
window.onload=function () {
var oBtn=document.getElementById("btn1");
var aImg=document.getElementsByTagName("img");
var i=0;
oBtn.onclick=function updateTime() {
var oDate=new Date();
var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());
for(i=0;i<aImg.length;i++){
aImg[i].src="img/"+str.charAt(i)+".png";
}
setInterval(updateTime,1000);
updateTime();
}
</script>
注意这里面用到了一个定时器来自动更新时间以及updateTime（）函数的调用；
