js
文章平均质量分 60
张兴华(MarsXH.Chang)
行动是治愈恐惧的良药,犹豫拖延将不断滋生恐惧!
展开
-
动态获取并设置 iframe 自适应高度
实际需求:页面中有一些固定元素 + 内嵌 iframe 页面,此时如果给 iframe 设置固定高度会导致 iframe 内部滚动,体验不佳。于是需要动态获取 iframe 实际高度并设置,但有些 iframe 页面会有占位 loading or 骨架屏等,导致一开始就获取高度会不准。所以给出解决方案如下:...原创 2022-08-31 16:19:55 · 2419 阅读 · 0 评论 -
一键复制文本实现(navigator.clipboard 和 execCommand(废弃))
execCommand 已经被废弃了,所以不要再使用了!使用 navigator.clipboard.writeText(value); 相比以前更加简洁。//旧:let oInput = document.createElement('input');oInput.value = value;document.body.appendChild(oInput);oInput.select(); // 选择对象;document.execCommand("Copy"); // 执行浏览器复制命令原创 2022-05-29 07:13:26 · 4298 阅读 · 1 评论 -
JS Decorator —— 装饰器(装饰模式)
一、简介官方定义随着TypeScript和ES6里引入了类,在一些场景下我们需要额外的特性来支持标注或修改类及其成员。 装饰器(Decorators)为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,访问符,属性或参数上。注意 Javascript里的装饰器目前处在 提案阶段,在未来的版本中可能会发生改变。属于一种设计模式,许多面向对象的语言都有这项功能。特点解耦可以在不侵入到原有代码内部的情况下而通过标注的方式原创 2022-03-06 00:30:50 · 1283 阅读 · 0 评论 -
Jquery源码之--实现精简选择器 :contains 功能
特殊原因研究了下 Jquery 选择器中的 :contains 功能(例:$(‘p:contains(“测试”)’) ==> 找出所有内容文字包含“测试”的p标签节点)遂自己做了个简单实现:简单实现/** * Jquery 选择器 :contains 功能简单实现 * @param {string} selectorStr ID、Class、Tag等querySelectorAll支持的选择器语法 * @param {string} keyword 关键词 * @return {.原创 2022-01-25 20:29:40 · 947 阅读 · 0 评论 -
多个关键词高亮/标红-完美版(多种特殊情况均包含)
需求背景:将一段文本中的指定 多个关键词 标红。需求分析及特殊情况多关键词需要逐一匹配标红即:将 命中关键词 的套上 <span style="color: red"><span> 标签例1:['你好', '你好呀'] 为关键词,文本中有 ’你好呀‘ 时,’你好呀‘ 三个字都要标红例2:['真好', '好人'] 为关键词,文本中有 ’真好人‘ 时,’真好人‘ 三个字都要标红例3:['大大'] 为关键词,文本中有 ’大大大‘ 时,’大大大‘ 三个字都要标红解决代原创 2022-01-25 20:13:00 · 2480 阅读 · 0 评论 -
JS浮点数—是谁偷走了你的精度?!(代码之谜)
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2020-10-28 16:26:47 · 448 阅读 · 4 评论 -
JS (webRTC) / Vue (Nuxt & Node) 获取用户本机 IP
获取用户本机 IP,偶尔前端小伙伴会遇到这样奇(e)葩(xin)的需求,当然是极其偶尔。第一种:JS 通过 webRTC 获取这就是网上大多数的解法:function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs //compatibility for firefox and chrome var myPeerConnection = window.RTCPeerConnection ||.原创 2020-07-23 16:03:32 · 2307 阅读 · 3 评论 -
JS数据处理实战(四)
<html> <head> <title>js数据处理实战(四)</title> </head> <body> <script> // node id 相同的,最后一个 node id 的 method === 'wait'的,删除之前的 所有 item,只保留最后一个 /...原创 2020-01-09 13:57:32 · 393 阅读 · 0 评论 -
从V8的内存管理算法出发-教你如何管理内存
文章目录导语一、V8引擎如何回收垃圾1、V8的内存分配(1)内存大小(2)新生代和老生代2、变量处理二、如何查看V8内存使用情况1、使用 node 来查看内存使用情况2、在 chorme 浏览器中查看内存使用情况三、内存优化实例1、优化内存技巧2、关于闭包和内存使用码字不易,觉得有帮助的小伙伴点个赞支持下~扫描上方二维码关注我的订阅号~导语什么是V8?V8 js运行的引擎(类似 ja...原创 2019-10-29 16:16:31 · 751 阅读 · 0 评论 -
js事件监听
js事件监听原创 2017-10-16 21:42:40 · 614 阅读 · 0 评论 -
JS实现九九乘法表
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>无限99乘法表</title> </head> <body> <button onclick="add()">开始</button>...原创 2017-10-16 21:37:01 · 904 阅读 · 0 评论 -
js原生表格增加、删除一条
<!DOCTYPE html><html><head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body> 姓...原创 2019-06-13 10:21:15 · 737 阅读 · 0 评论 -
JS(Vue)数据处理实战(二)
有如下需求:将数据通过表格展示。数据:result: { BIOS: { Passed: 16, Failed: 2, Not Run: 61, In Progress: 3, No checkpoint: 1 }, BMC: { Not Run: 30, Passed: 27, In Progress: 1, No checkpoint: 1...原创 2019-07-12 12:52:57 · 369 阅读 · 0 评论 -
JS(Vue)数据处理实战(一)
有如下需求:将数据通过表格展示。数据:issuesSummary = { Answered: { Medium: [ {id: "60030011"}, {id: "60030012"}, {id: "60030013"}, {id: "60030014"}, {id: "60030015"} ], ...原创 2019-07-12 16:21:18 · 629 阅读 · 0 评论 -
JS数据处理实战(三)
有如下需求:取出数据中所有的id数据:testObj = { id: 1, name: '一', children: [ { id: 'zhinan', label: '指南', children: [{ id: 'shejiyuanze', label: '设计原则', childr...原创 2019-07-29 14:41:37 · 428 阅读 · 0 评论 -
jq + css 实现轮播
样式教丑,只是个 Demo,可根据实际情况调整。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jq轮播</title> <style> #lun { width: 80%; height: 400...原创 2019-08-08 11:23:39 · 318 阅读 · 0 评论 -
jq.snow 实现全屏飘雪
snow.js/** * js网页雪花效果jquery插件 */(function($){ $.fn.snow = function(options){ var $flake = $('<div id="snowbox" />').css({'position': 'absolute', 'top': '-50px', 'max-width': '30...原创 2019-08-08 11:38:10 · 802 阅读 · 0 评论 -
jQuery在线引用地址(全)
1.官网jquery压缩版引用地址:3.1.1版本: <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>3.0.0版本: <script src="https://code.jquery.com/jquery-3.0.0.min.js"></scrip...原创 2019-08-08 11:42:03 · 2551 阅读 · 0 评论 -
JS实现判断是否为回文串
$('#btn').on('click', function() { var strs = $('#input').val(); var result = $('#result'); var len = strs.length; var num = 0; var len2 = parseInt(len / 2); for (var j = 0; j <原创 2017-10-16 21:55:15 · 1718 阅读 · 1 评论 -
正则密码判断
密码不小于8位 包含大写小写数字(最少两个) 不能以数字开头原创 2017-10-16 21:56:55 · 865 阅读 · 0 评论 -
JS实现数组去重
var arr = [3, 5, 6, 5, 2, 3];function arrquchong(arrobj){ var len = arrobj.length; for(var i = 0; i < len; i++){ for(var j = 0; j < len; j++){ if(i != j){ i原创 2017-10-16 21:58:39 · 542 阅读 · 1 评论 -
移动端 rem 布局 Mobile H5 rem.js
rem是什么?rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过rem计算的规则是依赖根元素,em是依赖父元素计算。rem布局原理是,先按定高宽设计出...原创 2018-03-27 14:41:59 · 1251 阅读 · 0 评论 -
js实现微博、微信分享
html<!-- 分享 --><div class="share-box"> <b style="vertical-align: middle;">分享到:</b> <a title="分享到新浪微博" class="shareSina"><span class="share-icon"></span><span class="share-text">新浪微博</span></a>原创 2018-04-10 10:30:54 · 3668 阅读 · 3 评论 -
js实现深拷贝(深复制)函数(多种数据类型全支持)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-08-29 15:30:25 · 10417 阅读 · 14 评论 -
Cookie、session和localStorage、以及sessionStorage之间的区别
一、Cookie、session和localStorage的区别cookie的内容主要包括:名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘而是保存在内存里,当然这个行为并不是规范...原创 2018-10-30 10:58:26 · 245 阅读 · 0 评论 -
判断浏览器类型(附区分qq浏览器和chrome浏览器正则)
判断浏览器类型(附区分qq浏览器和chrome浏览器正则)方法返回Sys对象,Sys对象中封装了浏览器的类型和版本信息,如下:function getBrowserInfo(){ var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var re =/(msie|firefox|chrome|opera|v...原创 2019-03-13 18:21:54 · 2238 阅读 · 0 评论 -
js-split()方法传入正则的一个小坑
在项目上发现一个split()方法传入正则的一个小坑。1、情景介绍目前有以下需求,在一段很长的字符串中,以 - - * (即: 减减空格后接任意字符,最后换行)分割成数组。例如:b)Check the attack is running-- SUT: check the BMC port LED is blinking quicklyc)After performing 24 ho...原创 2019-04-17 10:54:40 · 2007 阅读 · 0 评论 -
Promise实现原理(附源码)
写的是真的好,详细,特此转载保存一下。本篇文章主要在于探究 Promise 的实现原理,带领大家一步一步实现一个 Promise , 不对其用法做说明,如果读者还对Promise的用法不了解,可以查看阮一峰老师的ES6 Promise教程。接下来,带你一步一步实现一个 Promise1. Promise 基本结构new Promise((resolve, reject) => {...转载 2019-05-21 15:07:19 · 526 阅读 · 0 评论 -
Js正则整理
1. JS正则表达式整理(待补充)字符 含意\做为转意,即通常在 \后面的字符不按原来意义解释,如 /b/匹配字符 b,当b前面加了反斜杆后 /\b/,转意为匹配一个单词的边界。\也可以对正则表达式功能字符的还原,如匹配它前面元字符0次或多次,/a*/将匹配a,aa,aaa,在后面加了\后,a\*/将只匹配 a*。^ 匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An ...原创 2019-05-22 10:29:24 · 882 阅读 · 0 评论 -
算法总结JS版(五)—— 快速排序(Quick Sort)
(1)算法简介快速排序的基本思想:先定数组中间的数为基数,通过一趟排序将待排记录分隔成独立的两部分(左和右两个数组),顾名思义,左数组的所有数小于基数小于右数组的所有数,然后递归分别对这两个数组继续进行排序,以达到整个序列有序。(2)算法描述快速排序使用分治法来把一个串(list)分为两个子串(sub-lists)。具体算法描述如下: 1.从数列中挑出一个元素,称为 “基准”(pivot); 2.原创 2017-10-31 23:14:35 · 424 阅读 · 0 评论 -
算法总结JS版(四)—— 希尔排序(Shell Sort)
(1)算法简介希尔排序的核心在于间隔序列的设定。1959年Shell发明; 第一个突破O(n^2)的排序算法;是简单插入排序的改进版;它与插入排序的不同之处在于,它会优先比较距离较远的元素。希尔排序又叫缩小增量排序。 !划重点:在这里重点解释下为什么Shell Sort时间复杂度为O(n*logn),比插入排序高级:该方法的基本思想是:先将整个待排元素序列分割为若干个子序列(由相隔某个‘增量’的元原创 2017-10-29 22:22:06 · 647 阅读 · 0 评论 -
算法总结JS版(一)—— 冒泡排序(Bubble Sort)
(1)算法描述 冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。 (2)算法描述和实现 1.比较相邻的元素。如果第一个比第原创 2017-10-22 21:45:08 · 572 阅读 · 0 评论 -
移动端卡片式轮播
/ 移动端案例轮播$(function () { var imglength; if($('.customers-mobile').length == 1){ //首页 imglength = $('.customers-box-mobile').find('.mo-padding').length $('.custo原创 2018-04-24 17:00:53 · 4624 阅读 · 1 评论 -
纯js原生-响应式柱状图表
纯js原生-响应式柱状图表话不多说,直接上代码:head> meta charset="UTF-8"> title>js柱状统计图title> style type="text/css"> /*样式*/ body{ background-color: #eee; } #b原创 2018-01-08 14:06:23 · 3139 阅读 · 0 评论 -
ES6面向对象--实现绚丽小球(跟随鼠标)
本文主要实现一个 随鼠标移动随机产生颜色不一的小球并逐渐消失 的效果。 主要使用了canvas画布和ES6中的class语法糖(构造函数)。 还封装了一个MyRandom用于随机取n到m之间的随机数,包括n和m。 详细请见JS实现使用Math.random()函数生成n到m间的随机数字实现代码如下:<!DOCTYPE html><html lang="en"><head> <met原创 2017-12-21 19:13:37 · 1093 阅读 · 0 评论 -
JS实现找出字符串中出现最多的字符和次数
var str = "zhaochucichuzuiduodezifu"; var o = {}; //遍历str,统计每个字符出现的次数 for (var i = 0, length = str.length; i < length; i++) { //当前第i个字符 var char = str.charAt(i); //c原创 2017-10-29 09:40:15 · 9869 阅读 · 2 评论 -
JS实现查找字符串中第一个不重复的字符
var str = 'asdasdfaffjasaso';var strs = [];var len = str.length;var num = 0;for (var i = 0; i < len; i++) { strs.push(str.slice(i, i + 1));}for (var j = 0; j < len; j++) { for (var k = 0;原创 2017-10-16 22:00:13 · 4218 阅读 · 1 评论 -
JS实现使用Math.random()函数生成n到m间的随机数字
Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1)生成n-m,包含n但不包含m的整数: 第一步算出 m-n的值,假设等于w 第二步Math.random()*w 第三步Math.random()*w+n 第四步parseInt(Math.random()*w+n, 10)生成n-m,不包含n但包含m的整数: 第一步算出 m-n的值,假设等于w 第原创 2017-12-21 19:03:56 · 2542 阅读 · 0 评论