minuzy
/
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0">
<link href="//cdn.bootcss.com/weui/0.4.2/style/weui.min.css"
	rel="stylesheet">
<script src="//cdn.bootcss.com/jshashes/1.0.5/hashes.min.js"></script>
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<title>让你的密码更安全</title>
</head>
<body>
	<h1 style="text-align: center; margin: 10px 0 5PX; color: #04be02">让你的密码更安全</h1>
	<div class="weui_msg">
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell">
				<div class="weui_cell_hd">
					<label class="weui_label">用户名</label>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" type="text" id="username"
						placeholder="请输入username">
				</div>
			</div>
			<div class="weui_cell">
				<div class="weui_cell_hd">
					<label class="weui_label">域名/app</label>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" type="text" id="domain"
						placeholder="请输入网站域名/app名称">
				</div>
			</div>
			<div class="weui_cell">
				<div class="weui_cell_hd">
					<label class="weui_label">密钥</label>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" type="text" id="salt" placeholder="请输入密钥">
				</div>
			</div>
		</div>
		<div class="weui_cells_title">密码长度</div>
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell weui_cell_select">
				<div class="weui_cell_hd">密码长度</div>
				<div class="weui_cell_bd weui_cell_primary">
					<select class="weui_select" name="length" id="length">
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8" selected="selected">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
						<option value="13">13</option>
						<option value="14">14</option>
						<option value="15">15</option>
						<option value="16">16</option>
						<option value="17">17</option>
						<option value="18">18</option>
						<option value="19">19</option>
						<option value="20">20</option>
					</select>
				</div>
			</div>
		</div>
		<div class="weui_text_area">
			<br />
			<p class="weui_msg_desc" id="original">
				密码种子：<span id="original-username"></span><span id="original-domain"></span><span
					id="original-salt"></span>
			</p>
			<p class="weui_msg_desc">
				安全密码：<span id="target"></span>
			</p>
		</div>
		<div class="weui_opr_area">
			<p class="weui_btn_area">
				<a href="javascript:;" class="weui_btn weui_btn_primary" id="encode">生成密码</a>
			</p>
		</div>
		<div class="weui_extra_area">
			<p class="weui_msg_desc">Power By: yuerzm</p>
		</div>
	</div>
	<script src="//cdn.bootcss.com/jshashes/1.0.5/hashes.min.js"></script>
	<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(
				function() {
					$('#username').bind('input propertychange', function() {
						$('#original-username').html($(this).val() + '@');
					});
					$('#domain').bind('input propertychange', function() {
						$('#original-domain').html($(this).val() + '#');
					});
					$('#salt').bind('input propertychange', function() {
						$('#original-salt').html($(this).val());
					});
					$('#encode').click(
							function() {
								if ($('#username').val() == ''
										|| $('#domain').val() == ''
										|| $('#salt').val() == '')
									return;
								var len = jQuery('#length option:selected')
										.text();
								var sha = new Hashes.SHA1
								var hash = sha.hex($('#username').val() + '@'
										+ $('#domain').val() + '#'
										+ $('#salt').val());
								$('#target').text(hash.substring(0, len));
							});
				});
	</script>
</body>
</html>