以下代码并不唯一,仅供参考
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>