JavaScript DHTML/Development/Color
Содержание
Code for the Actual JavaScript Code and Color Selectors
<html>
<head>
<title>Color Definition</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var graf = "<body>";
graf += "<h2><em>header 2</em></h2>";
graf += "<p>text</p>";
graf += "<p>a sample link: <a href="http://www.wbex.ru">www.wbex.ru</a></p>";
graf += "</body>"
function refreshMain() {
var newColor = document.form1.colorList.options[document.form1.colorList.selectedIndex].text
var selProp = null
with(parent.main.document){
open();
write(graf);
if(document.form1.type[0].checked){
bgColor = newColor
}else{
if(document.form1.type[1].checked){
fgColor = newColor;
}else{
if(document.form1.type[2].checked){
alinkColor = newColor;
}else{
if(document.form1.type[3].checked){
linkColor = newColor;
}else if (document.form1.type[4].checked){
vlinkColor = newColor;
}
}
}
}
}
close()
}
//-->
</script>
</head>
<body bgcolor="tomato">
<form name="form1">
<p>
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>
<br>
<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>
<br>
<input type="button" name="Apply" value="Apply" onclick="refreshMain()">
</p>
</form>
</body>
</html>
Color Sampler
<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")"><P>
<TEXTAREA NAME="results" ROWS=3 COLS=20></TEXTAREA><P><HR>
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>
Using Color Attributes: how document colors can be changed
<HTML>
<HEAD>
<TITLE>Changing Colors</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
document.fgColor="white"
document.linkColor="yellow"
// --></SCRIPT>
</HEAD>
<BODY>
<H1>Changing Colors</H1>
<P>Here is a <A HREF="nowhere">sample link</A>.</P>
<SCRIPT LANGUAGE="JavaScript"><!--
document.bgColor="black"
// --></SCRIPT>
</BODY>
</HTML>
Using Colors in JavaScript
<html>
<head>
<title>JavaScript Unleashed</title>
</head>
<body>
<h2>
<script type="text/javascript">
<!--
document.writeln("crimson!".fontcolor("crimson"));
// -->
</script>
</h2>
<h4>
<script type="text/javascript">
<!--
document.writeln("blue".fontcolor("blue"));
document.writeln("<br>" + "#008000".fontcolor("#008000"));
// -->
</script>
</h4></body>
</html>
Using setInterval () to Repeatedly Change the Document Background Color
<HTML>
<HEAD>
<TITLE>Using setInterval()</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2"><!--
colors = new Array("red","orange","green","blue","brown","purple","gray","white")
colorIndex = 0
function changeColor() {
document.bgColor = colors[colorIndex]
colorIndex = (colorIndex + 1) % colors.length
}
function startColorChange() {
setInterval("changeColor()",3000)
}
window.onload = startColorChange
// --></SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<P>The setInterval() repeatedly changes the
document background color every three seconds.</P>
</BODY>
</HTML>