javascript简易画板开发

html：

清除所有笔画颜色字体大小:10px
黑色
红色
绿色
蓝色

CSS：

*{margin: 0;padding: 0; }.box_black{background-color: black;position: absolute;}.box_red{background-color: red;position: absolute;}.box_green{background-color: green;position: absolute;}.box_blue{background-color: blue;position: absolute;}#eraser{width: 80px;height: 50px;background-color: brown;display: inline-block;text-align: center;line-height: 50px;cursor: pointer;}#colorbtn{width: 80px;height: 50px;background-color: tomato;display: inline-block;text-align: center;line-height: 50px;cursor: pointer;}#colorpanel{width: 80px;height: 200px;list-style: none;margin-left: 88px;display: none;}#colorpanel>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;}

javascript：

window.onload=function(){    //把类名存成一个数组 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("p"); 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
   
这是基于javascript的事件基础写的，比较简易，其实还可以进一步进行优化。下面来看效果图。