本文实例为大家分享了制作爪哇岛描述语言简易画板的方法，供大家参考，具体内容如下

html:

body id=' bodys 'span id='橡皮擦'清除所有/spanspan id='colorbtn '笔画颜色/span put type=' range ' name=' ram ' id=' ram ' min=' 1 ' max=' 20 ' step=' 1 ' value=' 10 '/label id=' ram num '字体大小：10 px/label lul id='彩色面板'李黑色/莉莉红色/莉莉绿色/莉莉蓝色/li/ul/bodyCSS:

* { margin : 0；padd : 0；}.box _ black {底色：黑色；绝对位置：}.box _ red {背景色：红色；绝对位置：}.box _ green {背景色：绿色；绝对位置：}.box _ blue {背景色：蓝色；绝对位置：} #橡皮擦{ width: 80px高度： 50px背景-颜色：棕色；显示器：内联块；文本对齐：中心；线高： 50px光标：指针；} # colorbtn { width: 80px高度： 50px背景-颜色：番茄；显示器：内联块；文本对齐：中心；线高： 50px光标：指针；} # colorpanel { width: 80px高度： 200像素；列表样式：无；左边距left: 88pxdisplay:无；} # colorpanelli { width: 80px高度： 50px文本对齐：中心；线高： 50px背景-颜色：海蓝宝石；显示器：内联块；光标：指针；} #颜色面板李：悬停{底色：橙色；}javascript:

window.onload=function(){ //把类名存成一个数组var name=[' box _ black '，' box_red '，' box_green '，' box _ blue ']；//默认类名为box _ black var cls name=类名[0]；var oBody=document。getelementbyid(' body s ')；var Odiv=Obody。GetElementsBytagname(' div ')；定义变量橡皮擦=document.getElementById('橡皮擦');var colorbtn=文档。getelementbyid(' colorbtn ')；var颜色面板=文档。getelementbyid('颜色面板')；var ram=文档。getelementbyid(' ram ')；var ram num=文档。getelementbyid(' ram num ')；colorbtn。onmouseover=function(){ color panel。风格。display=' block}彩色BTN。onmouseout=function(){ color panel。风格。显示='无'；}彩色面板。onmouseover=function(){ this。风格。display=' block}彩色面板。onmouseout=function(){ this。风格。显示='无'；} for(var I=0；icolor面板。孩子们。长度；i ){ colorpanel.children[i].索引=我；colorpanel.children[i].onclick=function(){ //鼠标点击里切换类名来改变样式cls名称=类名[this。索引]；彩色面板。风格。显示='无'；} } //定义默认字体大小为10px var WIDTH=' 10pxvar HEIGHT=' 10px//通过滑动范围来改变字体大小拉姆。onmousemove=function(){ WIDTH=HEIGHT=ram。值“px”；' ramnum.innerHTML='字体大小： ' WIDTH} //鼠标点击屏幕，通过滑动鼠标不停创建差异属性节点，并且给它设置样式文件。onmousedown=function(){ document。onmousemove=function(event){ var oevent=event | | window。事件；var滚动顶部=文档。文档元素。向上滚动| |文档。尸体。滚动顶部；var向左滚动=文档。文档元素。向左滚动| |文档。尸体。向左滚动；var box=文档。创建元素(' div ')；盒子。类名=cls名称；盒子。风格。WIDTH=WIDTH盒子。风格。HEIGHT=HEIGHToBody.appendChild(框);盒子。风格。left=向左滚动oevent。clientx ' px盒子。风格。top=滚动顶部oevent。client y“px”；}}//当鼠标按键松开，注销鼠标滑动事件文件。onmouseup=function(){ document。onmousemove=null}//当橡皮差按钮被点击，遍历所有差异并且把它们一一从父节点里面移除橡皮擦。onclick=function(){ var Odiv=obody。getelementsbytagname(' div ')；for(var I=0；碘长度；I){ Obody。移除子对象(Odiv[I])；}}//以下为取消按钮的冒泡事件，因为我们点击按钮是不能绘制差异的橡皮擦。onmousedown=function(event){ var ievent=event | | window。事件；ievent . cancelubble=true } color BTN。onmousedown=function(event){ var ievent=event | | window。事件；ievent.cancelBubble=true }颜色面板。onmousedown=function(event){ var ievent=event | | window。事件；ievent.cancelBubble=true } ram。onmousedown=function(event){ var ievent=event | | window。事件；ievent.cancelBubble=true } } }这是基于爪哇岛描述语言的事件基础写的，比较简易，其实还可以进一步进行优化。下面来看效果图。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。