用javaScript来实现一个简易绘图板

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#pos{position: absolute;left:20px;bottom: 20px;}.box{border-radius: 50%;position: absolute;}input{z-index: 1;position: absolute;}#add{left: 0;}#red{left: 50px;}#color{left: 100px;}</style></head><body><input type="button" id="add" value="+" /><input type="button" id="red" value="-" /><input type="color" id="color" /><span id="pos"></span></body><script type="text/javascript">var opos = document.getElementById("pos");var w = h = 10;var c = "black";document.onmousemove = function(eve){var e = eve ? eve : window.event;
//          console.log(e.clientX,e.clientY)var div = document.createElement("div");div.className = "box";div.style.cssText = "left:"+ e.clientX +"px;top:"+ e.clientY +"px;width:"+ w +"px;height:"+ h +"px;background:"+ c +";"document.body.appendChild(div);opos.innerHTML = e.clientX + "，" + e.clientY;}var oAdd = document.getElementById("add")var oRed = document.getElementById("red")var oColor = document.getElementById("color")//       加和减时修改,宽高的全局变量的值oAdd.onclick = function(){w+=5;h+=5;}oRed.onclick = function(){//          要设置最小值,防止不见了if(w <= 5){w = 5;h = 5}else{w-=5;h-=5;}}
//      改颜色时,一定要找准事件，再设置颜色的全局变量oColor.onchange = function(){c = this.value;}</script>
</html>

用js实现建议绘图板相关推荐

JS编程建议——37：推荐使用replace（1）
建议37:推荐使用replace(1) String对象的replace方法包含两个参数,第一个参数表示执行匹配的正则表达式,也可以传递字符串,第二个参数表示准备代替匹配的子字符串,例如,把字符串ht ...
JS编程建议——8：谨慎使用运算符（3）
建议8:谨慎使用运算符(3) 要确保变量a的值为连续运算,可以使用小括号逻辑分隔符强迫4个数值先进行连续运算,然后再赋值. a = (1, 2, 3, 4); alert(a); //4 当使用var ...
JS编程建议——7：小心保留字的误用
建议7:小心保留字的误用 JavaScript语言中定义了很多备用或已经使用的保留字,按首字母顺序列出的保留字. 这些单词中的大多数并没有在语言中使用,但是根据JavaScript语法规则,这些单词是 ...
JS编程建议——42：用好正则表达式静态值
建议42:用好正则表达式静态值正则表达式的静态属性比较特殊,有两个名字:长名(全称)和短名(简称,以美元符号开头表示),详细说明见表2.1. 表2.1 RegExp的静态属性长名短名说明 in ...
JS编程建议——2：正确辨析JavaScript句法中的词、句和段
建议2:正确辨析JavaScript句法中的词.句和段 JavaScript语法包含了合法的JavaScript代码的所有规则和特征,它主要分为词法和句法.词法包括字符编码.名词规则.特殊词规则等.词 ...
JS编程建议——52：建议使用splice删除数组
建议52:建议使用splice删除数组删除数组元素的方法有多种,最简单的方法是利用length属性来截断数组,但这种方法比较笨拙,仅能够截断尾部元素.在JavaScript中,由于数组其实就是对象, ...
JS编程建议——32：使用制表
建议32:使用制表代码所做的事情越少,它的运行速度就越快,因此,避免重复工作很有意义.多次执行相同的任务也在浪费时间.制表法通过缓存先前计算结果为后续计算所使用,避免了重复工作,这使得制表成为递归算 ...
前端进阶-个人笔记-如何写出更好风格的JS代码(JS 代码优化建议)
1. 按强类型风格写代码 JS 是弱类型的,但是写代码的时候不能太随意,写得太随意也体现了编码风格不好.下面分点说明: (1)定义变量的时候要指明类型,告诉 JS 解释器这个变量是什么数据类型的,而不 ...
jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明转载 ...
node 同步js代码-超越昨天的自己系列（5）
超越昨天的自己系列(5) 如果你不清楚什么是node.js,建议google一下.就算你能保证将来的项目中不会使用,也无法保证未来的吹牛谈资中不会涉及. 关于node,前面的文章:摸我 Node.js ...

用js实现建议绘图板

用javaScript来实现一个简易绘图板

用js实现建议绘图板相关推荐

最新文章

热门文章