您的位置：首页 > Web前端 > JQuery

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

2015-06-10 14:41 549 查看
<html>

<head>

<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>

<script type="text/javascript">

$(function(){

//如果是必填的，则加红星标识.

$("form label.required").each(function(){

var $required = $('<font color="red">*</font>'); //创建元素

$(this).after($required); //然后将它追加到文档中

});



//自动填充日期,addDay 日加，addMonth 月加，addYear 年加

$("input.autoFillDate").each(function(i){

$(this).val(autoFillDate($(this).attr("addYear"),$(this).attr("addMonth"),$(this).attr("addDay")));

});

});



//自动填充日期

function autoFillDate(year,month,day){

var myDate= new Date();

if(year){

myDate.setFullYear(myDate.getFullYear()+parseInt(year));

}

if(month){

myDate.setMonth(myDate.getMonth()+parseInt(month));

}

if(day){

myDate.setDate(myDate.getDate()+parseInt(day));

}

var month = myDate.getMonth()+1;

var day = myDate.getDate();

return myDate.getFullYear()+"-"+((month+"").length == 1 ? "0"+month : month)+"-"+((day +"").length == 1 ? "0"+day : day);

}

</script>

</head>



<body>



<form>

<table boder ="1">

<tr>

<td>

<label class="required">姓名:</label>

<td>

<td>

<input type="text" />

</td>

</tr>

<tr>

<td>

<label class="required">日期:</label>

<td>

<td>

<input type="text" class="autoFillDate"/>

</td>

</tr>

<tr>

<td>

<label class="required">年加一:</label>

<td>

<td>

<input type="text" class="autoFillDate" addYear="1"/>

</td>

</tr>

<tr>

<td>

<label class="required">月加一:</label>

<td>

<td>

<input type="text" class="autoFillDate" addMonth="1"/>

</td>

</tr>

<tr>

<td>

<label class="required">日加一:</label>

<td>

<td>

<input type="text" class="autoFillDate" addDay="1"/>

</td>

</tr>

<tr>

<td>

<label class="required">都加一:</label>

<td>

<td>

<input type="text" class="autoFillDate" addYear="1" addMonth="1" addDay="1"/>

</td>

</tr>

</form>



</body>

</html>

运行效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航