案例:美女时钟
思路:
打开页面就有图片按每秒1张的顺序轮换,用到了日期对象,获取小时和秒。
封装到一个命名函数后,为了使页面打卡就有图片的轮换,先调用下f1,再设置setInterval
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <img src="" alt="" id="im" /> <script src="common.js"></script> <script> function f1() { //获取当前时间 var dt = new Date(); //获取小时 var hour = dt.getHours(); //获取秒 var second = dt.getSeconds(); hour = hour < 10 ? "0" + hour : hour; second = second < 10 ? "0" + second : second; my$("im").src = "meimei/" + hour + "_" + second + ".jpg"; } //打开页面先调用f1,这样打开来就有图片,不用等待 f1(); //页面加载哇麻痹后,过了1,秒才执行函数的代码 setInterval(f1, 1000); </script> </body> </html>