四月十九晚:
今天晚上我们一共学习了两个案例,一个是抽奖的,还有一个是显示时钟的
实现图片抽奖的小案例
思路:
1)先准备一些图片(图片的名称是从0开始)
2)先得让图片显示到网页中,通过javascript动态改变显示的图片
(让网页显示不同图片的方法,其实是给img 不同的路径)
3)通过做延时,实现图片的滚动
4)增加两个按钮,当点击开始的时候,开始滚动,当点击停止按钮的时候,图也会停下来
//循环的控制变量
var i=0;
//定义一个图片的数量
var num=15;
//定义一个时间的句柄
var timeHander;
//定义一个方法,该方法的作用是,动态的修改图片的路径
function choujiang(){
//控制图片的显示,不能超过我们定义的数量
if(i<num){
document.getElementById("img").src="images/"+i+".jpg";
//循环变量i++
i++;
}else{
//当循环的变量i=15的时候,图片都显示一遍了,这时我让i=0,从头再显示。
i=0;
}
//延迟执行函数实现滚动的效果 函数名 延迟时间
timeHander=setTimeout("choujiang()","50");
}
choujiang();
//增加按钮
function Stop(){
//不让上面的再延迟执行 clearTimeout() 可以清空延迟对象
clearTimeout(timeHander);
}
function reStart(){
//重新开始,其实就是重新调用一次
choujiang();
}
//思路:1)获取时间 2)一秒钟重复一次
//在JavaScript中获取时间的方法 Date对象
// alert(new Date().toLocaleString());
/*
2、关于javascript中函数的概念
函数的定义:
function 函数名([参数1,参数2]){
}
函数的调用:
函数名();
3、通过javascript修改网页的内容
1)document.write("要输出的内容");
2)获取网页中元素,通过innerHTML修改元素的内容
*/
//思路:1,获取时间2.一秒钟重复一次
//在javascript中获取时间的方法 date对象
//alert( new Date().toLocaleString());
//2.关于javascript中函数的概念
//函数的定义
//function 函数名([参数1,参数2]){}函数的调用;函数名();
//3.通过javascript修改网页的内容
//1)document.write("要输出的内容")
//例外一个概念,函数的概念
function dispTime(){
//根据Date对象,获取时间字符串
var timestr=new Date().toLocaleString();
//将获取的内容放到div中,innerHTML修改div中的内容
document.getElementById("time").innerHTML=timestr;
//seTimeout();表示延迟执行("函数名称","毫秒时间,延迟的时间")
seTimeout("disrTime()","1000");
}
//调用disrTime方法,开始执行
dispTime();
//setInterval("函数名称","毫秒时间,间隔的时间");每间隔一秒执行一次,1秒=1000毫秒
//setInterval("dispTime()","1000");
// document.getElementById("time").innerHTML="拉了拉";