鱼C论坛

 找回密码
 立即注册
查看: 2209|回复: 4

[作品展示] 一个测试手速的程序

[复制链接]
发表于 2020-7-27 09:04:03 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>测试你的手速</title>
  7.     <style type="text/css">
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="main-div">
  16.         <div id="main-div-font">0秒,点击次数0</div>
  17.         <div id="main-div-line"></div>
  18.         <div id="main-div-thing"></div>
  19.     </div>
  20.     <script src="jquery-1.7.2/jquery1.7.2.min.js"></script>
  21.     <script type="text/javascript">
  22.         //初始化变量值
  23.         var speed = 3;
  24.         var mode = true;
  25.         var times = 0;
  26.         var clickTimes = 0;
  27.         var outTime = 60;

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


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

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

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

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

  44.         var timer = setInterval(function () {
  45.             if(times < outTime) {
  46.                 if(mode) {
  47.                     if(getX() < 1250) {
  48.                         setX(getX() + speed);
  49.                     }
  50.                     else {
  51.                         mode = false;
  52.                     }
  53.                 }
  54.                 else {
  55.                     if(getX() > 0) {
  56.                         setX(getX() - speed);
  57.                     }
  58.                     else {
  59.                         mode = true;
  60.                     }
  61.                 }
  62.             }
  63.             else {
  64.                 clearInterval(timer);
  65.             }
  66.         }, 10);

  67.         var helpTimer = setInterval(function () {
  68.             if(times >= outTime) {
  69.                 clearInterval(helpTimer);
  70.             }
  71.             else {
  72.                 times++;
  73.             }

  74.         }, 1000)

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

  79.         }, 1)

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

  85.     </script>
  86. </body>
  87. </html>
复制代码


我的手速最高130次,你们呢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-7-27 09:43:30 | 显示全部楼层
怎么玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-7-27 11:18:57 | 显示全部楼层
???
怎么玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-7-27 18:55:16 | 显示全部楼层
???
???
怎么玩
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-7-27 20:53:07 | 显示全部楼层
就是一直点那个黑色的东东 ,1分钟看你能点几次
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 0 反对 1

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 05:53

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表