<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.basic {
margin: 0 auto;
border: 5px solid;
260px;
padding: 10px;
margin-top: 70px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
#btn {
margin-top: 1px;
margin-left: 48%;
background: #222222;
color: white;
}
#confirm {
margin-left: 5px;
}
#frame{
position: relative;
}
img {
position: absolute;
80px;
height:80px;
left: 30%;
}
</style>
</head>
<body>
<div id="frame">
<form class="form-horizontal basic" role="form" >
<label>学号:</label><label >160109001</label><br/>
<label>密码:</label><label id="pwd" TextMode="Password" >*******</label>
</form>
<button type="button" class="btn " id="btn">密码重置</button><button type="button" class="btn " id="confirm">确定</button>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../js/jquery-1.11.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../js/bootstrap.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
var pwd = $("#pwd");
var txt = pwd.text();
var input = $("<input type='password'value='" + txt + "'/>");
pwd.html(input);
$("#confirm").click(function () {
var v = $(input).val();
pwd.text(v);
$("#pwd").prop("pwd",v);
$("#pwd").html("********");
})
})
$("#pwd").prop("pwd","123456");//新增一个属性存密码
})
</script>
</body>
</html>