视频教程:JavaScript从入门到精通
JavaScript笔记:JavaScript从入门到精通
案例1 数码时钟
-
定时器的应用
setInterval()
-
数字图片的路径表示
aImg[i].src = "images/clock/" + currentTime[i] + ".png";
-
系统时间的获取
var date = new Date();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数码时钟</title>
<script>
// 函数toDouble将时分秒转换成2位的表示形式
function toDouble(n){
if (n<10) return '0'+n; // 类型转换成字符串(数字+"")
else return ''+n;
}
window.onload = function () {
var time = document.getElementById('time');
var aImg = time.getElementsByTagName('img'); // 获取时钟img元素,返回一个数组
var year = document.getElementById('year');
var aDiv = year.getElementsByTagName('div');
function tick() {
var date = new Date(); // 创建时间对象,获取系统时间
var currentTime = toDouble(date.getHours()) + toDouble(date.getMinutes()) + toDouble(date.getSeconds()); // 把时分秒拼接成6位的字符串,如“123456”
// 年月日
aDiv[0].innerHTML = "<span>" + date.getFullYear() + "</span>";
aDiv[1].innerHTML = "<span>" + (date.getMonth()+1) + "</span>";
aDiv[2].innerHTML = "<span>" + date.getDate() + "</span>"; // date.getDay()返回星期(0-6数字),date.getDate()返回每个月的几号
for (var i = 0; i<aImg.length; i++){
// charAt()获取指定位置上的字符串
aImg[i].src = "images/clock/" + currentTime.charAt(i) + ".png"; // 修改每张图片的src路径
}
}
setInterval(tick, 1000); // 设置定时器,每一秒执行一次
tick();
}
</script>
</head>
<body style="color:black; width: 970px; ">
<div id="year" style="font-size: 150px;">
<div style="float: left"></div>
<img src="images/clock/nian.png" style="float: left">
<div style="float: left"></div>
<img src="images/clock/yue.png" style="float: left">
<div style="float: left"></div>
<img src="images/clock/ri.png" style="float: left">
</div>
<div id="time" style="clear: left; font-size: 150px;">
<img src="images/clock/0.png">
<img src="images/clock/0.png">
:
<img src="images/clock/0.png">
<img src="images/clock/0.png">
:
<img src="images/clock/0.png">
<img src="images/clock/0.png">
</div>
</body>
</html>
案例2 轮播图
- 获取ul长度(div-ul-li的布局)
- 设置
ul.style.left
使其滚动 - 图片拼接
- 点击左右按钮图片随之滚动