前端系列教程之JS（自认为有用代码）

以下代码并不唯一，仅供参考

1.保证自己的页面不被嵌入其他框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>保证自己的页面不被嵌入其他框架</title>
	</head>
	<body>
	<script>
	//判断当前页面是否为顶层,如果不是则将当前页面设置为顶层
		if(self != top){
		//（当然我们也可以修改此处的内容,对返回结果进行设置）
			top.location=self.location;
		}
	</script>
	</body>
</html>

2.离开页面时弹出确认对话框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>离开页面时弹出确认对话框</title>
	</head>
	<body>
	<script>
		window.onbeforeunload =function(){
			return "确认退出？";
		}
	</script>
	</body>
</html>

4.禁止文本的复制与粘贴

<!DOCTYPE html>
	<head>
	    <title>禁止复制与粘贴</title>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>
	<body id='banCopyPaste'>
		<h2>禁止复制与粘贴</h2>
		<script type="text/javascript">
		    var banCopyPaste = document.getElementById("banCopyPaste");
		    banCopyPaste.oncopy = function(){		//禁止复制事件
		        return false;
		    }
		    banCopyPaste.onpaste = function(){		//禁止粘贴
		        return false;
		    }
		</script>
	</body>
</html>

5.密码强度实时验证

<!DOCTYPE html>
<head>
    <title>密码强度实时验证</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
	<h2>密码强度实时验证</h2>
	<input id="passwordStrength" data-hint='请输入密码' type="password">    
	<span id="showStrength"></span>
	<script type="text/javascript">
	    window.onload = function(){
	        function setCss(_this, cssOption){//设置样式
	            if ( !_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style ) {
	                return;
	            }
	            for(var cs in cssOption){
	                _this.style[cs] = cssOption[cs];
	            }
	            return _this;
	        }
	
	        function trim(chars){//去除字符串左右两边的空格
	            return (chars || "").replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, "" );
	        }
	
	        function passwordStrength(passwordStrength, showStrength){
	            var self = this;
	            /*字符权重：
	             数字1，字母2 ，其他字符为3
	             当密码长度小于6为不符合标准，
	             长度大=6强度小于10，强度弱
	             ，长度大=6 强度>=10 <15，强度中，
	             长度大=6 强度>=15 强*/
	            passwordStrength.onkeyup = function(){
	                var _color = ["red", "yellow", "orange", "green"],
	                        msgs = ["密码太短","弱","中","强"],
	                        _strength= 0,
	                        _v = trim(passwordStrength.value)
	                _vL = _v.length,
	                        i = 0;
	
	                var charStrength = function(char){//计算单个字符强度
	                    if (char>=48 && char <=57){ //数字
	                        return 1;
	                    }
	                    if (char>=97 && char <=122) {//小写
	                        return 2;
	                    }else{
	                        return 3; //特殊字符
	                    }
	                }
	
	                if(_vL < 6){//计算模式
	                    showStrength.innerText = msgs[0];
	                    setCss(showStrength, {
	                        "color":_color[0]
	                    })
	                }else{
	                    for( ; i < _vL ; i++){
	                        _strength+=charStrength(_v.toLocaleLowerCase().charCodeAt(i));
	                    }
	                    if(_strength < 10){
	                        showStrength.innerText = msgs[1];
	                        setCss(showStrength, {
	                            "color":_color[1]
	                        })
	                    }
	                    if(_strength >= 10 && _strength < 15){
	                        showStrength.innerText = msgs[2];
	                        setCss(showStrength, {
	                            "color":_color[2]
	                        })
	                    }
	                    if(_strength >= 15){
	                        showStrength.innerText = msgs[3];
	                        setCss(showStrength, {
	                            "color":_color[3]
	                        })
	                    }
	                }
	            }
	        }
	        passwordStrength(
	                document.getElementById("passwordStrength"),
	                document.getElementById("showStrength"));
	    };
	</script>
</body>
</html>

6.验证输入是否为空

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>验证是否输入</h2>
		<input type='text' id='strs'>
		<input type='button' id='isContent' value='验证是否为空'><br>
		<script type="text/javascript">
				var isContent = document.getElementById("isContent");
				var strs = document.getElementById("strs");
				isContent.onclick = function(){
					if(!strs.value.replace( /^(\s|\u00A0)+|(\s|\u00A0)+$/g, "" )){
						alert("您的输入为空！");
					}else{
						alert("您的输入不为空！");
					}
				}		
		</script>
	</body>
</html>

7.回车提交效果

<!DOCTYPE html>
<head>
    <title>回车提交效果</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
	<h2>回车提交</h2>
	<input type="text" id="enterSubmit" value="回车提交">
	<script type="text/javascript">
	    window.onload = function(){
	        document.getElementById("enterSubmit").onkeyup = function(e){
	            e = e || window.event;
	            var keycode = e.keyCode || e.which ||e.charCode;
	            if(keycode === 13){
	                alert("回车提交成功");
	            }
	
	        }
	    };
	</script>
