俯卧撑鼻尖点按计数器

web前端 55 2周前 (01-19)

在健身爱好者的世界里,一款实用的计数工具能极大提升锻炼体验,俯卧撑鼻尖点按计数器便是这样的存在。它设计巧妙,专为精准记录俯卧撑次数而生。

当你进行俯卧撑训练时,只需将手机浏览器访问计数器页面,放置在鼻子下方位置。每次完成一个标准俯卧撑,鼻尖轻轻点按屏幕,它就能精准记录一次标准动作。这款计数器通过手机就能轻松锻炼,无论是在健身房还是家中,都能轻松使用。而且,它只有一个计数界面,即使是初次使用的人也能迅速上手,刷新页面即可重置。它不仅能帮助你准确了解自己的俯卧撑次数,还能激励你逐步突破自我,增加训练强度。对于追求高效健身的人来说,俯卧撑鼻尖点按计数器无疑是一个得力的小助手。

俯卧撑鼻尖点按计数器,手机访问:https://zbp.toyean.com/fwc.html (建议收藏到手机浏览器书签方便使用,仅限手机端计数)

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俯卧撑鼻尖点按计数器</title>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function(){
            $(document).on('touchstart', function(event) {
                if (event.originalEvent.touches.length === 1) {
                    var count = parseInt($(".count").text());
                    $(".count").text(count + 1);
                }
            });
        });
    </script>
    <style>
        *,body { margin:0; padding:0; }
        body { font-family:"MiSans Light"; }
        .count { width:100%; height:100vh; font-size:50vw; color:#000; font-feature-settings:"tnum"; font-weight:bold; text-align:center; line-height:100vh; -webkit-user-select:none; -moz-user-select:none; user-select:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; }
    </style>
</head>
<body>
    <div class="count">0</div>
</body>
</html>


分享给朋友: