化典成籍 - JavaScript
妈妈再也不用担心我的页面特效啦~
WanAkiko.
遇见是一种福气,不遇见也是。
展开
-
JavaScript编写函数快捷获取浏览器地址栏中参数name的值
function getParameter(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = location.search.substr(1).match(reg); if (r != null) return (r[2]); return null;}转载 2021-01-23 17:20:59 · 212 阅读 · 0 评论 -
JavaScript支持正则表达式的String对象的方法
检索与正则表达式相匹配的值的位置:str.search(/keyword/) Tips:匹配成功返回匹配对象的位置,否则返回-1,不支持全局匹配将匹配的对象以数组的形式返回:str.match(/RegExp/gi) Tips:默认匹配到一个即停,设置gi则表示全局且忽略大小写形式的匹配将字符串分割为字符串数组:str.split(/RegExp/gi) T原创 2020-12-03 09:53:08 · 115 阅读 · 0 评论 -
JavaScript数据传输格式
JSON(JavaScript Object Notation,JS对象简谱)详解:菜鸟网-JSON 权威解读:对象简谱概述:JSON是一种 轻量级 的 数据交换格式 (采用完全独立于编程语言的文本格式来存储和表示数据),其层次结构简洁清晰、易于阅读、编写以及解析器的解析和生成,优化网络传输效率。JSON中支持的值(语言间的互通值):null、数值、布尔值、字符串、数组、对象(函数原创 2020-11-28 21:28:23 · 306 阅读 · 0 评论 -
JavaScript全局函数eval()
eval()函数作用:若该函数中的参数为表达式,则执行表达式;若参数为字符串形式的JS代码,则参数代码会被执行且返回执行结果。注意: ① 取消 eval() 对代码块的解析需要在参数前后各加一个字符串形式的括号。 ② eval() 的功能虽然强大,但其执行效率低且存在较大的安全隐患(恶意脚本注入),因此实际开发中须慎用。...原创 2020-11-28 21:22:00 · 626 阅读 · 0 评论 -
JavaScript经典案例:图片流动轮播
效果展示:CSS代码:<style type="text/css"> /* 去除元素的默认样式 */ * { margin: 0; padding: 0; } /* 图片容器样式 */ #outer { position: relative; /* 图片宽400,高400 */ width: 420px; height: 400px; margin: 50px auto; padding: 10px 0; overflow: hidden;原创 2020-11-27 21:38:44 · 412 阅读 · 0 评论 -
JavaScript经典案例:添加/删除元素类名
效果展示:CSS代码:<style type="text/css"> #btn-wrapper { width: 300px; height: 100px; text-align: center; line-height: 100px; margin: 50px auto; background-color: #FAEBD7; } #dis-box { width: 300px; height: 50px; text-align: center;原创 2020-11-27 21:35:13 · 650 阅读 · 0 评论 -
JavaScript经典案例:图片定时轮播
效果展示:CSS代码:<style type="text/css"> #wrapper { width: 500px; height: 500px; text-align: center; margin: 50px auto; } #start { margin-right: 250px; }</style>HTML代码:<div id="wrapper"> <img src="../imgCouple/1.jpg"原创 2020-11-26 12:05:10 · 226 阅读 · 0 评论 -
JavaScript辨析浏览器版本
<script type="text/javascript"> // 辨析浏览器版本,采用正则表达式校验浏览器版本关键信息,忽略大小写 var userAgent = navigator.userAgent; if (/firefox/i.test(userAgent)) { console.log("Mozilla Firefox"); } else if (/chrome/i.test(userAgent)) { console.log("Google Chrome");原创 2020-11-26 09:38:44 · 84 阅读 · 0 评论 -
JavaScript经典案例:键盘控制元素移动
效果展示:CSS代码:<style type="text/css"> #box { position: absolute; width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: #FFEB3B; }</style>HTML代码:<div id="box">Ctrl加速</div>JavaScrip原创 2020-11-25 09:50:17 · 819 阅读 · 0 评论 -
JavaScript经典案例:页面元素拖拽
效果展示:CSS代码:<style type="text/css"> #rect { position: absolute; width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: plum; } #circle { position: absolute; width: 100px; height: 100px; line-h原创 2020-11-24 19:25:36 · 122 阅读 · 0 评论 -
JavaScript自定义bind()兼容浏览器事件绑定
/** * @param {事件绑定对象} object * @param {事件名称} callbackFunc * @param {回调函数} eventName */function bind(object, eventName, callbackFunc) { if (object.addEventListener) { // 主流浏览器 object.addEventListener(eventName, callbackFunc, false); } else { // 兼容I原创 2020-11-24 16:55:37 · 166 阅读 · 0 评论 -
JavaScript判断一个数字的奇偶性,奇数则加一,偶数则不变
方法一 (条件分支语句):var i = 1;if (i % 2 == 0) { console.log(i);} else { console.log(i + 1);}方法二 (三目表达式):console.log(i % 2 == 0 ? i : i + 1);方法三 (单元算术运算):console.log(i + i % 2);备注:一开始我认为三目表达式即为最简语法,后来讲师的一波操作让我直接怀疑自己,老师说得对,有时候只是我们自己认为技术学到家了,其实并不然。加油吧,原创 2020-11-24 08:19:35 · 966 阅读 · 0 评论 -
JavaScript经典案例:用户协议确认
效果展示:CSS代码:<style type="text/css"> #wrapper { width: 80%; height: 500px; margin: 50px auto; background: white; } #wrapper #title { width: 60%; height: 30px; margin: 0 auto; line-height: 30px; text-align: center; background原创 2020-11-22 19:17:02 · 1366 阅读 · 2 评论 -
JavaScript经典案例:网页元素跟踪移动
效果展示:CSS代码:<style type="text/css"> #target { /* 拖动元素的前提是该元素脱离文档流 */ position: absolute; width: 150px; height: 80px; line-height: 80px; text-align: center; border: 0; border-radius: 10px; background: tomato; }</style>HT原创 2020-11-22 19:09:15 · 260 阅读 · 0 评论 -
JavaScript经典动态流光时钟
原文链接:你真的会前端css吗?用css做的非常炫酷的时间显示表效果展示:CSS代码:<style type="text/css"> * { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } html, body { display: grid; height: 100%; place-items: center; background: #000; } .wrapper转载 2020-11-22 16:52:14 · 187 阅读 · 0 评论 -
JavaScript经典案例:实时获取鼠标位置
效果展示:HTML + JavaScript代码:<div id="areaDiv"></div><div id="showMsg"></div><script type="text/javascript"> window.onload = function() { var areaDiv = document.getElementById("areaDiv"); var showMsg = document.getElement原创 2020-11-22 16:45:15 · 329 阅读 · 0 评论 -
JavaScript兼容浏览器获取元素的样式
获取元素正在使用的样式(只读样式,仅IE支持):element.currentStyle.样式名称获取元素正在使用的样式(只读样式,IE8除外):getComputedStyle(element, null).样式名称Tips:返回object对象,该对象中封装了当前元素的对应样式,参数一为目标元素,参数二为伪元素,一般传入null即可。兼容element.currentStyle.styleName 和 getComputedStyle(element, null).styleName的通用方法:原创 2020-11-22 12:53:29 · 251 阅读 · 0 评论 -
JavaScript经典案例:表格节点操作
效果展示:HTML代码:<table border="0" cellspacing="10px" cellpadding="10px"><tr> <th colspan="4">学生信息表</th> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>选项</td&g原创 2020-11-21 23:11:37 · 447 阅读 · 3 评论 -
JavaScript经典案例:复选框多选操作
<script type="text/javascript"> window.onload = function() { var items = document.getElementsByName("items"); // 获取多选框子项 // 开关全选复选框 document.getElementById("checkAllBox").onclick = function() { for (var i = 0; i < items.length; i++) {原创 2020-11-21 16:41:28 · 733 阅读 · 0 评论 -
JavaScript自定义快捷函数绑定
当需要频繁地为名称唯一的元素(id选择器)绑定点击事件时,宜采用JS OOP的有关思想降低代码的耦合度以提高代码的重用性。<input type="submit" name="submit" id="submit" value="提交" /><script type="text/javascript"> /** * 自定义快捷函数绑定 * @param {Object} targetFun 形参对象 * @param {Object} getObject 函数对象原创 2020-11-20 19:00:39 · 145 阅读 · 0 评论 -
JavaScript详解数组元素排序
对数组中的元素进行排序(默认按照Unicode编码排序):array.sort()浏览器使用数组中的元素作为实参调用回调函数,回调函数返回值大于0元素交换位置,返回值小于0不交换,返回值等于0也不交换。var arr = [5, 4, 9, 2, 1, 3, 6, 8, 7, 0];arr.sort(function(val_1, val_2) { if (val_1 > val_2) { return 1; } else if (val_1 < val_2) { return原创 2020-11-16 14:59:52 · 240 阅读 · 0 评论 -
JavaScript筛除静态数组中的重复元素
var numArr = [1, 4, 3, 3, 2, 2, 3, 4, 2, 5];for (var i = 0; i < numArr.length; i++) { for (var j = i + 1; j < numArr.length; j++) { if (numArr[i] == numArr[j]) { // 出现重复元素 numArr.splice(j, 1); // 去除重复元素 j--; // 关键步骤:防止元素下标易位而忽略比较 } }}c原创 2020-11-16 14:18:08 · 133 阅读 · 0 评论 -
JavaScript对象声明的两种常用方式
方式一:var person = new Object();person.name = "李荣浩";person.gender = "男";person.age = 34;console.log("姓名:" + person.name + ",性别:" + person.gender + ",年龄:" + person.age);方式二:var singer = { name: "李荣浩", gender: "男", age: 35};console.log("姓名:" + si原创 2020-11-11 17:45:25 · 524 阅读 · 0 评论 -
JavaScript质数输出与时耗统计
console.time("Timer");for (var i = 2; i < 100000; i++) { var flag = true; for (var j = 2; j <= Math.sqrt(i); j++) { if (i % j == 0) { flag = false; break; } } if (flag) { console.log(i); }}console.timeEnd("Timer");运行时耗:...原创 2020-11-11 17:41:06 · 67 阅读 · 0 评论