JavaScript DHTML/Development/Color
Содержание
Code for the Actual JavaScript Code and Color Selectors
<source lang="html4strict">
<html> <head>
<title>Color Definition</title> <SCRIPT LANGUAGE="JavaScript"> </script>
</head>
<body bgcolor="tomato">
<form name="form1">
Select Color:
<select name="colorList" size="1">
<option>black</option>
<option>blue</option>
<option>brown</option>
<option>cyan</option>
<option>gold</option>
<option>gray</option>
<option>green</option>
<option>indigo</option>
<option>lavender</option>
<option>lime</option>
<option>maroon</option>
<option>navy</option>
<option>olive</option>
<option>orange</option>
<option>pink</option>
<option>purple</option>
<option>red</option>
<option>royalblue</option>
<option>silver</option>
<option>slategray</option>
<option>tan</option>
<option>teal</option>
<option>turquoise</option>
<option>violet</option>
<option>white</option>
<option>yellow</option>
</select>
<input type="radio" name="type" value="bgColor" checked>Background</input>
<input type="radio" name="type" value="fgColor">Foreground</input>
<input type="radio" name="type" value="alinkColor">Activated Link</input>
<input type="radio" name="type" value="linkColor">Unvisted Link</input>
<input type="radio" name="type" value="vlinkColor">Visited Link</input>
<input type="button" name="Apply" value="Apply" onclick="refreshMain()">
</form>
</body> </html>
</source>
Color Sampler
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Color Me</TITLE> <SCRIPT LANGUAGE="JavaScript"> var newWindow = window.open("","","height=150,width=300") function defaultColors() {
return "BGCOLOR="#c0c0c0" VLINK="#551a8b" LINK="#0000ff""
} function uglyColors() {
return "BGCOLOR="yellow" VLINK="green" LINK="red""
} function showColorValues() {
var result = "" result += "bgColor: " + newWindow.document.bgColor + "\n" result += "vlinkColor: " + newWindow.document.vlinkColor + "\n" result += "linkColor: " + newWindow.document.linkColor + "\n" document.forms[0].results.value = result
} function drawPage(colorStyle) {
var thePage = "" thePage += "<HTML><HEAD><TITLE>Color Sampler</TITLE></HEAD><BODY " if (colorStyle == "default") { thePage += defaultColors() } else { thePage += uglyColors() } thePage += ">Just so you can see the variety of items and color, <A " thePage += "HREF="http://www.wbex.ru">here\"s a link</A>" newWindow.document.write(thePage) newWindow.document.close() showColorValues()
} function setColors(colorStyle) {
if (colorStyle == "default") { document.bgColor = "#c0c0c0" } else { document.bgColor = "yellow" }
} </SCRIPT> </HEAD> <BODY> Try the two color schemes on the document in the small window. <FORM> <INPUT TYPE="button" NAME="default" VALUE="Default Colors" onClick="drawPage("default")">
<INPUT TYPE="button" NAME="weird" VALUE="Ugly Colors" onClick="drawPage("ugly")"><TEXTAREA NAME="results" ROWS=3 COLS=20></TEXTAREA><P>
These buttons change the current document, but not correctly on all platforms<P> <INPUT TYPE="button" NAME="default" VALUE="Default Colors" onClick="setColors("default")"> <INPUT TYPE="button" NAME="weird" VALUE="Ugly Colors" onClick="setColors("ugly")"><P> </FORM> <SCRIPT LANGUAGE="JavaScript"> drawPage("default") </SCRIPT> </BODY> </HTML>
</source>
Using Color Attributes: how document colors can be changed
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Changing Colors</TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY>
Changing Colors
<P>Here is a <A HREF="nowhere">sample link</A>.<SCRIPT LANGUAGE="JavaScript"></SCRIPT> </BODY> </HTML>
</source>
Using Colors in JavaScript
<source lang="html4strict">
<html> <head>
<title>JavaScript Unleashed</title>
</head> <body>
<script type="text/javascript"> </script>
<script type="text/javascript"> </script>
</body></html>
</source>
Using setInterval () to Repeatedly Change the Document Background Color
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Using setInterval()</TITLE> <SCRIPT LANGUAGE="JavaScript1.2"></SCRIPT> </HEAD> <BODY BGCOLOR="white">
The setInterval() repeatedly changes the document background color every three seconds.
</BODY> </HTML>
</source>