jQuery密码强度检测高级版代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery密码强度检测高级版代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en" dir="ltr" ng-app ng-controller="HSIMP.app">
<head>
    <meta charset="utf-8">
    <title>jQuery密码强度检测高级版代码</title>
    <link rel="stylesheet" href="css/screen.css">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <br>
    <noscript id="no-js">
        <p class="sorry">出于安全原因，该网站需要JavaScript的支持.</p>
        <p class="sorry">非常抱歉！</p>
    </noscript>
    <div id="js">
        <div role="main">
            <div class="input">
                <input type="password" id="password" ng-model="password" ng-change="passwordChange()" placeholder="请输入您的密码" class="password" autofocus>
            </div>

            <div class="phishing" ng-hide="password">
                <p>任何一个网站都可以盗取您的密码,所以在每次输入密码前都要谨慎一些比较好</p>
            </div>

            <div ng-show="password">
                <ul ng-show="display.config">
                    <li>
                        <label><input type="checkbox" ng-model="config.namedNumbers" ng-change="config.changeNamedNumbers()" />Use Named Numbers</label>
                    </li>
                    <li>
                        <label>Calculations per second</label>
                        <input type="text" ng-model="config.calculations" ng-change="config.changeCalculations()" />
                    </li>
                </ul>
                <div class="results">
                    <span class="toggle" ng-click="display.toggleConfig()">{{display.configText}}</span>
                    <p ng-hide="insecure">可能只需要一台<span ng-show="config.calculationsOriginal">普通的PC</span> 用时 <span class="main">{{time}}</span> 来破解您的密码</p>

                    <p ng-show="insecure">您的密码破解时间为<span class="main">瞬间</span></p>
                    <span class="toggle" ng-click="display.toggleDetails()">{{display.detailsText}}</span>
                </div>
                <ul ng-show="display.details">
                    <li><strong>Length:</strong> {{length}} characters</li>
                    <li><strong>Character Combinations:</strong> {{characters}}</li>
                    <li><strong>Calculations Per Second:</strong> {{calcsPerSecond}}</li>
                    <li><strong>Possible Combinations:</strong> {{possibleCombinations}}</li>
                </ul>

                <ul ng-show="checks">
                    <li ng-repeat="check in checks" class="{{check.type}}">
                        <h2 ng-bind-html-unsafe="check.title"></h2>
                        <p ng-bind-html-unsafe="check.wording"></p>
                    </li>
                </ul>
            </div>
        </div>
        <br>
    </div>
    <script>
        var HSIMP = {
            language: {}
        };
    </script>
    <script src="js/en-min.js"></script>
    <script src="js/app.min.js"></script>
    <div id="fb-root"></div>
</body>
</html>

JS代码(en-min.js):

/*globals HSIMP */
HSIMP.language.en={
	translations:{
	main_title:"您的密码有多安全?(sc.chinaz.com)",top10k:"Top 10,000 Passwords by",version:"Version"}
}
;

