乐知第二次实训 李伟老师第二次课

主要讲的是javascript

时间网页的制作：

function dispTime(){

//根据Date对象,获取时间字符串

var timestr=new Date().toLocaleString();

//将获取的内容放到div中  ,innerHTML修改div中的内容

document.getElementById("time").innerHTML=timestr;

   

   

//setTimeout("函数的名称","延迟的时间（毫秒）"); 表示延迟执行

setTimeout("dispTime()","3000");

//调用dispTime方法，开始执行

dispTime();

//setInterval("函数的名称","间隔的时间（毫秒）");  每间隔1秒执行一次 ，1秒=1000毫秒

//setInterval("dispTime()","1000");

非常给力抽奖程序：

<img id="img" src="images/0.jpg" width="400" height="300" /><br><br>

<input type="button" value="停止" onclick="Stop()"/>

<input type="button" value="开始" onclick="reStart()"/>

<script>

思路：

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();

}

图片的位置：

在站点下建一个images的文件夹

将图片放在站点下