<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<script type="text/javascript">
function changeImage()
{
var date = new Date();
var minute = date.getMinutes();
var second = date.getSeconds() - 1;
var path = ".\\" + (second%10) + ".jpeg";
var bufferImage = new Image(); //缓冲图片
bufferImage.src = path;
document.getElementById("image").src=bufferImage.src;
//alert(path);
}
setInterval("changeImage();", 500);
</script>
</head>
<img id ="image" src="" width="1366" height="768" /><>
</body>
</html>
这是完成每500毫秒刷新一次图片，其中图片的名字以当前系统的时间确定。闪烁的原因是刷新图片时，图片还没有完全载入，所以会出现延迟，给人的感觉就是闪烁。解决的方法是先new一个临时Image对象，先把图片载入这个对象内，然后在从这个临时对象中获取图片地址。这样可以解决闪烁问题。
//下面使用html5实现
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="1366" height="768" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<FONT SIZE=1 id = "F1"></FONT>
<FONT SIZE=1 id = "F2"></FONT>
<script>
var i_width=window.document.body.clientWidth//网页可用宽度
var i_height=window.document.body.clientHeight;
var pic = document.getElementById("myCanvas");
pic.style.height=i_height+"px";
pic.style.width=i_width+"px";
</script>
<script type="text/javascript">
var n = 0;
var image=new Image();//放入函数里面：浏览器运行一分钟左右系统内存用到高达90%，故做一个全局的反冲图片
function changeImage()
{
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
//ctx.restore();
image.src="0.jpg";
image.onload = function () //确保图片已经加载完毕
{
n=n+1;
n=n%100;
document.getElementById("F1").innerHTML="N:"+n;
if (image.complete)//如果图片加载完成，绘制
cxt.drawImage(image,0,0);
else
alert(image.complete);
}
image.onerror=function(){
document.getElementById("F2").innerHTML="error N:"+n;
};
//ctx.save();
}
setInterval("changeImage();", 100);
</script>
</body>
</html>
获取更多帮主请关注小程序
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
