您的位置：首页 > Web前端 > JavaScript

javascript实现时钟实时显示及幻灯片自动播放

2016-07-23 16:07 627 查看

动态时钟的实现——实时显示时间

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clock</title>
<script language="javascript">
function sysTime() {
var now = new Date(); //创建Date对象
var year = now.getFullYear(); //获取年份
var month = now.getMonth() + 1; //获取月份
var date = now.getDate(); //获取日期
var day = now.getDay(); //获取星期
var hour = now.getHours(); //获取小时
var minutes = now.getMinutes(); //获取分钟
var sec = now.getSeconds(); //获取秒
var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var week = arr_week[day];
var time = year + "年" + month + "月" + date + "日 " + hour + "时" + minutes + "分" + sec + "秒";

document.getElementById("clock").innerHTML = "当前系统时间: " + time;
}

window.onload = function() {
//循环调用sysTime()，每隔1000毫秒调用一次
window.setInterval("sysTime()", 1000);
};
</script>
</head>

<body>
<div id="clock"></div>
</body>

</html>

由于要实现时间的实时显示，所以在加载页面的时候就要调用函数

window.onload = function(){}；

然后在函数体里面调用window对象的setInterval()方法,是设置循环的方法，第一个参数是设置需要循环调用的函数名称，第二个参数是设置循环周期。

具体效果请广大网友自行验证。

幻灯片自动播放及停止自动播放的实现

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片</title>
<script>
var picArr = new Array("img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg");
var index = 0;

function next() { //下一张图片
index++;
if(index == picArr.length) {
index = 0;
}
document.getElementById("img1").src = picArr[index]; //修改src值
}

function previous() { //上一张图片
index--;
if(index < 0) {
index = picArr.length - 1;
}
document.getElementById("img1").src = picArr[index]; //修改src值
}

function auto() {  //自动播放
//循环调用next()，每隔1000毫秒调用一次
int = window.setInterval("next()", 1000);
}

function pause() {  //暂停自动播放
int = window.clearInterval(int);
}
</script>
</head>

<body>
<img id="img1" src="img/1.jpg" width="640" height="439" /> <br/>
<input type="button" value="上一张" onclick="previous()" />
<input type="button" value="下一张" onclick="next()" />
<input type="button" value="自动播放" onclick="auto()" />
<input type="button" value="停止播放" onclick="pause()" />
</body>

</html>

这段代码中的auto函数与上一段代码中实现循环的函数是一样的，不一样的是这一段代码添加了取消循环的方法clearInterval()

以下是由菜鸟教程给出的解释：
clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

定义一个变量int代表循环方法，再将此变量作为clearInterval的参数重新对int进行“赋值”，再在pause()中进行调用，就达到了取消循环播放的作用。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html javascript

相关文章推荐

新的分享

章节导航

javascript实现 时钟实时显示及幻灯片自动播放

javascript实现时钟实时显示及幻灯片自动播放