页面美化例子

来源：互联网发布：将java对象转换成json 编辑：程序博客网时间：2024/06/01 08:30

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单选择器</title>
<style type="text/css">
.form-default-font {
font-family: "微软雅黑";
font-size: 9pt;
}

.txtBox {
border-style: none none dotted;
border-width: thin;
border-color: lawngreen;
width: 80px;
}

.txtArea {
border-radius: 3px;
border-style: double;
border-width: medium;
border-color: lawngreen;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$("a#change").click(function() {
console.debug($("table#mainTable tr>td:even").length)
$("table#mainTable tr>td:not('#op')").css("text-align", "right")
.next().css("text-align", "left");

$("*").addClass("form-default-font");

$(":input").addClass("txtArea");

$(":text").removeClass("txtArea").addClass("txtBox");
$(":password").removeClass("txtArea").addClass("txtBox");

$(":radio").first().attr("checked", "checked");

$("input#selectAll").bind("click", function() {
console.debug($("input#selectAll").attr("checked"));

if($("input#selectAll").attr("checked") == "checked") {
$(":checkbox").attr("checked", "checked");
} else {
$(":checkbox").removeAttr("checked");
}
});

var $year = $("select").first();
for(i = -5; i <= 5; i++) {
var now = new Date();
var nowYear = now.getFullYear();
var $opt = $(new Option((nowYear + i) + "年", nowYear + i));
$year.append($opt);
}

var $month = $year.next();
$year.change(function() {
// $month.get(0).length = 1;
while($month.children().size() > 1) {
console.debug($month.children().length);
$month.children().last().remove();
}
console.debug($month[0]);
var allMonth = new Array("壹月", "贰月", "叁月", "肆月", "伍月", "陆月", "柒月", "捌月", "玖月", "拾月", "冬月", "腊月");
for(i = 0; i < allMonth.length; i++) {
var $opt = $(new Option(allMonth[i], i));
$opt.appendTo($month);
}
});

var $date = $month.next();
$month.change(function() {
$date.get(0).length = 1;
// console.debug($date[0]);
// console.debug($year[0].options[1].value);
// console.debug($year[0].selectedIndex);
var nowYear = parseInt($year[0].options[$year[0].selectedIndex].value);
console.debug("选择年的值=" + nowYear + " typeof:" + (typeof nowYear));
var nowMonth = parseInt($month[0].options[$month[0].selectedIndex].value);
console.debug("选择月的值=" + nowMonth + " typeof:" + (typeof nowMonth));
var now = new Date(nowYear, nowMonth + 1, 0);
console.debug(now);

for(i = 1; i <= now.getDate(); i++) {
var $opt = $(new Option(i + "号", i));
$opt.appendTo($date);
}
});
});
});
</script>
</head>

<body>
<a name="top" id="change">美化页面</a>
<form>
<table id="mainTable" align="center" border="0">
<caption>注册新用户</caption>
<input type="hidden" name="id" value="u001" />
<tr>
<td>账户：</td>
<td><input type="text" name="userName" /></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="userPass" /></td>
</tr>
<tr>
<td>二次密码：</td>
<td><input type="password" name="userPwd" /></td>
</tr>
<tr>
<td>电子邮件：</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" name="realName" /></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td>电话：</td>
<td><input type="text" name="phone" /></td>
</tr>
<tr>
<td>地址：</td>
<td><textarea cols="40" rows="3"></textarea></td>
</tr>
<tr>
<td>生日：</td>
<td>
<select>
<option value="0">--年--</option>
</select>
年
<select>
<option value="0">--月--</option>
</select>
月
<select>
<option value="0">--日--</option>
</select>
日
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="aiHao" value="0" />登山
<input type="checkbox" name="aiHao" value="1" />游泳
<input type="checkbox" name="aiHao" value="2" />滑雪<br />
<input type="checkbox" name="aiHao" value="3" />骑车
<input type="checkbox" name="aiHao" value="4" />打球
<input type="checkbox" name="aiHao" value="5" />跑步<br />
<input type="checkbox" id="selectAll" />全选
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" id="op" align="center">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>

</html>

0 0