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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
Vue3 源码导读(推荐)
Oct 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
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
在Python中处理时间之clock()方法的使用
2015/05/22 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
大二学生职业生涯规划书
2014/02/05 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
书香家庭事迹材料
2014/05/09 职场文书
历史学专业求职信
2014/06/19 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
离职告别感言
2015/08/04 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python