页面的head部分，先引入jQuery库，然后设置好页面元素的样式，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
html {
  box-sizing: border-box;
  font-size: 62.5%;
}
* {
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: inherit;
}
*::after, *::before {
  box-sizing: inherit;
}
.bg-transparent {
  background-color: transparent !important;
}
.bg-red {
  background-color: #e74c3c !important;
}
.bg-orange {
  background-color: #e67e22 !important;
}
.bg-green {
  background-color: #2ecc71 !important;
}
body .password-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body {
  background-color: #55bbff;
}
body .password-wrapper {
  width: 80%;
  max-width: 320px;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
}
body .password-wrapper .input {
  border: none;
  padding: 10px 15px;
  font: small-caption;
  font-size: 18px;
  font-size: 1.8rem;
  width: calc(100% - 50px);
  color: #34495e;
  outline: none;
  line-height: 1.5;
}
body .password-wrapper .icon-wrapper {
  position: relative;
  display: inline;
  float: right;
  width: 50px;
  height: 50px;
  background-color: #34495e;
  transition: background-color 0.25s ease-out;
  cursor: pointer;
}
body .password-wrapper .icon-wrapper .ion-eye,
body .password-wrapper .icon-wrapper .ion-more {
  font-size: 26px;
  font-size: 2.6rem;
  position: absolute;
  top: 11px;
  right: 12px;
  color: #fff;
  transition: color 0.25s ease-out;
}
body .password-wrapper .icon-wrapper .ion-more {
  right: 14px;
}
body .password-wrapper .icon-wrapper:hover {
  transition: background-color 0.25s ease-out;
  background-color: #2c3e50;
}
body .password-wrapper .icon-wrapper:hover .ion-eye,
body .password-wrapper .icon-wrapper:hover .ion-more {
  color: #55bbff;
  transition: color 0.25s ease-in;
}
body .password-wrapper .strength-lines {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  width: calc(100% - 50px);
  height: 6px;
  z-index: 3;
}
body .password-wrapper .strength-lines .line {
  position: absolute;
  background-color: transparent;
  height: 6px;
  border-radius: 2px;
  transition: background-color 0.25s ease-in;
}
body .password-wrapper .strength-lines .line:not(:first-of-type):not(:last-of-type) {
  left: 33%;
  right: 33%;
}
body .password-wrapper .strength-lines .line:first-of-type {
  left: 4px;
  right: 68%;
}
body .password-wrapper .strength-lines .line:last-of-type {
  left: 68%;
  right: 4px;
}
</style>

页面的body部分，有三个部分：输入框、强度等级和显示隐藏按钮，代码如下：

<div class="password-wrapper">
	<input id="password-field" type="password" class="input" name="password">
	<div class="icon-wrapper">
  	<span toggle="#password-field" class="ion ion-eye field-icon toggle-password"></span>
  </div>
  <div class="strength-lines">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
</div>

页面的底部对显示或隐藏事件设置响应，并检测键盘事件和输入的密码强度，代码如下：

$(document).ready(function() {
	//隐藏或显示密码
	$(".icon-wrapper").click(function() {
		$(".toggle-password").toggleClass(".ion-eye ion-more");
		var input = $($(".toggle-password").attr("toggle"));
		if (input.attr("type") == "password") {
			input.attr("type", "text");
		} else {
			input.attr("type", "password");
		}
	});

	//键盘事件
	$("#password-field").on("keyup", function() {
		var val = $(this).val(),
			color = testPasswordStrength(val);
		  styleStrengthLine(color, val);
	});

	//密码强度检测
	function testPasswordStrength(value) {
		var strongRegex = new RegExp(
			"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_+])(?=.{13,})"
		),
			mediumRegex = new RegExp(
				"^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})"
			);

		if (strongRegex.test(value)) {
			return "green";
		} else if (mediumRegex.test(value)) {
			return "orange";
		} else {
			return "red";
		}
	}
  //密码强度显示样式
	function styleStrengthLine(color, value) {
		$(".line")
			.removeClass("bg-red bg-orange bg-green")
			.addClass("bg-transparent");
		
		if (value) {
			if (color === "red") {
				$(".line:nth-child(1)")
					.removeClass("bg-transparent")
					.addClass("bg-red");
			} else if (color === "orange") {
				$(".line:not(:last-of-type)")
					.removeClass("bg-transparent")
					.addClass("bg-orange");
			} else if (color === "green") {
				$(".line")
					.removeClass("bg-transparent")
					.addClass("bg-green");
			}
		}
	}
});