JavaScript
文章平均质量分 67
夏尔の
CSDN弃用多年~
展开
-
将后台返回的时间戳用JS转换成可读的展示时间
解决的问题是:将时间戳转换为可格式化的时间字符串前后端数据交互时,后台返回给我们的时间字段的格式可能是一个时间戳或者包含时间戳的一个字符串,例如这种"/Date(1454487480434)/",前端在展示的时候想要把它转化成“yyyy-MM-dd”这种格式或者是其他分割符连接的形式,为此我写了一个简单的封装函数来完成这项工作。原创 2017-03-02 10:43:34 · 6737 阅读 · 0 评论 -
将html2canvas生成的canvas保存为图片
想要做网页截图保存或者是将页面的某些html元素保存为图片的话,常用的插件就是html2canvas。插件的使用本身很简单,这里说的是如何将其生成的canvas保存为图片。直接看代码,简洁靠谱我还亲自帮你实践了。let oCard = document.querySelector("#bsCard");//要转换成canvas的元素let oContainer = document.quer...原创 2018-10-18 10:25:12 · 6190 阅读 · 2 评论 -
H5上传文件进度条
首先推荐一波我的网站 iscoser.com。 关于原生标签上传文件的方法,之前有两篇都说到了:分别是H5标签上传文件(一)和H5标签上传文件(二、样式美化)。 这一篇我们要讲的是上传文件时的上传进度监听(进度条的实现)依赖jQuery !。jQuery默认使用的XMLHttpRequest对象(下文简称xhr)是内部生成的,要知道上传进度我们就要监听其xhr对象的upload属性的变化。...原创 2018-07-11 16:09:42 · 4088 阅读 · 0 评论 -
优美的Swiper-Scale轮播效果
2018年06月26日,项目中又遇到一个不常规的轮播图,Swiper一直用的很顺手,于是继续用Swiper。 之前我也记录过一个比较有趣的轮播,传送门。效果图如下:实际效果相当流畅,图片只能5M,录图效果只能如此,完整DEMO可以在这里下载 实现的原理是合理利用CSS3的transform: scale();,再配合Swiper的配置项centeredSlides和slidesPerV...原创 2018-06-28 11:38:50 · 4570 阅读 · 9 评论 -
二、关于alert
alert作为查看代码输出的常用方法(主要是后端[手动狗头]和初学者), 这里跟大家聊点关于它的细节。1.消息框折行alert("折行" + "\n" + "了吗?");输出结果如下图: 2.禁止弹窗 alert是window自带的一个方法,要禁止它就是对它进行改写。alert("后面的弹窗能弹出来吗?");window.alert=fu原创 2018-05-10 16:12:55 · 764 阅读 · 0 评论 -
一、细说布尔操作符
如果老夫没猜错的话,所有编程语言都有布尔操作(应该不会被打脸吧!)。 今天聊一下JS中的布尔操作符,一共三个,与(AND)、或(OR)、非(NOT)。 基本的用法就不说了,先从一个例子引出想要说明的特性,看下面代码(想想执行的话会出现什么情况,控制台会打印什么?会报错吗?):const isTrue=true,isFalse=false;if(isFalse&&b...原创 2018-04-03 23:27:44 · 1634 阅读 · 1 评论 -
图片懒加载使用方法及感受
对前端而言,提高网页的加载速度非常重要。众所周知,图片是最吃流量的。我们都知道的优化技巧是页面加载时只加载首屏页面用到的图片即可,其他的图片资源可以稍后再加载。有一款jquery的lazyload插件便是一个可以实现图片延迟加载的插件,在用户触发某个条件之后再加载对应的图片资源,这对网站的打开速度有很大提升。插件的使用方法很简单(依赖jquery):引入lazyload.js(压缩版才4KB)原创 2018-01-11 18:04:55 · 4028 阅读 · 0 评论 -
搜索框输入即时提示
对于web用户而言,在搜索或者填写一些输入框的时候如果能有相应的 输入提示或者即时的候选项,将会感到十分的省心。当需要查询的数据量很大的时候,尽可能的减少网络请求次数对前端和后端都是必要的,这篇文章即是对即时搜索做的一些优化。废话不多说,直接贴我的代码。 即时搜索小优化 window.onload = function() { var o原创 2017-12-27 14:18:41 · 2929 阅读 · 0 评论 -
js屏蔽鼠标右键默认事件以实现自定义菜单
2017-12-18日,2017年即将结束的日子里。公司做了一个项目,主要难点在于实现公司组织架构图上,何谓组织架构图,如下便是:这里的每个节点都有相应的右键菜单,说白了就跟你用xmind的体验是一样的,用户体验自然是很好的,毕竟开发了都接近一个礼拜,而且还要加班。做公司项目嘛,就要求快,首先就是先在网上找现成的呗,最开始找的是OrgChart,可是它对数据格式的要求十原创 2017-12-18 19:00:45 · 18282 阅读 · 13 评论 -
JS实现数值自动增加动画
先放一张效果图,想要类似效果的小伙伴接着往下看话不多说,直接上代码,注释比较详细。 数字自动增加 0 //数字自增到某一值动画参数(目标元素,自定义配置) function NumAutoPlusAnimation(targetEle, options) { /*可以自己改造下传入的参数,按照自己的需求和喜好封装该函数*原创 2017-12-07 18:14:57 · 13089 阅读 · 6 评论 -
swiper自定义分页器使用
解决问题:不想使用swiper的自带的圆钮式的分页器,想使用自定义的分页器。解决方案:利用swiper提供的paginationCustomRender()方法(自定义特殊类型分页器,当分页器类型设置为自定义时可用。)下面的代码可以直接赋值粘贴到html文件里面然后作为项目在浏览器打开,但是图片需要你引用自己的本地图片并设置好路径,否则你是看不到轮播图片的。代码如下(参考注释很重要):原创 2017-10-16 10:29:04 · 21086 阅读 · 8 评论 -
BootStrap模态框垂直居中方法
解决问题:BootStrap自带的模态框不垂直居中解决方案:调用BootStrap为我们提供的方法$('.modal').on('show.bs.modal', function(){});在模态框显示之前我们用JS修改他的Top值,具体代码如下:/** * 垂直居中模态框 **/function centerModals() { $('.modal').each(func原创 2017-10-11 11:40:39 · 674 阅读 · 1 评论 -
一个简洁的高自定义的H5播放器
问题:移动端的某些展示页面,经常遇到需要嵌入一个短视频的情况(其实还是某程序媛遇到的情况),通常这个视频上只有一个自定义的播放或者暂停按钮,样式简洁,如下图:为了完成上述需求,写了一个非常简洁的H5播放器,只有暂停和播放(播放一次之后显示重播)操作。具体代码如下:下面的代码直接复制粘贴就可以使用,样式很简陋,但是功能完全OK,根据你的应用场景自己稍加修改吧。原创 2017-09-11 13:38:31 · 1771 阅读 · 0 评论 -
Bootstrap-daterangepicker(时间范围选择器使用及汉化)
你需要引用如下Js文件且顺序不得有误,否则会报诸如$().moment()is not a function的错误,这就是JS文件加载顺序导致的,请不要作死。/*bootstrap*/使用方法很简单:看代码 //这里是汉化方法,不要谢我。 var locale = { "format": 'YYYY-MM-DD', "sepa原创 2017-01-12 20:33:49 · 8708 阅读 · 2 评论 -
hasOwnProperty实现数组去重
var array = [1, 2, 3, 5, 1, 5, 9, 1, 2, 8]; Array.from(new Set(array)); // [1, 2, 3, 5, 9, 8] // ES5 Implementation var翻译 2017-08-23 11:28:20 · 1952 阅读 · 0 评论 -
js,jq监听键盘的组合键事件
解决某程序媛问怎么实现监听用户pc端键盘输入冒号的事件。原创 2017-04-24 10:08:20 · 3569 阅读 · 1 评论 -
JS(JQ)实现带动画的回到顶部效果
实现功能:滚动到页面某一个高度的时候,回到顶部按钮出现。点击之后回到网页顶部,按钮隐藏。原创 2017-04-29 14:28:34 · 4777 阅读 · 1 评论 -
微信小程序(uni-app)url参数传递对象
开发小程序和uni-app时,遇到需要在navigaor组件中传递对象参数到下一个页面的需求,传递对象时如果不JSON.stringify的话,接收到的对象会被转化成[object,object]形式。但是使用字符串化往往还会带来另一个问题,那就是超出规定的长度。那么怎么解决呢?方案如下,两步走:1.使用encodeURIComponent以及JSON.stringify()方法对对象进行字符串...原创 2019-06-10 10:14:16 · 18976 阅读 · 7 评论