1、实现图片轮播的效果,即:图片不停的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 160px;
height: 300px;
margin: auto;
margin-top: 10px;
}
</style>
</head>
<body>
<img src="1.JPG" id="img">
<div id="div"></div>
<script>
function test() {
var index = 0;
function change() {
index++;
var img = document.getElementById("img");
img.setAttribute("src", index + ".JPG")
if (index == 7) {
index = 0;
}
}
return change;
}
var ch = test();
setInterval(ch, 200);
function time() {
var div = document.getElementById("div");
div.innerHTML = new Date().toLocaleString();
}
setInterval(time, 1000);
</script>
</body>
</html>
2、本地同步显示时间(即,在页面上显示实际的时间)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-family: 隶书;
font-size: larger;
font-weight: bolder;
text-align: center;
background-color: aqua;
}
</style>
</head>
<body>
<div id='div'></div>
<script>
function time() {
var div = document.getElementById("div");
div.innerHTML = new Date().toLocaleString();
}
setInterval(time, 1000);
</script>
</body>
</html>