</body>
</html>

8.TextArea自适应文字行数

<!DOCTYPE HTML>
<head>
    <title>TextArea自适应文字行数</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
	<h2>TextArea自适应文字行数</h2>
	<textarea rows=1 name=s1 cols=27 id="autoRow"></textarea>
	<script type="text/javascript">
		window.onload = function(){
			var autoRow = document.getElementById("autoRow");
			autoRow.style.overflowY = "hidden";
			autoRow.onkeyup= function(){
				autoRow.style.height = autoRow.scrollHeight;
			};
		};
	</script>
</body>
</html>

9.Checkbox全选、取消全选、反选

<!DOCTYPE HTML>
<head>
    <title>Checkbox全选、取消全选、反选</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
	<h2>Checkbox全选、取消全选、反选</h2>
	<p><input type="button" id='allSelect' value="全选"><input type="button" id='canelallSelect' value="取消全选"><input type="button" id='_select' value='反选'> </p>
	<input type="checkbox" name='actionSelects'>1<br />
	<input type="checkbox" name='actionSelects'>2<br />
	<input type="checkbox" name='actionSelects'>3<br />
	<input type="checkbox" name='actionSelects'>4<br />
	<script type="text/javascript">
		window.onload = function(){
			var targets = document.getElementsByName("actionSelects"),
					targetsLen = targets.length,
					i = 0;

			document.getElementById("allSelect").onclick = function(){
				for(i = 0 ;i < targetsLen ; i ++){
					targets[i].checked = true;
				}
			}

			document.getElementById("canelallSelect").onclick = function(){
				for(i = 0 ;i < targetsLen ; i ++){
					targets[i].checked = false;
				}
			}

			document.getElementById("_select").onclick = function(){
				for(i = 0 ; i < targetsLen ; i ++){
					targets[i].checked = !targets[i].checked;
				}

			}
		};
	</script>
</body>
</html>

10.下拉框联动效果

<!DOCTYPE HTML>
<head>
    <title>2.33节,下拉框联动效果</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
	<h2>下拉框联动效果</h2>
	<p>
		省级:
		<select id="provinces">
		</select>
	</p>
	<p>
		市级:
		<select id="citys">
		</select>
	</p>
	<script type="text/javascript">
		window.onload = function(){
			var linkDatas = {
				provinces:[
					{"code":"0","name":"请选择"},
					{"code":"1","name":"北京"},
					{"code":"2","name":"天津"},
					{"code":"3","name":"河北"},
					{"code":"4","name":"湖北"},
					{"code":"5","name":"广东"},
					{"code":"6","name":"其他"}
				],
				citys:{
					0:["请选择"],
					1:["朝阳区","海淀区","东城区","西城区","房山区","其他"],
					2:["天津"],
					3:["沧州","石家庄","秦皇岛","其他"],
					4:["武汉市","宜昌市","襄樊市","其他"],
					5:["广州市","深圳市","汕头市","佛山市","珠海市","其他"],
					6:["其他"]
				}
			};
			function addOptions(target, optons){
				var _option = null,
						ol = optons.length,
						i = 0,
						_v = "",
						_t = "";
				for(; i < ol ; i++ ){
					_v = optons[i].value;
					_t = optons[i].text;
					_option = document.createElement("OPTION")
					_option.value = _v;
					_option.text = _t;
					target.options.add(_option);
				}
			}

			function linkage(parents, childs){//联动效果，业务处理---参数（一级菜单，二级菜单）
				var  _linkDatas = linkDatas,
						_parents = _linkDatas.provinces,
						_childs = _linkDatas.citys,
						_initCity = _childs[0],
						_p = [];
				/*初始化数据*/

				for(var i in _parents){//省
					_p.push({
						"text" : _parents[i].name,
						"value" : _parents[i].code
					});
				}

				addOptions(parents, _p);//添加选项

				addOptions(childs,[{//城市
					"value":_initCity,
					"text":_initCity
				}]);

				parents.onchange = function(){//联动事件绑定及具体业务处理
					var __childs = _childs[this.value],
							__childsLen = __childs.length,
							l = 0,
							__p = [];
					childs.innerHTML = "";
					for(; l < __childsLen ; l++){
						__p.push({
							"value" : __childs[l],
							"text" : __childs[l]
						});
					}
					addOptions(childs, __p);
				}

			}

			linkage(//绑定一级菜单与二级菜单
					document.getElementById("provinces"),
					document.getElementById("citys"));
		};
	</script>
</body>
</html>

前端系列教程之JS（自认为有用代码）

猜你喜欢