怎么用Javascript实现随机图片效果

本篇内容主要讲解“怎么用Javascript实现随机图片效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用Javascript实现随机图片效果”吧!

不少网友发E－mail问我：“怎么每次去你的主页，看到的图片都不一样，难道你时时刻刻都在更换图片吗？”天啊，我哪有那么多钱支付电话费？我只不过用了Javascript的小技巧做了个“随机图片”而已。其HTML源代码为：

　　< !随机图片开始 >

　　< script language=″Javascript″ >

　　< !－－

　　imglink=new Date();

　　var thisimg=https://cache.yisu.com/upload/information/20200703/145/53386.jpg″;

　　if(imglink.getSeconds()< 54){var thisimg=″2.jpg″;}

　　if(imglink.getSeconds()< 46){var thisimg=″3.jpg″;}

　　if(imglink.getSeconds()< 39){var thisimg=″4.jpg″;}

　　if(imglink.getSeconds()< 32){var thisimg=″5.jpg″;}

　　if(imglink.getSeconds()< 24){var thisimg=″6.jpg″;}

　　if(imglink.getSeconds()< 17){var thisimg=″7.jpg″;}

　　if(imglink.getSeconds()< 9){var thisimg=″8.jpg″;}

　　document.write(″< img src=″＋thisimg＋″ border=0 alt=″每次打开本页，看到的图片都不同！″ >″);

　　//－－ >

　　< /script >

　　< !随机图片结束 >

　　在这个例子中，设置了8张图片，与网页放置于同一目录下。当浏览器打开此网页时，立即从电脑里读取时间，并根据秒数的不同选择不同的图片。

　　我们也常常埋怨在网页里插入的图片与网页背景不能很好地融合在一起，如果图片周围有一圈朦胧的过渡色该多好！用Photoshop制作图片当然能实现这个效果。其实还有更好的办法：在网页中用 CSS 滤镜来实现！

　　< p style=″line－height:0pt;filter:Glow

(Color=＃FFFFFF,Strength=36);height:auto;position:relative;padding:21pt″ >

　　< img src=https://cache.yisu.com/upload/information/20200703/145/53386.jpg″ border=0 >

　　< /p >

　　其中，“Color=＃FFFFFF”是定义阴影的颜色，“Strength=36”是定义阴影宽度。怎么样，图片是不是有了“月朦胧，鸟朦胧”的感觉？

　　如果你不喜欢“温馨浪漫”的主页类型，这里还有一款“魔幻豪放”派的??

　　在< head >< /head >中加入以下内容：

　　< !开始定义变色函数 >

　　< script language=″Javascript″ >

　　< !－－hide

　　function RandomNumber(max) //定义随机函数

　　{var today=new Date();

　　var num=Math.round((Math.abs(Math.sin(today.getTime()))＊1000))％max＋1;return num;}

　　function makearray(n)

　　{this.length=0;for(var i=1;i< n;i＋＋)this[i]=0;return this;}function changecolor()

　　{clearTimeout();

　　linkarray=new makearray(10); //用linkarray数组定义十种常用颜色

　　linkarray[1]=″＃ff0000″;

　　linkarray[2]=″＃ffff00″;

　　linkarray[3]=″＃00ff00″;

　　linkarray[4]=″＃0000ff″;

　　linkarray[5]=″＃8000ff″;

　　linkarray[6]=″＃ff00ff″;

　　linkarray[7]=″＃004000″;

　　linkarray[8]=″＃808000″;

　　linkarray[9]=″＃ff8000″;

　　linkarray[10]=″＃ff0000″;

　　document.bgColor=(linkarray[RandomNumber(10)]); //利用随机函数从十种颜色中任选一种作为网页背景色

　　setTimeout(″changecolor()″,1000); //设置时钟，让背景色每秒变换一次

　　return;}

　　//－－ >

　　< /script >

　　< !定义变色函数结束 >

　　然后在中调用changecolor()函数即可：< body OnLoad=″javascript:changecolor()″ >

　　网页背景颜色每秒钟变换一次，够酷吧？

　　如果把“document.bgColor=(linkarray[RandomNumber(10)]);”一句中的“bgColor”换成“fgColor”，也能实现网页文字不断地变色。此外，你也可以自己定义变色的时间周期，改变“setTimeout(″changecolor()″,1000);”中的“1000”即可。

到此，相信大家对“怎么用Javascript实现随机图片效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！