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 读取xml,写入xml 实现代码
Jul 10 Javascript
JS 表单验证大全
Nov 23 Javascript
Js四则运算函数代码
Jul 21 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
Javascript缓存API
Jun 14 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
vue实现搜索过滤效果
May 28 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
基于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
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
详解Django中的form库的使用
2015/07/18 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
教育技术学专业职业规划书
2014/03/03 职场文书
法制宣传月活动方案
2014/05/11 职场文书
2014年会策划方案
2014/05/11 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
羊脂球读书笔记
2015/06/30 职场文书
环保建议书作文500字
2015/09/14 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android