1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 8 <style type="text/css"> 9 .bian { 10 100px; 11 height: 50px; 12 line-height: 50px; 13 text-align: center; 14 font-size: 30px; 15 } 16 17 .sp { 18 display: inline-block; 19 cursor: pointer; 20 } 21 </style> 22 </head> 23 24 <body> 25 <div class="bian"> 26 <span class="sp">变色</span> 27 </div> 28 </body> 29 <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> 30 <script> 31 jQuery(function() { 32 33 //给页面创建点击事件 34 $(".sp").mousemove(function() { 35 36 //创建颜色库 37 //随机颜色 38 //创建颜色码 39 const PreColor = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 40 'aa', 'bb', 'cc', 'dd', 'ee', 'ff'); 41 const MediumColor = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 42 'aa', 'bb', 'cc', 'dd', 'ee', 'ff'); 43 const PostColor = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 44 'aa', 'bb', 'cc', 'dd', 'ee', 'ff'); 45 46 //从颜色库选取一种颜色;当然这是数组的方式;随机性 47 var Pre_Color = Math.floor(Math.random() * PreColor.length); 48 var Medium_Color = Math.floor(Math.random() * MediumColor.length); 49 var Post_Color = Math.floor(Math.random() * PostColor.length); 50 51 //给span元素添加css样式 52 $(".sp").css({ 53 "color": "#" + PreColor[Pre_Color] + MediumColor[Medium_Color] + PostColor[Post_Color], 54 }); 55 56 }); 57 $(".sp").mouseleave(function() { 58 $(".sp").css({ 59 "color": "#000", 60 }); 61 }) 62 }) 63 </script> 64 65 </html>