Произвольное изменение цвета фона.
<spoiler>
Посмотреть
Код:
<html>
<head>
<title>Изменение цвета фона</title>
<script language="JavaScript">
<!--
function setbackground()
{
window.setTimeout( "setbackground()", 5000); // 5000 milliseconds delay
var index = Math.round(Math.random() * 9);
var ColorValue = "FFFFFF"; // default color - white (index = 0)
if(index == 1)
ColorValue = "FFCCCC"; //peach
if(index == 2)
ColorValue = "CCAFFF"; //violet
if(index == 3)
ColorValue = "A6BEFF"; //lt blue
if(index == 4)
ColorValue = "99FFFF"; //cyan
if(index == 5)
ColorValue = "D5CCBB"; //tan
if(index == 6)
ColorValue = "99FF99"; //lt green
if(index == 7)
ColorValue = "FFFF99"; //lt yellow
if(index == 8)
ColorValue = "FFCC99"; //lt orange
if(index == 9)
ColorValue = "CCCCCC"; //lt grey
document.bgColor=ColorValue;
}
// -->
</script>
<body>
<script language="JavaScript">
<!--
setbackground();
//-->
</script>
</body>
</html><endspoiler>
Изменение цвета фона пользователем
<spoiler>
Посмотреть
Код:
<html> <head> <title>Выбор цвета фона пользователем</title> </head> <body> <form> <select size=4 name=clr onChange="document.bgColor=this.options[this.selectedIndex].value"> <option value="red">red <option value="tan">tan <option value="blue">blue <option value="lime">lime <option value="gold">gold <option value="black" Selected>black <option value="white">white <option value="wheat">wheat <option value="yellow">yellow <option value="tomato">tomato <option value="salmon">salmon <option value="hotpink">hotpink <option value="darkred">dark red <option value="turquoise">turquoise <option value="chocolate">chocolate <option value="deeppink">deep pink <option value="darkkhaki">dark khaki <option value="cadetblue ">cadet blue <option value="aquamarine">aquamarine <option value="springgreen">springgreen <option value="darkslateblue">dark slate <option value="darksalmon">dark salmon <option value="darkgoldenrod">dark goldenrod </select> </form> </body> </html>
<endspoiler>
Изменение цвета фона нажатием на кнопку
<spoiler>
Посмотреть
Код:
<html> <head> <title>Выбор фонового изображения пользователем</title> </head> <body bgcolor="#ffffff"> <form> <input style="background-color:#ff0000" type="button" value="красный" onClick="document.bgColor='ff0000'"> <input style="background-color:#ffff00" type="button" value="желтый" onClick="document.bgColor='ffff00'"> <input style="background-color:#00ff00" type="button" value="зеленый" onClick="document.bgColor='00ff00'"> <input style="background-color: #0000ff" type="button" value="синий" onClick="document.bgColor='0000ff'"> </form> </body> </html>
<endspoiler>
Смена цвета при загрузке страницы
<spoiler>
Посмотреть
Код:
<html>
<head>
<title>Переход одного цвета в другой</title>
</head>
<body>
<script language=JavaScript>
<!--
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}
function setbgColor(r, g, b) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
document.bgColor="#"+hr+hg+hb;
}
function fade(sr, sg, sb, er, eg, eb, step) {
for(var i = 0; i <= step; i++) {
setbgColor(
Math.floor(sr * ((step-i)/step) + er * (i/step)),
Math.floor(sg * ((step-i)/step) + eg * (i/step)),
Math.floor(sb * ((step-i)/step) + eb * (i/step)));
}
}
function fadein() {
fade(200,100,100, 10,0,0, 50);
/fade(первые 3 числа- начальный цвет. следующие 3-конечный цвет. последние- время прехода.) /
}
fadein()
// --></script>
</body>
</html><endspoiler>
Изменение цвета фона в течение суток
<spoiler>
Посмотреть
Код:
<html>
<head>
Изменение цвета фона в течение суток
<title>Изменение цвета фона в течение суток</title>
<script language="JavaScript">
<!--
theTime = new Date();
theHour = theTime.getHours();
if(theHour>6&&theHour<18){
document.write('<body bgcolor="#990066" text="white">');
}
else{
document.write('<body bgcolor="#003399" text="white">');
}
-->
</script>
</head>
<body link="#8000ff" alink="#dc5912" vlink="#9b4e00">
#990066 - фон, который показывается днем.
#003399- фон, который показывается ночью.
</body>
</html><endspoiler>
Выбор фонового рисунка пользователем
<spoiler>
Посмотреть
Код:
<html>
<head>
Выбор фонового рисунка пользователем
<title>Выбор фонового рисунка пользователем</title>
</head>
<style>
.bgimages img {cursor:hand}
</style>
<body>
<script language="JavaScript1.2">
<!--
function tile(){
if (!document.all)
return
var source=event.srcElement
if (source.tagName=="IMG")
document.body.style.backgroundImage="url("+source.src+")"
}
function restore(){
document.body.style.backgroundImage=''
}
//-->
</script>
<span class="bgimages" onClick="tile();event.cancelBubble=true">
<img src="http://superscripts.narod.ru/backgrounds/bl1.jpg"><img src="http://superscripts.narod.ru/backgrounds/blutxtr3.jpg"><img src="http://superscripts.narod.ru/backgrounds/blktxtr1.jpg"><img src="http://superscripts.narod.ru/backgrounds/grytxtr2.jpg">
</span>
</body>
</html><endspoiler>
Необычное появление
<spoiler>
Посмотреть
Код:
<html>
<head>
Необычное появление
<title>Необычное появление</title>
</head>
<body>
<style>
<!--
.intro{
position:absolute;left:0;top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green;}
-->
</style>
<div id="i1" class="intro"></div>
<div id="i2" class="intro"></div>
<div id="i3"class="intro"></div>
<div id="i4" class="intro"></div>
<div id="i5" class="intro"></div>
<div id="i6" class="intro"></div>
<div id="i7" class="intro"></div>
<div id="i8" class="intro"></div>
<script language="JavaScript1.2">
var speed=20
var temp=new Array()
var temp2=new Array()
if (document.layers){
for (i=1;i<=8;i++){
temp[i]=eval("document.i"+i+".clip")
temp2[i]=eval("document.i"+i)
temp[i].width=window.innerWidth/8-0.3
temp[i].height=window.innerHeight
temp2[i].left=(i-1)*temp[i].width
}
}
else if (document.all){
var clipbottom=document.body.offsetHeight,cliptop=0
for (i=1;i<=8;i++)
{
temp[i]=eval("document.all.i"+i+".style")
temp[i].width=document.body.clientWidth/8
temp[i].height=document.body.offsetHeight
temp[i].left=(i-1)*parseInt(temp[i].width)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
temp[i].bottom-=speed
for (i=2;i<=8;i=i+2)
temp[i].top+=speed
if (temp[2].top>window.innerHeight)
clearInterval(stopit)
}
else if (document.all){
clipbottom-=speed
for (i=1;i<=8;i=i+2){
temp[i].clip="rect(0 auto+"+clipbottom+" 0)"
}
cliptop+=speed
for (i=2;i<=8;i=i+2){
temp[i].clip="rect("+cliptop+" auto auto)"
}
if (clipbottom<=0)
clearInterval(stopit)
}
}
function gogo(){stopit=setInterval("openit()",100)
}
gogo()
</script>
</body>
</html><endspoiler>
Падающий снег с возможностья выбора пользователем его количества
<spoiler>
Посмотреть
Код:
<html>
<head>
<title>Падающий снег с возможностья выбора пользователем его количества</title>
</head>
<body onload="if (document.all||document.layers) {start()}" onResize=location.reload()>
<CENTER>
<SCRIPT>
<!--
count = 20;
speed = 1;
snowfall = true;
function start() {
if (document.all) { // IExplorer
yMax = document.body.clientHeight;
xMax = document.body.clientWidth;
}
else if (document.layers) { // Netscape
yMax = window.innerHeight;
xMax = window.innerWidth;
}
xachse = new Array();
for(i = 1; i <=40; i++) {
x = 10000;
do
{ x = Math.round(Math.random() * 10000); }
while(x > xMax-50);
xachse[i] = x;
};
yachse = new Array();
for(i = 1; i <=40; i++) { yachse[i] = - Math.round(Math.random() * 1000); };
show();
movesnow(); }
function movesnow() {
if (snowfall) {
for(i = 1; i <=count; i++)
{
wind = Math.round(Math.random() * 10); // horizontale Bewegung
if (wind == 2) {
if (document.all) { document.all("snow"+i).style.left = xachse[i] + wind; }
else if (document.layers) { document.layers['snow' + i].left = xachse[i] + wind; }
}
if (wind == 1) {
if (document.all) { document.all("snow"+i).style.left = xachse[i] - wind; }
else if (document.layers) { document.layers['snow' + i].left = xachse[i] - wind; }
}
if (document.all) { if (yachse[i] >= yMax-50+document.body.scrollTop) { yachse[i] = - Math.round(Math.random() * 1000); }; }
else if (document.layers) { if (yachse[i] >= yMax-50+pageYOffset) { yachse[i] = - Math.round(Math.random() * 1000); }; }
if ( count >= 30 ) { yachse[i] = yachse[i] + speed + 1; }
else { yachse[i] = yachse[i] + speed; };
if (document.all) { document.all("snow"+i).style.top = yachse[i]; }
else if (document.layers) { document.layers['snow' + i].top = yachse[i]; }
}
setTimeout('movesnow()',10);
}
}
function hide(){
for(i = 1; i <=count; i++)
{
if (document.all) { document.all("snow"+i).style.visibility = "hidden"; }
else if (document.layers) { document.layers['snow' + i].visibility = "hide"; }
}
}
function show(){
for(i = 1; i <=count; i++)
{
if (document.all) { document.all("snow"+i).style.visibility = "visible"; }
else if (document.layers) { document.layers['snow' + i].visibility = "show"; }
}
}
//-->
</script>
<div id='snow1' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow2' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow3' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow4' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow5' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow6' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow7' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow8' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow9' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow10' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow11' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow12' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow13' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow14' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow15' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow16' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow17' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow18' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow19' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow20' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow21' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow22' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow23' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow24' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow25' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow26' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow27' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow28' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow29' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow30' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow31' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow32' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow33' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow34' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow35' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow36' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow37' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow38' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow39' style='position:absolute; z-index:3; font-size:20pt; color:#FFFFFF; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
<div id='snow40' style='position:absolute; z-index:3; font-size:20pt; color:#99ffff; font-family:Times New Roman, Helvetica; visibility:hidden; width:20'>*</div>
С Новым Годом...<br>
<br><a href="#" onClick="snowfall=true;movesnow();show();">start</a>
<a href="#" onClick="snowfall=false">stop</a>
<form name=снежинок>
<select name="snowcount" onChange="hide();count=(options[selectedIndex].value);show();">
<option value="10">снежок</option>
<option value="20" selected>метель</option>
<option value="40">вихрь</option>
</select>
</form>
</center>
</body>
</html><endspoiler>
Фон c падающими сердечками
<spoiler>
Посмотреть
Код:
<html>
<head>
Фон c падающими сердечками
<title>Фон c падающими сердечками</title>
</head>
<body>
<script LANGUAGE="JavaScript">
<!-- Begin
var no = 12; // number of hearts
var speed = 10; // smaller number moves the hearts faster
var heart = "http://superscripts.narod.ru/backgrounds/heart.gif";
var flag;
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
amx = new Array();
amy = new Array();
stx = new Array();
sty = new Array();
flag = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-30)+10; // set position variables
yp[i] = Math.random()*doc_height;
amy[i] = 12+ Math.random()*20; // set amplitude variables
amx[i] = 10+ Math.random()*40;
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
flag[i] = (Math.random()>0.5)?1:0;
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
}
} else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
flag[i]=(Math.random()<0.5)?1:0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}
document.layers["dot"+i].top = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.layers["dot"+i].left = xp[i] + amx[i]*dx[i];
}
setTimeout("snowNS()", speed);
}
function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
flag[i]=(Math.random()<0.5)?1:0;
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}
document.all["dot"+i].style.pixelTop = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.all["dot"+i].style.pixelLeft = xp[i] + amx[i]*dx[i];
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>
</body>
</html><endsopiler>
