随笔分类 - JavaScript
摘要：highchart图表的一个常见问题是不能复制文字 比如官网的某个图表例子，文字不能选择，也无法复制，有时产品会抓狂... 本文给出一个简单的方案，包括一些解决的思路，希望能帮助到有需要的人 初期想了蛮久也搜了蛮多，没搜到，找到的结论是图表使用的是svg实现，必然无法选择文字，似乎是个死问题，已经濒
阅读全文
摘要：图片的横向瀑布流，其实简单地按顺序排列就可以了 但要实现每行中各图片都等高（各行不一定等高，但每行里面等高），且每行都占满，就需要用到flex的特性了 控制每行图片高度都一致，可能会影响图片的比例，所以不能简单暴力地设置高度，需要按比例来动态计算 另外，如要限制图片展示的行数，则只需判断好每行总高度
阅读全文
摘要：看到渣浪的查看文章或者查看大图有个效果：弹窗查看内容时，如果内容过长有滚动条，则滚动条会被放到body区滚动 什么意思呢？ 看个图片，一般正常弹窗是有宽高限制的，如果内容过长则直接在弹窗中进行滚动 点我预览 将滚动位置放到整个body中，让弹窗中内容自适应高度 这么做的好处自然很明显，body区域有
阅读全文
摘要：假如想统计JS中的函数执行次数最多的是哪个，执行时间最长的是哪个，该怎么做呢？ 1. 统计函数执行次数 2. 统计函数执行时间 3. 如何控制函数的调用次数 4. 如何控制函数的执行时间 一、统计函数执行次数 常规的方法可以使用 console.log 输出来肉眼计算有多少个输出 不过在Chrome
阅读全文
摘要：在程序设计中有很多实用的设计模式，而其中大部分语言的实现都是基于“类”。 在JavaScript中并没有类这种概念，JS中的函数属于一等对象，在JS中定义一个对象非常简单（var obj = {}），而基于JS中闭包与弱类型等特性，在实现一些设计模式的方式上与众不同。 本文基于《JavaScript
阅读全文
摘要：JS的闭包，是一个谈论得比较多的话题了，不过细细想来，有些人还是理不清闭包的概念定义以及相关的特性。 这里就整理一些，做个总结。 一、闭包 1. 闭包的概念 闭包与执行上下文、环境、作用域息息相关 执行上下文 执行上下文是用于跟踪运行时代码求值的一个规范设备，从逻辑上讲，执行上下文是用执行上下文栈（
阅读全文
摘要：1. 在layer弹窗组件中 如果使用了flash播放器，全屏是正常的 但若使用了HTML5的播放器，全屏失效 举个栗子 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script
阅读全文
摘要：直入正题，JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法，然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图，使用drawImage方法将video的内容绘至canvas中 3. 将截取的内容上传至服务器，将canvas
阅读全文
摘要：在线考试页面，常常需要检测用户是否作弊。 一般是监听页面是否失焦的方式，而失焦的方式有很多种，比如QQ弹窗，切换页面，切换程序，input文件上传选择文件等 选择文件是正常情况，这种情况下需要过滤 本文很简单，其实就是 document.activeElement 的使用，获取当前页面上的焦点元素
阅读全文
摘要：JS可以监听浏览器页面的关闭，主要使用了window对象的onbeforeunload方法 在以前（旧版本的浏览器中），可以自定义提示文案 但在新版本的浏览器中，为了安全性，已经不支持自定义弹窗 诸如自定义实现“用户离开页面，弹窗自定义提示是否离开，点击取消不离开，点击确认离开后离开页面”的需求已无
阅读全文
摘要：这标题，让option支持事件监听，应该不难的呀，有什么好讲的？ 其实还是有的，默认在浏览器代码是无法直接对option标签进行操作的，不仅包括JS事件监听，还是CSS样式设置 查了一些资料，姑且认为它是系统OS级别处理的 想自定义option的样式，很多人会建议用 <ul> <li> 标签来辅助同
阅读全文
摘要：用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px';
阅读全文
摘要：使用iframe加载其他页面的时候，需要自适应iframe的高度 这里加载了两个不同内容高度的页面至iframe中 1. 没有设置高度 默认长这样 有滚动条，可以看到iframe并不会因为内容高度自动撑开 2. 显示地设置高度 内容长这样，但可以看到，高度定死了，没有自适应 3. 在onload事件
阅读全文
摘要：直入正题，用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了，先看看效果图，或者 在线玩玩 吧 如果点击颜色比较深的那个（俗称坏老鼠），将扣分50；如果点击颜色比较浅的那个（俗称好老鼠），将得分100 实现 老鼠好像有点难画，又不想用图片，就直接用CSS画个简单的图代表老鼠和坑吧 ht
阅读全文
摘要：在实际开发中，经常会遇到导入Excel文件的需求，有的产品人想法更多，想要在前端直接判断文件内容格式是否正确，必填项是否已填写 依据HTML5的FileReader，可以使用新的API打开本地文件（参考这篇文章） FileReader.readAsBinaryString(Blob|File) Fi
阅读全文
摘要：关于JS的正则用法，已经有很多文章了，大同小异 " 正则表达式30分钟入门教程 " " MDN正则表达式 " " 玩转JavaScript正则表达式 " " ES6正则的扩展 "
阅读全文
摘要：JS是个神奇的语言，借助Node.js的后端环境，我们可以进行相应的爬虫开发，如这篇 基于Node.js实现一个小小的爬虫 但搭建后台环境始终略为麻烦，拿到一台新电脑，不用配环境，可不可以直接在浏览器客户端直接实现呢？ 可以可以，这里就简单地说一下在浏览器客户端实现的爬虫抓取页面数据 一、概念理解
阅读全文
摘要：Chrome的扩展程序很多，也很容易入门，可以来简单实现一下 看看 官方文档 或者翻译的文档：百度、360，慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含： 一个manifest清单文件 html文件 js文件 其他文件等 可以看到，其实结构如同一般的页面，有共通之处。 一、了解Chrom
阅读全文
摘要：JS可以做的事多了，那就用来实现一个计算器吧 看看手机中的计算器，分为普通计算器和科学计算器 自认脑袋不够大，就实现一个普通版本的吧（支持正负数加减乘除等基本连续的运算，未提供括号功能） 看看图示效果, 或 在线演示 一、知识准备 1+1 = ? 正常来说，我们看到这个表达式都知道怎么运算，知道运算
阅读全文
摘要：早就听说过断点续传这种东西，前端也可以实现一下 断点续传在前端的实现主要依赖着HTML5的新特性，所以一般来说在老旧浏览器上支持度是不高的 本文通过断点续传的简单例子（前端文件提交+后端PHP文件接收），理解其大致的实现过程 还是先以图片为例，看看最后的样子 一、一些知识准备 断点续传，既然有断，那
阅读全文