<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Mouse follows a string of effects </title>
<style type= "Text/css" >
div{
width:30px;
height:30px;
Background: #008000;
Position:absolute;
left:10px;
top:10px;
font-size:18px;
border:1px solid Green;
border-radius:50%;
Color:white;
Text-align:center;
padding:10px;
}
</style>
<script type= "Text/javascript" >
//page load complete before executing
Window.onload = function () {
//Get page div element node
var divarray = document.getElementsByTagName ("div");
Document.onmousemove = function (evt) {
var oevent = evt | | event;
//The first Div always follows the latest position of the mouse
Divarray[0].style.left = oevent.clientx + + "px";
Divarray[0].style.top = oevent.clienty + + "px";
//Background color randomly changes
for (var i = Divarray. Length-1;i > 0;i--) {
//Alternate position "=" for assignment, not for equality
Divarray [i].style.left = divarray[i-1].style.left;
Divarray [i].style.top = Divarray [I-1].style.top;
var rnumber = parseint (Math.random () *255);
var gnumber = parseint (Math.random () *255);
var bnumber = parseint (Math.random () *255);
Divarray[i].style.background = "rgb (" +rnumber+ "," +gnumber+ "," +bnumber+ ")";
}
}
}
</script>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
</body>
Snake, JavaScript, effects, mouse events