javascript简易画板开发


Posted in Javascript onApril 12, 2020

本文实例为大家分享了制作javascript简易画板的方法,供大家参考,具体内容如下

html:

<body id="bodys">
<span id="eraser">
清除所有
</span>
<span id="colorbtn">
笔画颜色
</span>
<input type="range" name="ram" id="ram" min="1" max="20" step="1" value="10"/>
<label id="ramnum">字体大小:10px</label>
<ul id="colorpanel">
<li>黑色</li>
<li>红色</li>
<li>绿色</li>
<li>蓝色</li>
</ul>
</body>

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("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;
}
}

}

这是基于javascript的事件基础写的,比较简易,其实还可以进一步进行优化。下面来看效果图。

javascript简易画板开发

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 #Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 #Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 #Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 #Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 #Javascript
基于angularJS的表单验证指令介绍
Oct 21 #Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 #Javascript
You might like
php连接数据库代码应用分析
2011/05/29 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
php接口隔离原则实例分析
2019/11/11 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
营销与策划个人求职信
2013/09/22 职场文书
物理教学随笔感言
2014/02/22 职场文书
外国人聘用意向书
2014/04/01 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
python开发人人对战的五子棋小游戏
2022/05/02 Python