作者在 2011-01-02 11:33:26 发布以下内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dynamic Update</title>
<html>
<head>
<title>Dynamic Update</title>
<style type="text/css">
h1 {
font:bold 15px/19px Georgia, serif;
}
p {margin:0;}
span#colorselections a {
border:2px solid #fff;
margin-right:4px;
display:block;
float:left;
}
a img {
border:1px solid #fff;
width:22px;
height:22px;
}
span#colorselections a.on {
border:2px solid #d5680d;
}
p#previewer {
margin:26px 0 20px 0;
padding:6px;
clear:left;
font:bold 19px/25px Verdana;
border:1px solid #ccc;
width:80%;
}
</style>
h1 {
font:bold 15px/19px Georgia, serif;
}
p {margin:0;}
span#colorselections a {
border:2px solid #fff;
margin-right:4px;
display:block;
float:left;
}
a img {
border:1px solid #fff;
width:22px;
height:22px;
}
span#colorselections a.on {
border:2px solid #d5680d;
}
p#previewer {
margin:26px 0 20px 0;
padding:6px;
clear:left;
font:bold 19px/25px Verdana;
border:1px solid #ccc;
width:80%;
}
</style>
<script type="text/javascript">
// generic window.onload function
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
// this function inserts the text into the target paragraph tag
function updatePreview() {
var previewer = document.getElementById('previewer');
var inputtxt = document.getElementById('inputText');
previewer.firstChild.nodeValue=inputtxt.value;
}
// this function attaches the onkeyup event to the text input
function setText() {
var inputtxt = document.getElementById("inputText");
inputtxt.onkeyup = function() {
updatePreview();
}
}
addLoadEvent(setText);
// this function changes the color of the text
function updateTextColor(txtcolor) {
var txt = document.getElementById('previewer');
txt.style.color = txtcolor;
return false;
}
// this function helps with the orange border around the 'on' color in the list
function clearColorSelections() {
var colors = document.getElementById("colorselections");
var choices = colors.getElementsByTagName("a");
for (var i=0;i<choices.length;i++)
{
choices[i].className="";
}
}
// this function takes whatever color you've chosen, and passes it to the
// updateTextColor function.
function setColor() {
var colorselection = document.getElementById("colorselections");
var links = colorselection.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
clearColorSelections();
updateTextColor(this.style.backgroundColor);
this.className = "on";
return false;
}
}
}
addLoadEvent(setColor);
</script>
</head>
<body>
// generic window.onload function
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
// this function inserts the text into the target paragraph tag
function updatePreview() {
var previewer = document.getElementById('previewer');
var inputtxt = document.getElementById('inputText');
previewer.firstChild.nodeValue=inputtxt.value;
}
// this function attaches the onkeyup event to the text input
function setText() {
var inputtxt = document.getElementById("inputText");
inputtxt.onkeyup = function() {
updatePreview();
}
}
addLoadEvent(setText);
// this function changes the color of the text
function updateTextColor(txtcolor) {
var txt = document.getElementById('previewer');
txt.style.color = txtcolor;
return false;
}
// this function helps with the orange border around the 'on' color in the list
function clearColorSelections() {
var colors = document.getElementById("colorselections");
var choices = colors.getElementsByTagName("a");
for (var i=0;i<choices.length;i++)
{
choices[i].className="";
}
}
// this function takes whatever color you've chosen, and passes it to the
// updateTextColor function.
function setColor() {
var colorselection = document.getElementById("colorselections");
var links = colorselection.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
clearColorSelections();
updateTextColor(this.style.backgroundColor);
this.className = "on";
return false;
}
}
}
addLoadEvent(setColor);
</script>
</head>
<body>
<h1>输入字符</h1>
<p>
<input
type="text"
id="inputText"
name="inputText"
value="Sample Text to Type" />
</p>
<h1 style="margin-top:16px;">Choose a color</h1>
<p>
<span id="colorselections">
<a href="#" style="background-color:#000000;" class="on">
<img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Black" />
</a>
<a href="#" style="background-color:#003399;" class="">
<img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Light Blue" />
</a>
<a href="#" style="background-color:#5E5E5E;" class="">
<img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Medium Gray" />
</a>
<a href="#" style="background-color:#00524E;" class="">
<img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Dark Teal" />
</a>
<a href="#" style="background-color:#258B86;" class="">
<img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Light Teal" />
</a>
<a href="#" style="background-color:#DA7E33;" class="">
<img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Orange" /></a>
<a href="#" style="background-color:#198541;" class="">
<img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Green" />
</a>
</span>
</p>
<br clear="all" />
<p id="previewer" style="color:#000000;">Sample Text to Type</p>
</body>
</html>
</html>