前端系列教程之JS（自认为有用代码）
2024-06-12 10:57:50
以下代码并不唯一，仅供参考
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（自认为有用代码）相关推荐
- 【前端系列教程之HTML5】01_HTML概述
一.Web前端开发工具 1.1.常用前端开发工具介绍 软件开发工具是用于辅助软件生命周期过程的基于计算机的工具.通常可以设计并实现工具来支持特定的软件工程方法,减少手工方式管理的负担. 作为一个前端开 ...
- 【前端系列教程之CSS3】04_CSS定位和浮动详解
一.CSS 定位(重点) 1.1 CSS 定位属性 position 属性指定了元素的定位类型. position 属性的五个值: static 静态定位,无特殊定位,对象遵循正常文档流.top,ri ...
- 【前端系列教程之CSS3】01_CSS概述、引入规则和三大机制
前言 最准确的网页设计思路是把网页分成三个层次,即:结构层.表示层.行为层. HTML:结构层,Hyper Text Markup Language,超文本标记语言 CSS:表现层,Cascading ...
- 【前端系列教程之HTML5】02_HTML文档结构
一.HTML文件(文档)定义 试想:我们上网访问到底做了什么? 上一节提到URL问题,组成部分由HTTP,服务器地址,端口号,资源路径;这些东西组成了我们上网访问所谓的网址,其中有服务器地址和路径,从 ...
- 【前端系列教程之JavaScript】08_BOM编程
一.BOM概述 1.1.Web API API的概念 API(Application Programming Interface,应用程序接口)是一些预先定义的函数,或指软件系统不同组成部分衔接的约定 ...
- 【前端系列教程之JavaScript】01_JavaScript概述和引入方式
JavaScript概述 JavaScript可以做什么 页面的各种动画效果 页面的点击/移入响应 对客户端数据进行验证 各种页面小游戏 用途总结 嵌入动态文本于HTML页面. 对浏览器事件做出响应( ...
- 【前端系列教程之jQuery】06_jQuery CSS样式操作
一.CSS样式操作 CSS css(name|pro|[,val|fn]) 访问匹配元素的样式属性. jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动 ...
- 【前端系列教程之HTML5】06_HTML5新标签
一.HTML5新布局标签 许多现有网站都包含以下HTML代码: <div id="nav">, <div class="header"> ...
- 【前端系列教程之CSS3】06_CSS3边框、渐变、文本效果等
一.CSS3边框(重要) 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 1.1 CSS3边框圆角 在 CSS2 中添加圆角棘手.我们不得不在 ...
- 【前端系列教程之JavaScript】16_JavaScript函数进阶
函数进阶 函数回顾 函数的定义方式 函数声明 function foo () {} 函数表达式 var foo = function () {} 函数声明与函数表达式的区别 函数声明必须有名字 函数声 ...
最新文章
- 《挑战30天C++入门极限》新手入门：C/C++中枚举类型(enum)
- 《中国人工智能开源软件发展白皮书（2018）》（附下载及解读PPT）
- IOS中scrollsToTop问题小结
- git为私有仓库设置密码_真香！在局域网下行云流水般使用git
- nginx location 匹配 多个规则_后端程序员不得不会的 Nginx 转发匹配规则
- 枚举Enumerations
- 20165309 《网络对抗技术》实验二：后门原理与实践
- php ddl,MySQL定义语言[DDL]
- 计算机字体颜色太浅,我的打印机打字太淡,如何调,打印的字就能够颜色
- fcm算法的MATLAB实现
- OpenCv中Threshold函数详解
- 海康威视摄像头 rtsp 地址格式
- VUCA时代，3招让项目计划管理更科学有序！
- AD画螺旋形走线或者天线的操作
- JVM中OOM和SOF的产生
- 引才！博士60万、硕士35万、本科28万，沿海城市
- Qt for IOS 制作APP启动页面
- 【寒武纪】视觉算法MLU220硬件适配（1）
- 云服务器SNAT访问互联网
- 网络规划综合实验（思科模拟器）