In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article mainly explains "how to use Javascript to achieve random picture effect", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to use Javascript to achieve random picture effect"!
Many netizens asked me on E-mail: "Why do you see different pictures every time I go to your home page? do you change pictures all the time?" Oh, my God, how can I have that kind of money to pay for the phone? I just used Javascript's little trick to make a "random picture". Its HTML source code is:
< !随机图片开始 > < 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″;} [xss_clean](″< img src=″+thisimg+″ border=0 alt=″每次打开本页,看到的图片都不同!″ >")
/ /-- >
< /script > < !随机图片结束 >In this example, eight images are set up and placed in the same directory as the web page. When the browser opens this page, it immediately reads the time from the computer and selects different pictures according to the number of seconds.
We also often complain that the picture inserted in the page and the background of the page can not be well integrated. It would be nice if there were a circle of hazy transition colors around the picture. Making pictures with Photoshop can certainly achieve this effect. In fact, there is a better way: in the web page with CSS filter to achieve!
< 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 >Where "Color=#FFFFFF" is the color that defines the shadow and "Strength=36" is the width of the shadow. So, does the picture have the feeling of "moon hazy, bird hazy"?
If you don't like the "warm and romantic" home page type, there is also a "magical and unrestrained" pie.
In
< head > < /head >Add the following to the
< !开始定义变色函数 > < 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 > < !定义变色函数结束 >Then call the changecolor () function in:
< body OnLoad=″javascript:changecolor()″ >Isn't it cool to change the background color of a web page every second?
If you replace "bgColor" in "document.bgColor= [RandomNumber (10)];" with "fgColor", you can also realize the continuous discoloration of web page text. In addition, you can also define the time period of discoloration and change the "1000" in "setTimeout (" changecolor () ", 1000).
At this point, I believe you have a deeper understanding of "how to use Javascript to achieve random picture effects". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.