鼠标划过字体随机变色 

 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                 width: 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>

 

 
posted @ 2019-10-28 14:54  YH丶浩  阅读(351)  评论(0)    收藏  举报