<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");varpreform width and height (size of the circle)//
= W . 5 ;
var H = . 5 ;
// preform color
var C = " # 000 " ;
document.onmousemove = function ( Event ) {
E = Event || window. Event ;
// the console.log (e.clientX, E .clientY); // mouse coordinates relative to the visible region of the browser (not including scrolling distance)
ospan.innerHTML e.clientX + = " & ensp;, & ensp; " + e.clientY; // coordinates displayed on the page
// line composed of dots: the creation of a point, the high write-wide, rounded to set the background color
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 of the quick election law: document.body;
}
// click + button to add width and height (size of the circle)
obtn1.onclick = function(){
w += . 5 ;
H + = . 5 ;
}
// click - button decreases the width and height (size of the circle)
obtn2.onclick = function () {
IF (W <= . 5 || H <= . 5 ) {
W = . 5 ;
H = . 5 ;
} the else {
W - = . 5 ;
H - = . 5 ;
}
}
// when the color of the button changes, modifications color value
ocolor.onchange = function () { // change color with change event (onclick event with a color changes will always be a step behind, to get the color is the last step)
// console.log (this.value);// Get the value of the current color
C = the this .Value;
}
</ Script>