颜色变换 JavaScript 练习【每日一段代码1】

<html>
<head>
<title>变换颜色</title>
<style type="text/css">
body{
font-size:12px;
font-family:微软雅黑;
}
form{
padding:0px;
margin:0px;
}
input{
border:#06F solid 1px;
width:40px;
height:20px;
}
.btn{
width:55px;
height:20px;
}
span{
font-size:36px;
font-family:宋体;
font-weight:bold;
}

</style>
<script type="text/javascript">
function changeColor(){
var red = document.formcolor.red.value;
var green = document.formcolor.green.value;
var blue = document.formcolor.blue.value;
var obj = document.getElementById("text");
obj.style.color="#"+red+green+blue;
}
</script>
</head>

<body>
<form name="formcolor">
R:<input name="red" maxlength="2" />
G:<input name="green" maxlength="2" />
B:<input name="blue" maxlength="2" />
&nbsp;<input type="button" onClick="changeColor()" value="变颜色" class="btn" />
</form><br />
<span id="text">变换文字颜色</span>
</body>
</html>

显示图像如下

 

【自学JavaScript，还不知怎么用力。先从练习小程序开始。很简单，大牛勿扰。代码实现的功能是，文本框输入颜色值，点击“变颜色”按钮，下面文字实现变色。闲话一句：想学程序，处世需要有一技之长，从今天开始每天练习一段代码，并发表在博客园。】

posted on 2012-01-15 20:57  Cosimo  阅读(393)  评论(2)    收藏  举报

导航