jquery实现网页自动添加必填项图标和日期自动填充

最新推荐文章于 2021-03-31 20:50:45 发布
最新推荐文章于 2021-03-31 20:50:45 发布
阅读量1.2k 收藏
点赞数
分类专栏： java web
  1. <html>  
  2. <head>  
  3. <script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>  
  4. <script type="text/javascript">  
  5. $(function(){  
  6.     //如果是必填的，则加红星标识.  
  7.     $("form label.required").each(function(){  
  8.         var $required = $('<font color="red">*</font>'); //创建元素  
  9.         $(this).after($required); //然后将它追加到文档中  
  10.     });  
  11.       
  12.     //自动填充日期,addDay 日加，addMonth 月加，addYear 年加  
  13.     $("input.autoFillDate").each(function(i){  
  14.         $(this).val(autoFillDate($(this).attr("addYear"),$(this).attr("addMonth"),$(this).attr("addDay")));  
  15.     });  
  16. });  
  17.   
  18. //自动填充日期  
  19. function autoFillDate(year,month,day){  
  20.     var myDate= new Date();  
  21.     if(year){  
  22.         myDate.setFullYear(myDate.getFullYear()+parseInt(year));  
  23.     }  
  24.     if(month){  
  25.         myDate.setMonth(myDate.getMonth()+parseInt(month));  
  26.     }  
  27.     if(day){  
  28.         myDate.setDate(myDate.getDate()+parseInt(day));  
  29.     }  
  30.     var month = myDate.getMonth()+1;  
  31.     var day = myDate.getDate();  
  32.     return myDate.getFullYear()+"-"+((month+"").length == 1 ? "0"+month : month)+"-"+((day +"").length == 1 ? "0"+day : day);  
  33. }  
  34. </script>  
  35. </head>  
  36.   
  37. <body>  
  38.   
  39.     <form>  
  40.         <table boder ="1">  
  41.         <tr>  
  42.             <td>  
  43.                 <label class="required">姓名:</label>  
  44.             <td>  
  45.             <td>  
  46.                 <input type="text" />  
  47.             </td>  
  48.         </tr>  
  49.         <tr>  
  50.             <td>  
  51.                 <label class="required">日期:</label>  
  52.             <td>  
  53.             <td>  
  54.                 <input type="text" class="autoFillDate"/>  
  55.             </td>  
  56.         </tr>  
  57.         <tr>  
  58.             <td>  
  59.                 <label class="required">年加一:</label>  
  60.             <td>  
  61.             <td>  
  62.                 <input type="text" class="autoFillDate" addYear="1"/>  
  63.             </td>  
  64.         </tr>  
  65.         <tr>  
  66.             <td>  
  67.                 <label class="required">月加一:</label>  
  68.             <td>  
  69.             <td>  
  70.                 <input type="text" class="autoFillDate" addMonth="1"/>  
  71.             </td>  
  72.         </tr>  
  73.         <tr>  
  74.             <td>  
  75.                 <label class="required">日加一:</label>  
  76.             <td>  
  77.             <td>  
  78.                 <input type="text" class="autoFillDate" addDay="1"/>  
  79.             </td>  
  80.         </tr>  
  81.         <tr>  
  82.             <td>  
  83.                 <label class="required">都加一:</label>  
  84.             <td>  
  85.             <td>  
  86.                 <input type="text" class="autoFillDate" addYear="1" addMonth="1" addDay="1"/>  
  87.             </td>  
  88.         </tr>  
  89.     </form>  
  90.   
  91. </body>  
  92. </html>  


运行效果图：

