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

最新推荐文章于 2021-06-25 19:10:12 发布

皮蛋瘦肉没有肉

最新推荐文章于 2021-06-25 19:10:12 发布

阅读量868

点赞数

分类专栏： JavaScript 文章标签： html javascript

本文链接：https://blog.csdn.net/zzp961224/article/details/52004912

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

<!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="上一张" οnclick="previous()" />
		<input type="button" value="下一张" οnclick="next()" />
		<input type="button" value="自动播放" οnclick="auto()" />
		<input type="button" value="停止播放" οnclick="pause()" />
	</body>

</html>

这段代码中的auto函数与上一段代码中实现循环的函数是一样的，不一样的是这一段代码添加了取消循环的方法clearInterval()
以下是由菜鸟教程给出的解释：

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

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

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