随笔分类 - javascript
摘要：1.固定保留指定位数的小数（非四舍五入） function formatDecimal(num, decimal) { num = num.toString() let index = num.indexOf('.') if (index !== -1) { num = num.substring(
阅读全文
摘要：在做微信公众号页面开发里，触发微信返回事件的时候有2个需求。 我现在大概的页面流程是页面a->页面b，在页面b操作数据，在页面b点击返回，会回到a页面并刷新。在页面a点击返回，直接退回到公众号页面。 所以我需要监听2个事件。1是监听a页面的返回事件，2是判断页面a是不是从上个页面返回来的。 监听返回
阅读全文
摘要：防抖debounce装饰器 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 节流throttle装饰器 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。 2者区别： 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
阅读全文
摘要：项目中需要做个打卡的模块。里面有个模块需要返回当前这个星期从星期日到星期六的日期，如下图： 我是通过 moment.js 的 moment().day() 实现这个效果的，它的说明如下图： 关于这个插件，更多其它方法可以看它的官网。 解决方案的js核心代码如下： html代码截图如下：
阅读全文
摘要：借用一下喜马拉雅的效果图，比较一下下面的遮罩层的高度： 我们可以看到它的遮罩层一直都是只遮住的下面。开始想着怎么用CSS实现，几经测试也没弄出来，如果正在看这篇文章的你，知道如何用CSS达到这种效果，欢迎留言。 我来说一下我用js的解决方法。 原理很简单，遮罩层高度 = 选集弹层的下边距离 到 窗口
阅读全文
摘要：项目中有个播放列表选集的需求，如下图： 现在展示的1-42集全部，我们如何实现这个选集的功能呢？ 我的思路如下： 1.将这42集按每10集划分，并存入数组； 2.保存开始和结束位置，比如说1~10，开始就是1，结束就是10。 下面是我的实现方法： 返回数据如下图： 如您有更好的解决方案，望不吝赐教~
阅读全文
摘要：常见高度获取方法： 1.平滑滚动到顶部 2.平滑滚动到底部 3.判断滚动条滚动到底部 var nScrollHeight = $(".js_scroll_area")[0].scrollHeight; //var nScrollHeight = $(".js_scroll_area").prop("
阅读全文
摘要：自执行函数的写法通常如下： 方式1： 方式2： 方式3： 在function前面加！、+、-、=都可以将函数声明转化为函数表达式，消除了js引擎识别函数声明和函数表达式的歧义，加（）是最安全的方法，免得其他的和函数返回值进行运算。 自执行函数传参时，参数赋值直接在后面的括号里面： 不过这样的写法有什
阅读全文
摘要：我们经常能够看到在图片轮播中，穿插着视频的播放，如下图为淘宝的一个产品轮播图，放个视频能够让顾客对产品有个更全面的认识。 我们可以用swiper实现这个功能。用法就跟放图片一样，只是这里把图片换成视频就可以了。 只是如果放的是视频的话，就有一个问题，就是我们怎么在滑动结束的时候，自动停止播放上一个视
阅读全文
摘要：之前说过 DataTables 表格固定栏使用方法 。分析下它的代码，如下图 它实现固定左侧的原理就是把需要固定的数据复制一份，覆盖在全部数据的上面，用绝对定位固定在左边。 这样子有个问题就是，表格的伪类如果单纯用css是实现不了的。因为它实际上是2个部分。如果我们要实现这个效果，只能通过js代码来
阅读全文
摘要：daterangepicker 是一个时间段选择插件。官网地址：http://www.daterangepicker.com/ 项目中需要实现如下图的效果： 1.引入该插件所需要的JS 和 CSS ,该项目是以bootstrap为基础开发的，所以同时也要引用bootstrap相关的文件。 文件目录结
阅读全文
摘要：Framework 7 里面的日历插件默认的2种模式： 1.文本框 2.直接展示 如下图： 更多例子点这里 而我的需求如下图： 点击小图标再弹出日历，选择某个日期，隐藏日历弹层。 实现步骤： 1.写小图标的HTML: 2.写浮动的HTML: 这里设置 z-index:13500 是为了让它显示在后面
阅读全文
摘要：有时候数据过多，为了用户体验，需要将重要的栏目固定不动，如下图所示： 从上图我们可以看出，表格滚动的时候，左边5栏是不动的。现在说一下实现方法： 插件地址： https://datatables.net/ 使用方法： 更多左右2边固定例子可访问：https://datatables.net/exte
阅读全文
摘要：相对浏览器，将指定div滚到到指定位置，其用法如下： ps:obj是需要定位的对象，speed是滚动的速度 然而如果需要相对某一个容器（称之div1），将其内部的div2滚动到相对div1的指定位置，用法如下： 其中div1是需要具有相对位置（position:relative或者position:
阅读全文
摘要：上一篇我们讲到了如何转数字类型，今天总结一下转字符串及布尔类型的方法： 转字符串方法主要有： toString(); String(); 具体的用法如下表格所示： 转布尔类型方法主要有： Boolean()： 具体的用法如下表格所示：
阅读全文
摘要：手动将各类型 转换成 数字类型 JS提供了三种方法： Number(object); parseInt(string, radix); parseFloat(string, radix). 三种方法具体的用法如下表格所示： Number(object) parseInt(string, radix)
阅读全文
摘要：估计你看到这个标题是懵逼的，直接上图吧！ 下面那个 “退订***”那个位置好实现，可是上面那个“【签名】”的文字环绕效果要怎么实现呢？一开始想的是浮动，但是文本域不像单纯的文本，无法实现这种文字环绕，该方案PASS。后面想着单纯用绝对定位，发现遇到的问题跟浮动是一样的，该方案PASS。后面一想，这个
阅读全文
摘要：html2canvas官网地址：http://html2canvas.hertzen.com/ github地址：https://github.com/niklasvh/html2canvas/ 从官网可以看出它的使用方法很容易： 项目中的需求是需要将2张图片（1背景图+2生成的二维码）和1段文字（
阅读全文
摘要：现在经常会遇到那种带二维码的推广图片，如下图所示： 1是整张推广图的背景，2是二维码。这种图片的背景是保持不变的，里面的二维码是变化的。所以我们需要把二维码单独生成然后与背景合并。 我们可以通过canvas绘图达到将2张图片合并的效果。 具体代码如下： a标签通过添加download属性并把生成的b
阅读全文
摘要：这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序，其中包含数字排序、字符串排序以及日期格式的排序，文中给出了完整的示例代码，并做了注释，相信大家都能看懂，感兴趣的朋友们一起来看看吧。 效果图： 按时间排序（其他效果大家可以自己在本地预览）： 转载于：JS实现点击表头表格自动排序（含数字、字符
阅读全文
