• 鼠标划过字体随机变色


     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>
     
  • 相关阅读:
    GORM模型(Model)创建
    GORM高级查询
    LogAgent
    安装kafka
    go读取日志tailf
    bubble清单
    go操作kafka
    GORM模型删除
    Vue 父子组件间的传值
    列表和表格
  • 原文地址:https://www.cnblogs.com/520yh/p/11752288.html
Copyright © 2020-2023  润新知