前言
之前几篇博客都介绍了JavaScript的高级部分,所以对JavaScript的这些已经有了初步的认识,所以,这篇博客将JavaScript高级部分大致总结一下。
内容
获取HTML中所需要的信息
获取任何东西,在JavaScript中都需要用到正则表达式,所以这方面需要好好学学,现在直接上代码:
<script type="text/javascript">
var htmlcode = function(code) {
//< <
//> >
}
// 字符串对象中
// 类型.prototype.函数名 = function() {};
String.prototype.htmlcode = function() {
// this指当前字符串
// <html><html>
// 正则表达式
// replace(/正则/, func(0,1,2,3))
var json = {
"lt":"<",
"gt":">"
};
return this.replace(/&(.+?);/g, function(a, b) {
// 看看b是什么就返回什么
return json[b];
});
};
onload = function() {
var btn = document.getElementById("btn");
btn.onclick = function() {
// 要复制
// 获得pre标签
var pre = document.getElementById("code");
// 得到innerHTML
var txt = pre.innerHTML;
var res = txt.htmlcode();
clipboardData.setData("text", res);
};
};
</script>
</head>
<body>
<input type="button" value="复制代码" id="btn"/>
<pre id="code"><html><head><title></title></head><body></body></html></pre>
</body>
获得边框
<script type="text/javascript">
var o ={
length:0,
css:function(styles){ //styles 是一个json类型的样式数据
for(var k in styles){
for(var i =0 ;i<this.length;i++){
this[i].style[k] = styles[k];
}
}
}
};
//获得成员,给成员添加到 对象中,让这个节点成员也具有css的方法
var G = function(selector){ //#id , div :id选择器和标签选择器
var r = /#(.+)/; //匹配到的第一组是具体的id
var m =r.exec(selector);
if( m ){ //是id选择器
var node = document.getElementById(m[1]);
o[length++] = node;
return o;
}else{ //标签选择器
var nodes = document.getElementsByTagName(selector);
for(var i =0;i<nodes.length;i++){ //将所有的标签节点都放入到对象中
o[o.length++] = nodes[i];
}
return o;
}
}
onload = function(){
G("div").css({
border:"1px solid red",
width:"300px",
height:"200px"
});
};
</script>
弹出登录
<script type = "text/Javascript">
onload = function(){
var body = document.getElementsByTagName("body")[0];
var a = document.getElementById("login");
a.onclick = function(){
//创建登陆界面
var divCover = document.createElement("div");
divCover.style.position = "absolute";
divCover.style.top = "0";
divCover.style.left = "0";
divCover.style.right = "0";
divCover.style.bottom = "0";
divCover.style.backgroundColor = "#ccc";//#cccccc
divCover.style.opacity = "0.5";
divCover.style.filter = "alpha(Opacity=50)";
body.appendChild(divCover);
return false
}
}
</scripy>
验证密码强度
<script type="text/javascript">
onload = function () {
var pwd = document.getElementById("pwd");
pwd.onkeyup = function () {
var level = 0;
var input = this.value;
//if (input.length<6) return;
//验证(数字、字母、特殊字符)
//权值(满足数字+1、满足字母+1、满足特殊字符+1)
if (/[a-zA-Z]+/.text(input)) {
level++;
}
if (/\d+/.test(input)) {
level++;
}
if (/[!@#$%^&*\(\)\_\+\=\{\}\[\]\.]/.test(input)) {
level++;
}
var msg = document.getElementById("msg");
//if (input.length<6 && level-1<0) level--;
mas.innerHTML = ",<span style=\"background-color:red;\">弱</span>,<span style=\"background-color:yellow;\">中等</span>,<span style=\"background-color:green;\">强</span>".split(',')[level];
}
}
</script>
<body>
<input type="text" name="name" value=" " id="pwd" />
<p id="msg"> </p>
</body>
总结
这篇博客基本上都是代码,大神们看看有什么bug没有,希望给点提示,因为这都是日后宝贵的经验!
end
谢谢您的阅读!