本文分享了使用JavaScript进行网页时钟及抽奖小程序的编程经验。详细介绍了网页时钟的实现过程，包括时间显示更新及样式设置；并通过抽奖小程序展示了如何利用定时器及事件监听实现动态图片切换。
第二天的实训又结束了，今天因为有课要上，所以只在晚上进行了三个小时的实训，今晚主要学习了几个小游戏的代码制作：网页时钟制作及抽奖小程序。
实现网页的时钟效果
<title>实现网页的时钟效果</title>
<style>
#time{
background-color:#FF9;
border:1px #00F dashed; ----------------------dashed 虚线 solid 直线
width:300px;
height:30px;
}
</style>
<script>
//1.思路：1）获取时间 2)一秒钟重复一次
//在javascript中获取时间的方法 Date对象
// alert(new Date().toLocaleString() );
/*
2.关于javascript中函数的概念
函数的定义：
function 函数名( [参数名1，参数名2] ){}
函数的调用：
函数名();
通过javascript修改网页的内容
1)document.write("要输出的内容");
2）获取网页中的元素，通过innerHTML修改元素的内容
*/
function dispTime(){
//根据Date对象，获取时间字符串
var timestr=new Date().toLocaleString();
//将获取的内容放到div中，innerHTML修改div中的内容
document.getElementById("time").innerHTML=timestr;
//setTimeout("函数的名称",延迟隔的时间————毫秒（1秒=1000毫); 表示延迟执行
setTimeout("dispTime()","3000");
}
dispTime(); // 调用
//setInterval("函数的名称","间隔的时间————毫秒（1秒=1000毫秒）")；
//setInterval("dispTime()","1000");
</script>
</body>
—————————————————————————————————————————
抽奖小程序设计
思路：
先准备一些图片（图片的名称是从0开始）
先得让图片显示到网页中，通过javascript动态改变显示的图片
（让网页显示不同图片的方法，其实是给img不同的路径）
通过做延时，实现图片的滚动
增加两个按钮，当点击开始时，实现开始滚动；当点击停止按钮时，图片定格。
<title>给力抽奖</title>
</head>
<body>
<img src="images/0.jpg" width="400" height="300" /><br><br>
<input type="button" value="停止" />
<input type="button" value="开始" />
<script>
//循环的控制变量
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();
}
</script>
</body>
JavaScript的效果出来的真的好快哦！太有成就感啦！有些代码的原理和C++是相通的，学习过C++（虽然只学了点皮毛）在理解的话比较容易。期待明天啦！！！！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
