<!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:如果需要图片素材包的可以私信我哦。