黑色
• 红色
• 绿色
• 蓝色

li{ width: 80px; height: 50px; text-align: center; line-height: 50px; background-color: aquamarine; display: inline-block; cursor: pointer; } #colorpanel>li:hover{ background-color: orange; }

//把类名存成一个数组
var classname=["Box_black","Box_red","Box_green","Box_blue"];
//默认类名为Box_black
var clsname=classname[0];
var oBody=document.getElementById("bodys");
var oDiv=oBody.getElementsByTagName("div");
var eraser=document.getElementById("eraser");
var colorbtn=document.getElementById("colorbtn");
var colorpanel=document.getElementById("colorpanel");
var ram=document.getElementById("ram");
var ramnum=document.getElementById("ramnum");
colorbtn.onmouSEOver=function(){
colorpanel.style.display="block";
}
colorbtn.onmouSEOut=function(){
colorpanel.style.display="none";
}
colorpanel.onmouSEOver=function(){
this.style.display="block";
}
colorpanel.onmouSEOut=function(){
this.style.display="none";
}
for(var i=0;i<colorpanel.children.length;i++){
colorpanel.children[i].index=i;
colorpanel.children[i].onclick=function(){
//鼠标点击li切换类名来改变样式
clsname=classname[this.index];
colorpanel.style.display="none";
}
}
//定义默认字体大小为10px
var WIDTH="10px";
var HEIGHT="10px";
//通过滑动range来改变字体大小
ram.onmousemove=function(){
WIDTH=HEIGHT=ram.value+"px";
ramnum.innerHTML="字体大小:"+WIDTH;
}
//鼠标点击屏幕，通过滑动鼠标不停创建div属性节点，并且给它设置样式
document.onmousedown=function(){
document.onmousemove=function(event){
var oevent=event||window.event;
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollleft=document.documentElement.scrollLeft||document.body.scrollLeft;
var Box=document.createElement("div");
Box.className=clsname;
Box.style.width=WIDTH;
Box.style.height=HEIGHT;
oBody.appendChild(Box);
Box.style.left=scrollleft+oevent.clientX+"px";
Box.style.top=scrolltop+oevent.clientY+"px";
}
}
//当鼠标按键松开，注销鼠标滑动事件
document.onmouseup=function(){
document.onmousemove=null;
}
//当橡皮差按钮被点击，遍历所有div并且把它们一一从父节点里面移除
eraser.onclick=function(){
var oDiv=oBody.getElementsByTagName("div");
for(var i=0;i<oDiv.length;i++){
oBody.removeChild(oDiv[i]);
}
}
//以下为取消按钮的冒泡事件，因为我们点击按钮是不能绘制div的
eraser.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
colorbtn.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
colorpanel.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
ram.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
}

}