<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>时钟</title>
<style>
div{
width: 630px;
height: 420px;
margin: 100 auto;
}
</style>
</head>
<body>
<!--简单的设置它的样式-->
<div>
<img src="" alt="" id="im">
</div>
<script>
setInterval(function () {
//获取当前的时间
var minute = new Date().getMinutes();
var second = new Date().getSeconds();
//因为图片命名的原因，所以需要添加两个判断
//在数字小于10和大于10的时候分别展示的是两种不同位数的数字，但是图片的名称却是统一的，所以得判断
minute = minute<10?"0"+minute:minute;
second = second<10?"0"+second:second;
//获取img标签元素，并且改变它的src属性
document.getElementById("im").src = "meimei/"+minute+"_"+second+".jpg";
},1000);
</script>
</body>
</html>首先获取当前的时间，然后将获取到的信息对应在图片的名称上边，再添加一个定时器，按照定时器设置的跳转时间间隔（1000毫秒，也就是一秒钟），来不断改变img标签的src属性，从而实现图片随着时间的走动，对应的显示出对应图片的效果。
其实主要就是定时器的简单应用，以及时间获取函数的使用，再一个就是将img标签这个看成一个元素，再将img标签中的src看成是这个元素的一个属性，通过给这个属性不断地赋值，从而实现效果。
ps:如果需要图片素材包的可以私信我哦。
677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
