jQuery 带加减按钮的数字输入框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>带加减按钮的数字输入框</title> 6 <meta name="keywords" content="ttt"> 7 <meta name="description" content="aaa"> 8 <script type="text/javascript" src="https://mydarling.gitee.io/resource/jQuery/jquery-1.9.1.min.js"></script> 9 <style type="text/css"> 10 body{ 11 margin: 0; 12 padding: 0; 13 font-size: 14px; 14 font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif; 15 letter-spacing: 0; 16 } 17 ol{ 18 margin: 0; 19 padding: 20px 0 20px 30px; 20 } 21 ol>li{ 22 margin: 0 0 10px 0; 23 } 24 .number-box{ 25 border: #e5e5e5 solid 1px; 26 display: inline-block; 27 overflow: hidden; 28 } 29 .number-box input[type='text']{ 30 height: 30px; 31 border-top: none; 32 border-bottom: none; 33 border-left:#e5e5e5 solid 1px; 34 border-right:#e5e5e5 solid 1px; 35 margin: 0; 36 text-align: center; 37 width: 40px; 38 outline:none; 39 padding: 0 5px; 40 float: left; 41 line-height: 30px; 42 } 43 .number-box input[type='button']{ 44 height: 30px; 45 width: 40px; 46 float: left; 47 border: none; 48 outline:none; 49 background-color: #f3f3f3; 50 line-height: 30px; 51 cursor: pointer; 52 padding: 0; 53 } 54 .number-box input[type='button']:hover{ 55 background-color: #f9f9f9; 56 } 57 .number-box input[type='button']:active{ 58 background-color: #f6f6f6; 59 } 60 </style> 61 </head> 62 <body> 63 <ol> 64 <li> 65 <div class="number-box"> 66 <input type="button" class="on-number" value="-" data-v="-1"> 67 <input type="text" value="0"> 68 <input type="button" class="on-number" value="+" data-v="1"> 69 </div> 70 </li> 71 <li> 72 <div class="number-box"> 73 <input type="button" class="on-number" value="-" data-v="-1"> 74 <input type="text" value="-2"> 75 <input type="button" class="on-number" value="+" data-v="1"> 76 </div> 77 </li> 78 <li> 79 <div class="number-box"> 80 <input type="button" class="on-number" value="-" data-v="-1"> 81 <input type="text" value="9"> 82 <input type="button" class="on-number" value="+" data-v="1"> 83 </div> 84 </li> 85 </ol> 86 <script type="text/javascript"> 87 $(document.documentElement).on("click",".on-number",function () { 88 var $val=$(this).siblings("input[type='text']"), 89 val=parseInt($val.val(),10)+parseInt($(this).data("v")); 90 $val.val(isNaN(val) ? 0 : val); 91 }); 92 </script> 93 </body> 94 </html>
分类:
Jquery
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
2017-04-12 C# 进程间通信(共享内存)