jQuery+js+css实现键盘按键呼吸灯效果

最新推荐文章于 2022-07-27 15:39:18 发布

Ivan-伊凡

最新推荐文章于 2022-07-27 15:39:18 发布

阅读量549

点赞数

文章标签： javascript jquery css

本文链接：https://blog.csdn.net/weixin_44191211/article/details/125172561

版权

jQuery 呼吸灯数字输入键盘模拟前端开发

关键词由CSDN通过智能技术生成

#直接上效果图：
请添加图片描述
##说明：需要引入jQuery文件，图片地址自选本地即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼吸灯</title>
    <script src="jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        body {
            background-image: url(images/11.jpg);
            color: #fff;
        }

        button {
            cursor: pointer;
        }

        input {
            margin: 60px 0;
            width: 400px;
            height: 40px;
            background-color: pink;
            color: #000;
            border: 1px solid #ccc;
            font-size: 20px;
        }

        #key {
            display: none;
            width: 825px;
            height: 175px;
            background-color: #fcb3a4;
            padding: 2px;
            box-shadow: 2px 3px 8px #000;
        }

        .span {
            display: inline-block;
            margin: 2px;
            width: 46px;
            height: 50px;
            line-height: 50px;
            color: #000;
            text-align: center;
            border: 2px solid #000;
            background-color: pink;
        }

        span:hover {
            background-color: #fff;
            color: #000;
        }

        .del {
            width: 60px;
        }

        .space {
            width: 275px;
        }

        .led {
            margin: 100px 500px;
        }
    </style>

</head>

<body>
    <div class="led">
        数字组: <p></p><br>
        随机数: <p></p><br>
        <input type="text" placeholder="请输入一组数字" value="">
        <button id="ok">确定</button>
        <button id="random">随机一个</button>
        <a href="javascript:;" id="key"></a>
    </div>
</body>
<script>
    var key = $("#key");
    var str = "1234567890abcdefghijklmnopqrstuvwxyz.%";
    var arrStr = str.slice("");
    var input = $("input")
    var ipt = []//input的value属性中转数组;
    var ipt2 = []//数字组数组;
    var ipt3 = []//随机数数组;
    //主逻辑代码块
    $(function () {
        $("input").focus(function () {
            $(key).css("display", "block");
        })
        $("input").blur(function () {
            $(key).css("display", "block");
        })
        //先构建键盘
        keyboard();
        // 绑定键盘点击事件传入input框
        input_board();
        // 点击确定
        $("#ok").click(function () {
            ipt2.push($(input).prop("value"));
            $($("p").eq(0)).html(ipt2.join(","));
            $(input).prop("value", "");
            ipt = [];
        })
        // 点击随机一个
        $("#random").click(function () {
            var m = Math.floor(Math.random() * ipt2.length)
            ipt3.push(ipt2[m]);
            $($("p").eq(1)).html(ipt3.join(","));
        })
    })
    //按键传入input框中
    function input_board() {
        $.each($("a span"), function (i, ele) {
            $(ele).click(function () {
                //呼吸灯效果，设置css中的animate属性
                this.animate(
                    [{ transform: 'scale(1,1)', opacity: '1' },
                    { transform: 'scale(0.85,0.85)', opacity: '1' },
                    { transform: 'scale(1,1)', opacity: '1' },],
                    {
                        duration: 2000,
                        iterations: Infinity,
                    });
                $(this).css({ "background-color": "#fff", "color": "#000" })
                //判断按键功能
                if ($(this).html() == "删除") {
                    ipt.pop();
                    $(input).prop("value", ipt.join(""))
                } else if ($(this).html() == "隐藏") {
                    $("#key").fadeOut();
                } else if ($(this).html() == "空格") {
                    ipt.push(" ");
                    $(input).prop("value", ipt.join(""))
                } else {
                    ipt.push($(this).html());
                    $(input).prop("value", ipt.join(""))
                }
            })

        })
    }
    //动态构建键盘
    function keyboard() {
        for (var i = 0; i < arrStr.length; i++) {
            if (i == 14) {
                key.append("<span class='span del'>" + "删除" + "</span>")
            }
            if (i == 28) {
                key.append("<span class='span del hidden'>" + "隐藏" + "</span>")
            }
            if (i == 37) {
                key.append("<span class='span space'>" + "空格" + "</span>")
            }
            key.append(("<span class='span'>" + arrStr[i] + "</span>"))
        }
    }
</script>

</html>