<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 = ""+ 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>