实现一个数码时钟的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="img/0.png">
<img src="img/0.png">时
<img src="img/0.png">
<img src="img/0.png">分
<img src="img/0.png">
<img src="img/0.png">秒
</body>
<script type="text/javascript">
function getTime(){
var d = new Date();
var h = d.getHours();
//console.log(h)
var m = d.getMinutes();
//console.log(m);
var s = d.getSeconds();
//console.log(s);
var arr = [parseInt(h/10),parseInt(h%10),parseInt(m/10),parseInt(m%10),parseInt(s/10),parseInt(s%10)];
var oimg = document.querySelectorAll('img');
for(var i = 0;i<oimg.length;i++){
oimg[i].src = 'img/'+arr[i]+'.png';
}
}
getTime();
setInterval(getTime,1000)
//以上是一个数码时钟的实例
//自定义设置时间
var date1 = new Date();
date1.setDate(date1.getDate()+10);//在当前日期基础上加10
console.log(date1);
</script>
</html>
定时器实现 一个特别简单的图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="img/6.jpg" alt="">
<script type="text/javascript">
var oImg = document.getElementsByTagName("img")[0];
var imgArr = ["6.jpg","7.jpg","8.jpg","9.jpg"];
var index = 0;
setInterval(function() {
index++;
if (index == imgArr.length) {
index = 0;
}
oImg.src = "img/"+imgArr[index];
}, 1000);
</script>
</body>
</html>
网友评论