JS--时间器控制图片显示_前端图片怎么通过时间控制消失出现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_27752831/article/details/51544677

本文介绍了一个简单的网页应用，该应用通过JavaScript实现了图片的定时显示与隐藏，并且每秒钟更新页面上的时间显示。通过对计数器的控制，图片会在特定的时间间隔内被隐藏，之后重新显示。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
var count=0;
var times;
var stops;
var flag=true;
window.onload=function()
{

times= window.setInterval("start()",1000);
}
function stop()
{
var s = document.getElementById("img1");
if(flag==true)
{
window.clearInterval(times);

s.style.display = "none";
flag=false;
stops = window.setInterval("stop()",1000);
}
if(flag==false)
{

count++;
spantime();

if (count == 5)
{
count=0;

flag=true;
window.clearInterval(stops);
s.style.display = "block";
times = window.setInterval("start()", 1000);

}

}
}
function start()
{
count++;
if(count==5)
{
count=0;
stop();
}
else
{

spantime();

}
}
function spantime()
{
var dates =new Date();
var imgdate =document.getElementById("timeshowlocate");
var date =dates.getFullYear()+"年"+dates.getMonth()+"月"+dates.getDate()+
"日"+dates.getHours()+"时"+dates.getMinutes()+"分"+dates.getSeconds()+"秒";
imgdate.innerHTML=date;
}
</script>
</head>
<body>
<img src="xx.jpg" id="img1">
<span id="timeshowlocate"></span>

</body>
</html>