帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» HTML5超简单的手速反应测试器
HTML5超简单的手速反应测试器
浏览:1084次
-
评论:0次
-
发布时间:2018-09-23
Html
Css
Js
重置
0
.chongzhi { background-color:red; width:50px; color:#fff; height:30px; border-radius:10px; border:none; margin-bottom:5px; } .demo { width:50px; margin:0 auto; text-align:center; height:100px; } .time { width:100%; border-radius:50%; height:50px; text-align:center; border:1px red solid; color:red; } .div { width:100px; height:100px; background-color:red; margin:0 auto; text-align:center; line-height:100px; color:#fff; border-radius:50%; }
//请在本段代码请引用jq,否则代码无效! $('.div').click(function() { var time = $('.time').val() if (time > 0) { $('.time').attr("disabled", true) $('.chongzhi').attr("disabled", true) var shu = parseInt($(this).text()) + 1 $(this).html(shu) var height = jQuery(window).height() - 100 //获取当前浏览器高度,减去容器高度 var widht = $(window).width() - 100 //获取当前浏览器宽度,减去容器宽度 var le = parseInt(Math.random() * (widht - 0 + 1) + 0); //获取随机数 var to = parseInt(Math.random() * (height - 100 + 1) + 100); //获取随机数,高度减去功能区高度 $(this).css({ 'position': 'absolute', 'left': le, 'top': to }) var time = parseInt(time); if (shu <= 1) { times(time, time) } } if (time == "") { alert("请填入时间") } }) function times(time, timeq) { //倒计时 setTimeout(function() { time = time - 1 $('.time').val(time) $('.chongzhi').click(function() { $('.div').html('0') $('.div').css({ 'position': '', 'left': '', 'top': '' }) $('.time').val(timeq) }) if (time == 0) { var ci = parseInt($('.div').text()) alert('您在' + timeq + '秒内点击了' + ci + '次') $('.time').attr("disabled", false) $('.chongzhi').attr("disabled", false) return false } text(time, timeq) //执行text事件 }, 1000); } function text(time, timeq) { times(time, timeq) //执行time事件 }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>HTML5超简单的手速反应测试器-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:html5超简单的手速反应测试器
填入时间(单位/秒)即可实现手速和反应的测试
超级简单的jQuery tab切换
jQuery实现简单的分页效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1084
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值