CSS代码(screen.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* FONTS & GRID */
@font-face{font-family:'league';src:url('/assets/fonts/League_Gothic-webfont.eot');src:local('☺'),url('/assets/fonts/League_Gothic-webfont.woff') format('woff'),url('/assets/fonts/League_Gothic-webfont.ttf') format('truetype'),url('/assets/fonts/League_Gothic-webfont.svg') format('svg');font-weight:normal;font-style:normal;}
/* VERTICAL */
/* HORIZONTAL */
/* GRID CLASSES */
/*.make(@i) when (@i > 0){(~".col-@{i}
"){.width(false,@i);.margin(left,0);.margin(right,0);}
.make(@i - 1)}
.make(0){}
.make(@columns);*/
/* COLOURS */
/* REUSED SETTINGS */
/* BREAK POINTS */
/* TESTING */
div.testing{background:url('/assets/img/under-construction.png');padding-top:1.3125em;padding-bottom:1.3125em;border-bottom:1px solid #ffffff;}
div.testing p{font-size:1.125em;line-height:1.1666666666666667em;background:#000000;background:rgba(0,0,0,0.85);color:#ffffff;width:70%;margin:0 auto;text-align:center;font-family:Lato,sans-serif;text-transform:uppercase;}
body:after{display:none;}
body:after{content:'level-0';}
/* BASICS */
html{background:#376a82;-webkit-transition:background 1s linear;-moz-transition:background 1s linear;-o-transition:background 1s linear;transition:background 1s linear;}
@media screen and (min-width:680px){html{padding-left:6.25%;padding-right:6.25%;}
}
html.bad{background:#c23333;}
html.ok{background:#db7d3a;}
html.good{background:#378241;}
body{position:relative;font-family:Lato,sans-serif;font-weight:300px;max-width:1200px;margin:0 auto;}
@media screen and (min-width:680px){body{margin-top:2.625em;margin-bottom:2.625em;}
}
em{font-style:italic;}
#js{display:none;}
#no-js .sorry{background:#ffffff;background-color:rgba(255,255,255,0.6);text-align:center;font-size:1.125em;line-height:2.3333333333333335em;}
a{text-decoration:underline;}
h1[role="banner"] a{display:block;width:87.5%;margin:0 auto;font-family:league,'Helvetica Neue',sans-serif;text-align:center;text-transform:uppercase;text-decoration:none;color:#ffffff;color:rgba(255,255,255,0.6);font-size:3em;line-height:0.875em;padding-top:0.875em;padding-bottom:0.875em;}
@media screen and (min-width:350px){h1[role="banner"] a{font-size:4.5em;line-height:0.875em;padding-top:0.5833333333333334em;padding-bottom:0.5833333333333334em;}
}
div[role="main"] strong{font-weight:700;}
div[role="main"] input[type="text"],div[role="main"] input[type="password"]{background:#ffffff;background:rgba(255,255,255,0.6);color:#000000;color:rgba(0,0,0,0.85);margin:-1px auto -1px;padding-left:1.0416666666666667%;padding-right:1.0416666666666667%;}
div[role="main"] input[type="text"]:focus,div[role="main"] input[type="password"]:focus{outline:none;border-width:4px;margin:-4px auto -4px;}
div[role="main"] ul[ng-show="display.config"],div[role="main"] ul[ng-show="display.details"]{background:#000000;background:rgba(0,0,0,0.85);color:#ffffff;color:rgba(255,255,255,0.85);padding-left:6.25%;padding-right:6.25%;padding-top:1.3125em;padding-bottom:1.3125em;margin:0 auto;}
@media screen and (min-width:680px){div[role="main"] ul[ng-show="display.config"],div[role="main"] ul[ng-show="display.details"]{width:60.416666666666664%;}
}
div[role="main"] ul[ng-show="display.config"] li,div[role="main"] ul[ng-show="display.details"] li{padding-bottom:1.3125em;}
div[role="main"] ul[ng-show="display.config"] li:last-child,div[role="main"] ul[ng-show="display.details"] li:last-child{padding-bottom:0;}
div[role="main"] ul[ng-show="display.config"]{margin-top:1.3125em;border-top:1px solid #ffffff;border-bottom:none;}
div[role="main"] ul[ng-show="display.config"] label:after{content:":";padding-right:10px;}
div[role="main"] ul[ng-show="display.config"] input{font-size:1.125em;line-height:1.1666666666666667em;}
div[role="main"] ul[ng-show="display.config"] input[type="checkbox"]{margin-right:10px;}
div[role="main"] ul[ng-show="display.details"]{word-break:break-all;margin-bottom:1.3125em;border-top:none;border-bottom:1px solid #ffffff;}
div[role="main"] div.input{margin-bottom:1.3125em;}
div[role="main"] div.input input.password{font-family:sans-serif;display:block;width:96%;padding:0 2%;border-left:none;border-right:none;font-size:3em;line-height:1.3125em;}
@media screen and (min-width:680px){div[role="main"] div.input input.password{width:72.91666666666667%;border-left:1px solid #ffffff;border-right:1px solid #ffffff;}
div[role="main"] div.input input.password:focus{border-left-width:4px;border-right-width:4px;}
}
div[role="main"] .phishing{text-align:center;border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;font-size:1em;line-height:1.3125em;color:#ffffff;background:#000000;background:rgba(0,0,0,0.2);margin:0 auto;margin-top:2.625em;padding-top:1.3125em;padding-bottom:1.3125em;padding-left:1.0416666666666667%;padding-right:1.0416666666666667%;}
@media screen and (min-width:680px){div[role="main"] .phishing{width:47.916666666666664%;border-left:1px solid #ffffff;border-right:1px solid #ffffff;}
}
div[role="main"] div.results,div[role="main"] ul[ng-show="checks"]{margin-left:auto;margin-right:auto;background:#ffffff;background:rgba(255,255,255,0.6);color:#000000;color:rgba(0,0,0,0.85);border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;}
@media screen and (min-width:680px){div[role="main"] div.results,div[role="main"] ul[ng-show="checks"]{}
}
@media screen and (min-width:680px){div[role="main"] div.results{width:72.91666666666667%;}
}
div[role="main"] div.results .tweet-me{text-align:center;display:block;color:#000000;margin-top:1.5em;font-size:0.875em;line-height:1.5em;text-decoration:none;}
div[role="main"] div.results p{padding-left:6.25%;padding-right:6.25%;font-size:1.125em;line-height:1.1666666666666667em;text-align:center;}
div[role="main"] div.results p span.main{word-break:break-all;font-size:2em;line-height:1.1666666666666667em;display:block;}
div[role="main"] div.results span.toggle{font-size:0.75em;line-height:1.75em;display:block;text-align:center;text-transform:uppercase;text-decoration:none;cursor:pointer;background:#000000;background:rgba(0,0,0,0.85);color:#ffffff;color:rgba(255,255,255,0.85);}
div[role="main"] div.results span.toggle:first-child{margin-bottom:1.75em;border-bottom:1px solid #ffffff;}
div[role="main"] div.results span.toggle:last-child{margin-top:1.75em;border-top:1px solid #ffffff;}
div[role="main"] ul[ng-show="checks"]{margin-bottom:1.3125em;margin-top:1.3125em;}
@media screen and (min-width:680px){div[role="main"] ul[ng-show="checks"]{width:72.91666666666667%;}
}
div[role="main"] ul[ng-show="checks"] li:last-child{margin-bottom:0;}
div[role="main"] ul[ng-show="checks"] a{text-decoration:none;}
div[role="main"] ul[ng-show="checks"] p a{color:#376a82;text-decoration:underline;font-weight:bold;}
div[role="main"] ul[ng-show="checks"] p,div[role="main"] ul[ng-show="checks"] h2{padding-left:6.25%;padding-right:6.25%;}
div[role="main"] ul[ng-show="checks"] p{font-size:0.875em;line-height:1.5em;padding-top:1.5em;padding-bottom:1.5em;}
div[role="main"] ul[ng-show="checks"] h2{font-size:1.3125em;line-height:2em;background:#000000;background:rgba(0,0,0,0.85);font-family:league,'Helvetica Neue',sans-serif;text-transform:uppercase;border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;}
div[role="main"] ul[ng-show="checks"] li:first-child h2{border-top:none;}
div[role="main"] ul[ng-show="checks"] .warning h2{color:#db7d3a;}
div[role="main"] ul[ng-show="checks"] .advice h2{color:#376a82;}
div[role="main"] ul[ng-show="checks"] .tip h2,div[role="main"] ul[ng-show="checks"] .tip h2 a{color:#378241;}
div[role="main"] ul[ng-show="checks"] .tip h2 a{display:block;}
div[role="main"] ul[ng-show="checks"] .insecure h2{color:#c23333;font-size:2.25em;line-height:1.1666666666666667em;padding-top:0.2916666666666667em;padding-bottom:0.2916666666666667em;}
div[role="main"] ul[ng-show="checks"] .insecure p{font-size:1.125em;line-height:1.1666666666666667em;padding-top:1.1666666666666667em;padding-bottom:1.1666666666666667em;}
div[role="main"] ul[ng-show="checks"] .achievement h2{color:#378241;}
.social{margin-top:2.625em;text-align:center;}
.social .facebook,.social .twitter{position:relative;display:inline;padding:0 20px;}
.social .fb-like{position:absolute;top:-7px;left:0;}
.adverts{text-align:center;margin-top:2.625em;margin-bottom:2.625em;}
.adverts h2{color:#ffffff;margin-bottom:1.3125em;}
.adverts ins{margin:0 10px !important;}
div[role="contentinfo"]{background:#000000;background:rgba(0,0,0,0.85);border-top:1px solid #ffffff;color:#ffffff;color:rgba(255,255,255,0.85);padding-top:1.3125em;padding-bottom:1.3125em;margin-top:2.625em;padding-left:6.25%;padding-right:6.25%;}
@media screen and (min-width:960px){div[role="contentinfo"]{height:6.5625em;padding-left:none;padding-right:none;}
}
div[role="contentinfo"] a{color:#ffffff;color:rgba(255,255,255,0.85);}
div[role="contentinfo"] ul.menu{font-size:1.3125em;line-height:1em;font-family:league,'Helvetica Neue',sans-serif;text-transform:uppercase;padding-left:1.0416666666666667%;padding-right:1.0416666666666667%;margin-left:6.25%;}
div[role="contentinfo"] ul.menu li:last-child{margin-bottom:0;}
div[role="contentinfo"] p.disclaimer{padding-left:1.0416666666666667%;padding-right:1.0416666666666667%;margin-top:1.3125em;font-size:0.75em;line-height:1.75em;}
@media screen and (min-width:960px){div[role="contentinfo"] p.disclaimer{text-align:right;position:absolute;margin-bottom:0;bottom:1.3125em;right:6.25%;width:25%;}
}
div[role="contentinfo"] p.version,div[role="contentinfo"] p.sponsored{padding-left:1.0416666666666667%;padding-right:1.0416666666666667%;margin-bottom:1.3125em;}
@media screen and (min-width:960px){div[role="contentinfo"] p.version,div[role="contentinfo"] p.sponsored{text-align:center;position:absolute;margin-bottom:0;bottom:3.9375em;left:37.5%;width:25%;}
}
@media screen and (min-width:960px){div[role="contentinfo"] p.sponsored{bottom:1.3125em;left:37.5%;width:25%;}
}
div[role="contentinfo"] div.attr{padding-left:1.0416666666666667%;padding-right:1.0416666666666667%;}
div[role="contentinfo"] div.attr ul{margin-bottom:1.3125em;}
div[role="contentinfo"] div.attr ul li{font-size:0.875em;line-height:1.5em;}
div[role="contentinfo"] div.attr p.copyright{font-size:0.75em;line-height:1.75em;}
@media screen and (min-width:960px){div[role="contentinfo"] div.attr{text-align:left;position:absolute;bottom:1.3125em;left:6.25%;width:22.916666666666668%;}
}
@media screen and (min-width:520px){body:after{content:'level-1';}
}
@media screen and (min-width:720px){body:after{content:'level-2';}
}
@media screen and (min-width:960px){body:after{content:'level-3';}
}
@media screen and (min-width:1100px){body:after{content:'level-4';}
}
@media print{*{background:transparent !important;color:black !important;text-shadow:none !important;filter:none !important;-ms-filter:none !important;}
/* Black prints faster:sanbeiji.com/archives/953 */
 a,a:visited{color:#444 !important;text-decoration:underline;}
a[href]:after{content:" (" attr(href) ")";}
abbr[title]:after{content:" (" attr(title) ")";}
.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}
/* Don't show links for images,or javascript/internal links */
 pre,blockquote{border:1px solid #999;page-break-inside:avoid;}
thead{display:table-header-group;}
/* css-discuss.incutio.com/wiki/Printing_Tables */
 tr,img{page-break-inside:avoid;}
@page{margin:0.5cm;}
p,h2,h3{orphans:3;widows:3;}
h2,h3{page-break-after:avoid;}
}

附件:下载该文件资源,减少时间成本(增值服务)