激情奋斗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery Ajax 实现自动填充地址。
12-20
Jquery Ajax 实现自动填充地址。
在必填表单项之前添加“红星”，标识为必选项
z19950712的博客
12-02 4071
html中的样式： <div id="view1" class="pt-page" style="border-top: 10px solid #fAfAfA;margin-top: 30px;"> <p id="listInput" @click="choiceGrade"> <label> 报名年纪 </label> <input type="text" readonly
必填项
qq_37904977的博客
03-21 499
icon 图标
qq_55342245的博客
03-31 984
icon 图标 属性 类型 默认值 必填 说明 type string 是 icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear size number/string 23 否 icon的大小 color string 否 icon的颜色，同css的color .js 文件 Page({ data: { iconSize: [20
jquery实现邮箱自动填充提示功能
10-23
主要介绍了jquery实现邮箱自动填充提示功能，为了提高用户的体验，很多网站都会实现邮箱输入的自动提示功能，对如何实现自动提示功能感兴趣的小伙伴们可以参考一下
jquery实现的网页自动播放声音
10-26
主要介绍了使用jquery如何实现的网页自动播放声音,需要的朋友可以参考下
jquery实现可自动收缩的TAB网页选项卡代码
11-23
本文实例讲述了jquery实现可自动收缩的TAB网页选项卡代码。分享给大家供大家参考。具体如下： 这是一款可自动收缩的TAB选项卡网页代码，当把鼠标放在标签上的时候，标签所属的内容自动展开，鼠标移走或移到其它标签...
jQuery 实现自动填充邮箱功能（带下拉提示）
10-25
本文用 jQuery 实现一个用户输入字符时出现能够提示邮箱后缀名的下拉菜单，并且在选择下拉菜单中的邮箱后缀名后可自动填充未完成的输入框。
js验证日期方法
wang_zhij的博客
07-09 695
//对日期时间格式的验证：yyyy-MM-dd functionisDate(dateStr){ vardatePat=/^(\d{4})(\-)(\d{1,2})(\-)(\d{1,2})$/; varmatchArray=dateStr.match(datePat); if(matchArrary==null){ returnfalse; } varmonth=matc...
JavaScript_构建您的第一个移动应用程序.zip
05-20
JavaScript
手机应用源码新浪微博Android客户端.rar
05-20
手机应用源码新浪微博Android客户端.rar
俄罗斯方块项目【尚学堂·百战程序员】.zip
05-20
# 俄罗斯方块项目【尚学堂·百战程序员】 俄罗斯方块是一款经典的益智游戏，最早由俄罗斯程序员阿列克谢·帕基特诺夫于1984年开发。本项目基于【尚学堂·百战程序员】的课程内容，详细介绍如何使用JavaScript、HTML5和CSS3从零开始开发一个完整的俄罗斯方块游戏。该项目旨在帮助学习者掌握前端开发的基础知识和技能，提升编程能力。 ## 项目概述 本项目实现了经典的俄罗斯方块游戏，主要包括以下功能模块： ### 1. 游戏界面 游戏界面采用HTML5的Canvas元素进行绘制，使用CSS3进行样式设计。界面包括游戏区域、得分显示、下一个方块预览和控制按钮。通过合理的布局和美观的设计，为玩家提供良好的游戏体验。 ### 2. 方块生成与控制 游戏随机生成不同形状的方块（I、O、T、L、J、S、Z），玩家可以通过键盘控制方块的移动和旋转。具体操作包括： - 左移：按左箭头键。 - 右移：按右箭头键。 - 下移：按下箭头键。 - 旋转：按上箭头键。 ### 3. 方块下落与碰撞检测 方块自动从上到下逐行下落，速度逐渐加快。通过碰撞检测算法，判断方块是否与其他方块或底部边界
如何打造一个新品牌tbb.pptx
05-20
如何打造一个新品牌tbb.pptx
node-v14.2.0-headers.tar.xz
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于java开发的声纹识别解锁系统，一款使用声纹加密Android APP的应用+源码（毕业设计&课程设计&项目开发）
05-20
基于java开发的声纹识别解锁系统，一款使用声纹加密Android APP的应用+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于java开发的声纹识别解锁系统，一款使用声纹加密Android APP的应用+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于java开发的声纹识别解锁系统，一款使用声纹加密Android APP的应用+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于java开发的声纹识别解锁系统，一款使用声纹加密Android APP的应用+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~
JavaScript_标志性的SVG字体和CSS工具包.zip
05-20
JavaScript
node-v19.7.0-headers.tar.xz
最新发布
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
动力电池安全预警技术交流
05-20
动力电池安全预警技术交流
jQuery fullpage实现自动切换
05-30
要使用jQuery fullpage实现自动切换，你需要在初始化fullpage时设置自动切换的参数，如下所示： ```javascript $(document).ready(function() { $('#fullpage').fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3'...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值