#直接上效果图：
##说明：需要引入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>
