这个博客展示了一个简单的HTML加密数字的效果，通过JavaScript实现。用户输入6位数字，每个数字加5后进行加密，只允许输入0-9的数字。如果输入非数字字符，程序会给出相应警告。博客还强调了属性选择器在CSS中的使用。
效果：
每一位＋5对6位数字进行加密。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加密</title>
<style type="text/css">
#line-1,#line-2{
margin-top: 20px;
}
#line-1 input{
width: 30px;
text-align: center;
}
/* ★★★属性选择器★★★ */
#line-1 input[type = 'button']{
width: 100px;
}
#line-2 input{
width: 200px;
}
</style>
</head>
<body>
<script type="text/javascript">
function encrypt(){
var gt;
var vls = new Array(6);
var res = "";
//var res = 0;
for(var i = 1 ; i <= 6 ; i++){
gt = "t";
gt += i;// 得到了6个id
vls[i] = parseInt(document.getElementById(gt).value);
if(vls[i] >= 0 && vls[i] <= 9){
vls[i] += 5;
if(vls[i] >= 0){ //两位数取余
vls[i] = vls[i] % 10;
}
}
else if(vls[i] >= 'a' && vls[i] <='z' || vls[i] >= 'A' && vls[i] <='Z'){
alert("请输入数字！不能是字符！");
return;
}
else if(vls[i] == ""){
alert("请别交白卷！");
return;
}
else{
alert("请别敲火星文！");
return;
}
res += vls[i];
//或者用 res = res * 10 + vls[i];
document.getElementById("res").value = res;
// console.log(gt);
// console.log(typeof(gt));
}
}
</script>
<div id="line-1">
<label>输入6位数密码：</label>
<input type="text" id="t1" value="" maxlength="1"/>
<input type="text" id="t2" value="" maxlength="1" />
<input type="text" id="t3" value="" maxlength="1" />
<input type="text" id="t4" value="" maxlength="1" />
<input type="text" id="t5" value="" maxlength="1" />
<input type="text" id="t6" value="" maxlength="1" />
<input type="button" value="加密" onclick="encrypt()"/>
</div>
<div id="line-2">
<label>加密结果：</label>
<input type="text" id="res" value="" />
</div>
</body>
</html>
注意：
1.记下属性选择器的写法
/* ★★★属性选择器★★★ */
#line-1 input[type = 'button']{
width: 100px;
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
