<style> span{position: absolute;bottom: 20px;left: 30px;} input{position: absolute;z-index: 1;} input:nth-child(1){left: 20px;} input:nth-child(2){left: 60px;} input:nth-child(3){left: 100px;} </style>
<body> <input type="button" value="+" id="btn1"> <input type="button" value="-" id="btn2"> <input type="color" id="color"> <span></span> </body>
<script> var ospan = document.querySelector("span"); // 选择控制元素 var obtn1 = document.getElementById("btn1"); var obtn2 = document.getElementById("btn2"); var ocolor = document.getElementById("color"); // 预制宽高（圆的大小） var w = 5; var h = 5; // 预制颜色 var c = "#000"; document.onmousemove = function(event){ e = event || window.event; // console.log(e.clientX,e.clientY); // 鼠标相对于浏览器 可视区域 的坐标 （不包括滚动距离） ospan.innerHTML = e.clientX +" , " + e.clientY; // 把坐标显示在页面上 // 线由点组成：即创建一个点，写宽高，给圆角，设置背景颜色 var odiv = document.createElement("div"); odiv.style.cssText = "width:"+ w +"px;height:"+ h +"px;border-radius: 50%;background:"+ c +";position: absolute;left:" + e.clientX + "px;" + "top:" + e.clientY + "px"; document.body.appendChild(odiv); // body的快捷选法：document.body; } // 点击+按钮，增加宽高（圆的大小） obtn1.onclick = function(){ w += 5; h += 5; } // 点击-按钮，减小宽高（圆的大小） obtn2.onclick = function(){ if( w<=5 || h<=5 ){ w = 5; h = 5; }else{ w -= 5; h -= 5; } } // 颜色按钮发生改变时，修改颜色值 ocolor.onchange = function(){ // 颜色的改变用change事件（用onclick事件颜色变化永远会慢一步，拿到的颜色是上一步的） // console.log(this.value); // 获取的是当前的颜色值 c = this.value; }
</script>
简易绘图板
猜你喜欢
转载自www.cnblogs.com/wufenfen/p/11795064.html
今日推荐
周排行