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

#直接上效果图：

##说明：需要引入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>

jQuery+js+css实现键盘按键呼吸灯效果相关推荐

如何用css弄个七彩,CSS实现文字七彩呼吸灯动画
CSS实现文字七彩呼吸灯动画 CSS代码(里面渐变颜色可以自己修改) .name{ font-size:50px; background-clip: border-box; -webkit-backg ...
css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
CSS3特效 - 呼吸灯效果
CSS3特效 - 呼吸灯效果 1. 效果图 2. 代码如下 <!DOCTYPE html> <html> <head><meta http-equiv=&qu ...
满屏飞舞的心HTML动画,使用snowfall.jquery.js实现爱心满屏飞的效果
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
用CSS3快速实现呼吸灯效果-案例
呼吸灯效果核心 @keyframes breath {from { opacity: 0.1; } /* 动画开始时的不透明度 */50% { opacity: 1; } /* 动画50% 时的不透 ...
css3实现科技感的呼吸灯效果
呼吸灯效果是一种常见的灯光效果,比如网页的按钮,现实生活中比如电脑的开机按钮. 使用CSS3的animation方法可以实现很多迷人的网页动画特效. 使用CSS3 配合box-shadow即可实现类似 ...
Arduino ESP32利用PWM实现板载LED呼吸灯效果
Arduino ESP32利用PWM实现板载LED呼吸灯效果 LEDC简介 LED控制(LEDC)外围设备主要用于控制LED的强度,尽管它也可以用于生成PWM信号用于其他目的.它具有16个通道,可以生 ...
一个定时器实现IO模拟pwm，呼吸灯效果
以定时器1为例 uchar time1_10ms = 0; uchar time1_100ms = 0; bit IS_10ms = 0; bit IS_100ms = 0; ...
ESP32-C3使用LEDC外设实现呼吸灯效果
这次有一个项目计划使用ESP32-C3来做主控. 根据手册可以知道,ESP32-C3自带一个LED控制器. 这个控制器可以方便的实现呼吸灯效果.那接下来我们盘它. 本次实验使用的板子是安信可的ESP- ...

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

jQuery+js+css实现键盘按键呼吸灯效果相关推荐

最新文章

热门文章