js做变换颜色(内含css画圆)-优快云博客

代码如下：

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
input{font-size:20;}
.main_box{border:2 solid dimgray; background-color:black; width:400; overflow:auto;}
.button{border:3 solid lightgray; background-color:F0F0F0; width:75; height:25; margin:20 0 0 300; border-radius:5px; padding:3 0 0 0;}
.circle{
border:5 sandybrown solid;
width: 100px;
height: 100px;
background-color: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.circle-s{
border:5 sandybrown solid;
width: 50px;
height: 50px;
background-color: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.circle-t{
border:5 sandybrown solid;
width: 80px;
height: 80px;
background-color: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

.circle-f{
width: 15px;
height: 15px;
border: 1 solid black;
background-color: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin:0 0 0 5;
}
</style>
</head>

<body>

<div class="main_box">

<input type="text" readonly value="" id="showfont" style="border:2 solid F0F0F0; margin:10 0 0 10; width:95%; height:40;" />

<div class="button">

<table>
<td><div class="circle-f" οnclick="changecolor()" id="button-color"></div></td>
<td><div class="circle-f" οnclick="changeothers()" style="margin:0 0 0 20;" id="button-color-s"></div></td>
</table>

</div>

<div class="circle" style="margin:20 0 0 100;" id="circle-color"></div>
<div class="circle-s" style="margin:10 0 0 20;" id="circle-color-s"></div>
<div class="circle" style="margin:20 0 0 150;" id="circle-color-t"></div>
<div class="circle-t" style="margin:10 0 0 50;" id="circle-color-f"></div>

<br />

</div>

<script>
function _chgcolor(sID, sColor){
document.getElementById(sID).style.backgroundColor=sColor;
}

function changecolor(){
_chgcolor("circle-color", "yellow");
_chgcolor("circle-color-f", "yellow");
_chgcolor("button-color", "black");
_chgcolor("circle-color-s", "white");
_chgcolor("circle-color-t", "white");
_chgcolor("button-color-s", "white");

var showfont = document.getElementById("showfont").value ="<T_T>";
}

function changeothers(){
_chgcolor("circle-color-s", "yellow");
_chgcolor("circle-color-t", "yellow");
_chgcolor("button-color-s", "black");
_chgcolor("circle-color", "white");
_chgcolor("circle-color-f", "white");
_chgcolor("button-color", "white");

var showfonts = document.getElementById("showfont").value ="<^_^>";
}
</script>

<script type="text/javascript">
window.οnlοad=function(){
var items=document.getElementsByTagName("p");
for(var i=0;i<items.length;i++){
var value=items[i].firstChild.nodeValue;
alert(value);
}
}
</script>

</body>
</html>