JavaScript 躲猫猫

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>躲猫猫</title>
  <style>


  
        #maomao {
                   position: fixed;
                   bottom: 40px;
                   right: -5px;
                   width: 57px;
                   height: 70px;
                   background-image: url(https://cdn.jsdelivr.net/gh/muzihuaner/huancdn/img/20210808215127.svg);
                   background-position: center;
                   background-size: cover;
                   background-repeat: no-repeat;
                   transition: background .3s;
               }
        
               #maomao:hover {
                   background-position: 60px 50%;
               }
        @font-face { font-family: TencentSans; src: url("chrome-extension://lkjkfecdnfjopaeaibboihfkmhdjmanm/static/fonts/TencentSans.woff2"); }
    </style>
</head>

<body>
    <div id="maomao" onmouseout="duoMaomao()"></div>

<div id="transmart-crx-shadow-root" style="all: initial;"></div>

    <script>
        var randomNum = function(minNum, maxNum) {
                   switch(arguments.length){
                       case 1:
                           return parseInt(Math.random() * minNum + 1, 10);
                           break;
                       case 2:
                           return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                           break;
                       default:
                           return 0;
                           break;
                   }
               }
               var duoMaomao = function () {
                   var maomao = $('#maomao');
                   maomao.css('bottom', randomNum(5, 80) + 'vh');
               }
        
    </script>


</body>
</html>