简易绘图板
<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>