Question

我遇到了GIF和Javascript的问题。我得到了不同的GIF动画，它们都是相同的格式，我希望它们在播放一次后随机改变。

我尝试使用Javascript解决这个问题，但我只能让它在确切的时间内进行更改，而不是在每个GIF动画完成时（它们都在不同时间完成）。

<html>
<head>
<script type="text/javascript">
<!--
var ima = [];

ima[0] = 'bilder/bild1.gif';
ima[1] = 'bilder/bild2.gif';
ima[2] = 'bilder/bild3.gif';
ima[3] = 'bilder/bild4.gif';

function BildWechsel()
{
    var num = Math.random();
    var ran = Math.floor((ima.length - 1) * num);

    document.images['wechsel'].src = ima[ran];
}

onload = function ()
{
    window.setInterval(function () { BildWechsel(); }, 10000);
}
//-->
</script>

</head>
<body>

<img id="wechsel" src="bilder/bild1.gif" border="0" alt="">

</body>
</html>

有没有可能让这项工作？如果不是在浏览器中，你怎么可能让它工作？

Answer 1

我会像这样重写Javascript：

window.onload = function () {

    var images = [
            {src:'bilder/bild1.gif',delay:3000},
            {src:'bilder/bild2.gif',delay:2000},
            {src:'bilder/bild3.gif',delay:1500},
            {src:'bilder/bild4.gif',delay:4000}
        ],
        element = document.images['wechsel'],
        change_image = function () {
            var image = images[ Math.floor( Math.random() * images.length ) ];
            // (Math.random()*images.length)>>0 would be a lot faster

            element.src = image.src;

            setTimeout(change_image, image.delay);
        };

    setTimeout(change_image, 10000);

};

delay会根据您当前的图片而改变。

这有一些速度提升，代码也很简单。

这是未经测试的！

这是一个（略微）更改版本以更改文本颜色：

＆＃13;

window.onload = function () {

	var colors = [
			{name:'red',delay:3000},
			{name:'yellow',delay:1000},
			{name:'green',delay:2300},
			{name:'blue',delay:2600},
			{name:'pink',delay:1300},
			{name:'purple',delay:500},
		],
		element = document.getElementById('span'),
		change_color = function () {
			var color = colors[ ( Math.random() * colors.length )>>0 ];

			element.style.color = color.name;
			
			setTimeout(change_color, color.delay);
		};
		
	setTimeout(change_color, 2000);
	
};

＆＃13;

<span id="span" style="background:black;font-family:sans-serif;font-size:20px;font-weight:bold;padding:10px;">I change color!</span>

＆＃13;

Answer 2

嗯，首先，这里有很多考虑因素。

首先需要了解的是，您可以拥有一个由一系列对象组成的多维数组，而不是普通字符串（这就是您现在所拥有的）。我建议你在这里做一些阅读:(看看Mozilla的开发者网络，或谷歌吧）。

现在，你不能用间隔做到这一点，因为间隔发生在预设的间隔。你需要超时 - 但超时只发生一次。

你可以看到这是怎么回事，对吗？所以你需要在上一次超时结束后再次调用超时 - 这就是“回调”的概念（google“javascript callbacks”）。

无论如何，我在JSFiddle中为你提供了一个非常简单的例子 - 它并没有100％解决你的问题，因为我认为如果你对这一切的工作原理有所了解会很酷，但这应该至少可以让你使用（也可以使用JSFiddle - http://jsfiddle.net/Nitrium/kyvbnxfv/）

imab = []; 

imab[0] = {
    image: 'bilder/bild1.gif', 
    time: 1000
}

imab[1] = {
    image: 'bilder/bild2.gif', 
    time: 500
}

imab[2] = {
    image: 'bilder/bild3.gif', 
    time: 2500
}

imab[3] = {
    image: 'bilder/bild4.gif', 
    time: 100
}

function BildWechselB() {
    var num = Math.random();
    var ran = Math.floor((imab.length - 1) * num);

    return imab[ran];
}

var interval;

function callBack (imageSrc) {

    printImage(imageSrc);

    clearInterval(interval);

    var newRandomImage = BildWechselB();
    interval = window.setTimeout(callBack, newRandomImage.time, newRandomImage.image)
}

function printImage (src) {
    var imageSrc = document.createTextNode(src);
    var bodyTag = document.getElementsByTagName('body');
    bodyTag[0].appendChild(imageSrc);
}

var firstRandomImage = BildWechselB();

interval = window.setTimeout(callBack, firstRandomImage.time, firstRandomImage.image);

希望它有所帮助！

GIF随机变化

2 个答案: