Home >Web Front-end >JS Tutorial >Organizing common special effects codes for web pages_JavaScript
Advanced Chapter
1. Display different greetings in different time periods
<Script Language="JavaScript">
<!--
var text=""; day = new Date( ); time = day.getHours( );
if (( time>=0) && (time < 7))
text="Night owls, please pay attention to your health! " ))
Text="The sun is so bright today, where is your friend?"
if (( time >= 12) && (time < 14))
text="Lunch break. You want Keep sleeping! "
if (( time >=14) && (time < 18))
text=" I wish you a happy afternoon at work! "
if ((time >= 18) && (time <= 22))
Text="You're here again, don't chat with MM for too long!"
if ((time >= 22) && (time < 24))
text=" You should rest! "
document.write(text)
//--->
</Script>
2. Reflection effect in water
<img id="reflect" src="your own image file name" width="175" height="59">
<script language="JavaScript">
Function f1()
{
setInterval("mdiv.filters.wave.phase =10",100);
}
if (document.all)
{
document .write('<img id=mdiv src="' document.all.reflect.src '"
style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur( ) flipv()">')
window.onload=f1
}
</script>
3. Slowly growing window
<Script Language="JavaScript">
<!--
var Windowsheight=100
var Windowswidth=100
var numx=5
Function openwindow(thelocation){
temploc=thelocation
if
(!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById))
{
window.open( thelocation)
return
}
windowsize=window.open("","","scrollbars")
windowsize.moveTo(0,0)
windowsize.resizeTo(100,100)
tenumxt()
}
function tenumxt(){
if (Windowsheight>=screen.availHeight-3)
numx=0
windowsize.resizeBy(5,numx)
Windowsheight =5
Windowswidth =5
if (Windowswidth>=screen.width-5)
{
windowsize.location=temploc
Windowsheight=100
Windowswidth=100
numx=5
return
}
setTimeout("tenumxt()",50)
}
//-->
</script>
<p> <a href="javascript:openwindow('http://www.ccjol.com')">Enter</a>
4. Change the IE icon in the IE address bar
We need to first make a 16*16 icon (icon file) and save it as index.ico.Upload this icon file to the root directory and add the following code between the home page<head></head>:
<link REL = "Shortcut Icon" href="index.ico">
5. Let the webpage go back at will
<a href="javascript:history.go(-X)">X</a> //Replace X with the number of pages you want to go back
//Put “-” changes to “ ” to move forward
6. An information box pops up when the mouse points to it
Add the following code between