每天一個jquery外掛-密碼的等級

密碼的等級

水~

效果
在這裡插入圖片描述

程式碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>密碼的等級</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<style>
			*{
				margin 
: 0;
				padding: 0;
			}
			#div{
				display: block;
				width: 240px;
				margin:10px auto;
				outline: none;
				height: 30px;
				border: 1px solid lightgray;
			}
			#show{
				width: 100px;
				height: 50px;
				border: 1px solid lightgray;
				display:flex;
				margin: 0 auto;
				justify-content:center; 

				align-items: center;
			}
		</style>
	</head>
	<body>
		<input id="div" type="text">
		<div id="show">無</div>
	</body>
</html>
<script>
	$(function(){
		$("#div").keyup(function(){
			var temp  =$(this).val 
();
			var flag = [0,0,0,0]
			for(var i = 0;i<temp.length;i++){
				if(temp.charCodeAt(i)>=45&&temp.charCodeAt(i)<=57){
					flag[0] = 1;
				}else if(temp.charCodeAt(i)>=97&&temp.charCodeAt(i)<=122){
					flag[1] = 1;
				}else if(temp.charCodeAt(i)>=65&&temp.charCodeAt(i)<=90){
					flag[2] = 1;
				}else{
					flag[3]  =1;
				}
			}
			var result = eval(flag.join("+"));
			switch(result){
				case 0:
					result = "空的"
					break;
				case 1:
					result="很弱"
					break;
				case 2:
					result="強"
					break;
				case 3:
					result="很強"
					break;
				case 4:
					result="超強"
					break;
			}
			$("#show").text(result)
		})
		
		
		
		
	})
</script>

實現

獲取輸入框的內容
遍歷裡面所有的字元，然後用charCodeAt來進行判斷其ascll碼的位置，對照著判斷是什麼種類，當然這裡用正則會更加迅速
然後將所有狀態存一個數組，符合條件就給陣列標記點+1
最後在計算完成之後將陣列累加得出結構根據不同結果反饋不同效果
完事…

每天學一個jquery外掛-密碼的等級

每天一個jquery外掛-密碼的等級

密碼的等級

每天學一個jquery外掛-密碼的等級

每天學一個jquery外掛-仿樓梯滾動

每天學一個jquery外掛-彈出提示框2

每天學一個jquery外掛-圖示的動畫

每天學一個jquery外掛-記分牌效果

每天學一個jquery外掛-B站的景深

每天學一個jquery外掛-滑鼠的特效

每天學一個jquery外掛-做個點名器

每天學一個jquery外掛-css實現電風扇2

每天學一個jquery外掛-五角星打分

每天學一個jquery外掛-五角星打分2

每天學一個jquery外掛-省市縣聯動

每天學一個jquery外掛-做拖動效果1

每天學一個jquery外掛-滑動的底邊

每天學一個jquery外掛-自定義標題

每天學一個jquery拆件-圖片的預覽

分享一個JQuery 圖片裁剪外掛，然後用C# 把裁剪的圖片儲存在本地

分享JS表單驗證原始碼（帶錯誤提示及密碼等級）

jQuery外掛simplePagination的使用方法示例

JQuery外掛tablesorter表格排序實現過程解析

每天學一個jquery外掛-密碼的等級

每天一個jquery外掛-密碼的等級

密碼的等級

相關推薦