陈尚涵 发表于 2020-7-27 09:04:03

一个测试手速的程序

测试你的手速吧！还是老规矩，我把HTML, CSS和JS放在了同一文件，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试你的手速</title>
    <style type="text/css">
      * {
            padding: 0;
            margin: 0;
      }
    </style>
</head>
<body>
    <div id="main-div">
      <div id="main-div-font">0秒，点击次数0</div>
      <div id="main-div-line"></div>
      <div id="main-div-thing"></div>
    </div>
    <script src="jquery-1.7.2/jquery1.7.2.min.js"></script>
    <script type="text/javascript">
      //初始化变量值
      var speed = 3;
      var mode = true;
      var times = 0;
      var clickTimes = 0;
      var outTime = 60;

      //初始化jquery值
      var $oDiv = $('#main-div');
      var $oDivLine = $('#main-div>#main-div-line');
      var $oDivThing = $('#main-div>#main-div-thing');
      var $oDivFont = $('#main-div>#main-div-font');


      //设置CSS样式表
      $oDivFont.css({position: 'relative', fontSize: '60px', left: '500px', top: '100px'});

      $oDivThing.css({position: 'relative', width: '50px', height: '50px', backgroundColor: 'red', left: '60px', top: '285px', zIndex: '1',});
      $oDivLine.css({position: 'relative', width: '1200px', height: '1px', backgroundColor: '#000', left: '60px', top: '310px',});

      //方便处理的函数
      function setX(x) {
            $oDivThing.css('left', x + 'px');
      }

      function getX() {
            return parseInt($oDivThing.css('left'));
      }

      var timer = setInterval(function () {
            if(times < outTime) {
                if(mode) {
                  if(getX() < 1250) {
                        setX(getX() + speed);
                  }
                  else {
                        mode = false;
                  }
                }
                else {
                  if(getX() > 0) {
                        setX(getX() - speed);
                  }
                  else {
                        mode = true;
                  }
                }
            }
            else {
                clearInterval(timer);
            }
      }, 10);

      var helpTimer = setInterval(function () {
            if(times >= outTime) {
                clearInterval(helpTimer);
            }
            else {
                times++;
            }

      }, 1000)

      setInterval(function () {
            if(!(times > outTime)) {
                $oDivFont.html(times + '秒，点击次数' + clickTimes);
            }

      }, 1)

      $oDivThing.on('click', function () {
            if(!(times >= outTime)) {
                clickTimes++;
            }
      });

    </script>
</body>
</html>

我的手速最高130次，你们呢{:10_256:}{:10_256:}

zltzlt 发表于 2020-7-27 09:43:30

怎么玩{:10_277:}

乘号 发表于 2020-7-27 11:18:57

？？？
怎么玩{:10_277:}

weiter 发表于 2020-7-27 18:55:16

？？？
？？？
怎么玩{:10_277:}

陈尚涵 发表于 2020-7-27 20:53:07

就是一直点那个黑色的东东 ，1分钟看你能点几次{:10_256:}{:10_256:}{:10_256:}
页: [1]
查看完整版本: 一个测试手速的程序