前端
关注
分享
扫一扫
折纸成鸢。
记录自己的一些开发经验
展开
-
上下滚动播放效果
1、js //滚动播放动画效果 animationUp(); function animationUp(){ let liDome = document.getElementsByClassName('item'), ulDome = document.getElementsByClassName('list')[0], lis = Array.prototype.slice.call(liDome), liLen = lis.length原创 2020-12-01 11:25:00 · 282 阅读 · 0 评论 -
倒计时
1、倒计时方法：//time 结束时间var showtime = function (time) { let nowtime = new Date(), //获取当前时间 endtime = new Date(time); //定义结束时间 if(endtime.getTime() < nowtime.getTime()){//判断活动时间是否结束 return '活动已结束'; } let lefttime = endtime.getTime() - nowtime.get原创 2020-11-30 15:16:41 · 242 阅读 · 0 评论 -
uni-app组件失效解决方案
uni-app组件失效解决方案1、在官网找到该组件，拷贝官方dome到一个新的项目中，并运行2、如果dome正常运行，则说明是自身代码问题；如果dome也不能正常运行，则为HBuiderx版本问题3、如果出现第一种问题，建议仔细与官网dome对照查看代码，如果没问题就查看是否是其他影响；如果出现第二种问题，则需查看HBuiderx的版本问题，如果是最新版则切换到上一个版本，如果不是可以更新到...原创 2020-04-30 09:35:17 · 5354 阅读 · 0 评论 -
快应用模拟Tabbar
快应用模拟Tabbar原因：由于快应用没有内置的tabbar配置，所以需要我们根据小程序或者App的tabbar样式来模拟一个。这里就会用到组件的思维方式。这样我们就会用到快应用的block组件来切换不同的显示页面，当然底部任然需要我们用到tabs容器来模拟底部tabbar的样式，通过控制tabs里面的tab-bar的点击事件来识别应该切换的block块。实例代码如下：//第一步：组件引入...原创 2020-04-22 16:11:54 · 582 阅读 · 0 评论 -
H5页面适配 iPhoneX，就是这么简单
H5页面适配 iPhoneX，就是这么简单转载 2020-04-15 14:42:03 · 516 阅读 · 0 评论 -
动态创建style标签样式
动态创建style标签样式操作步骤：创建style标签 var stylee=document.createElement(‘style’);给标签添加属性 stylee.type = ‘text/css’;给标签添加id stylee.id = ‘styleId’；设置要添加的字符串 var sHtml = ‘.un-points .un-point-bullet{backgroun...原创 2020-04-15 12:01:31 · 5200 阅读 · 0 评论 -
基于jQuery的可复用轮播图，pc版
基于jQuery的可复用轮播图一、可修改参数参数说明width轮播图宽度 如：690pxheight轮播图高度 如：345pxear是否添加左右点击切换 默认falsedot是否添加底部小圆点切换 默认falsepointBulletColor初始小圆点颜色 格式必须为#fff 或者 #ffffff 默认为#ffffffpo...原创 2020-04-15 11:34:24 · 200 阅读 · 0 评论 -
基于jQuery的自定义倒计时
基于jQuery的自定义倒计时支持传入参数类型：时间类型，数字类型，其中数字类型区分时、分、秒。以下为js代码var countDown = function(dome,time){ this.$dome = $(dome); this.defaults = { time:'',//日期类型 endminute:0,//数字类型 如15分 endsecond:0,//数字类型 ...原创 2020-04-14 17:03:02 · 266 阅读 · 5 评论 -
原生js实现放大镜效果
原生js实现放大镜效果一、案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <style type="text/css"> * { margin:...原创 2020-04-10 22:44:05 · 171 阅读 · 0 评论 -
原生js实现动态时钟
原生js实现动态时钟一、案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>时钟</title> <style type="text/css"> * { margin: 0...原创 2020-04-10 22:25:44 · 607 阅读 · 0 评论 -
自定义iframe弹框
自定义iframe弹框一、参数说明：id：iframe弹出idmId：弹出拖动头部移动位置的区域的idtitle：弹出头部标题content：内容（内容可为文字或者是html页面）area：弹出区域的高宽（为数组类型，如：[‘420px’,‘300px’]）btn：底部按钮设置，可设置多个（如：[‘取消’,‘确定’]）shade：是否显示遮罩（默认为true）success：渲...原创 2020-04-10 18:58:21 · 2636 阅读 · 0 评论 -
web Uploader 图片上传插件
web Uploader 上传插件本插件基于jQuery和webuploader完成webuploader下载路径：http://fex.baidu.com/webuploader/download.html下载完成后将整个包放在你的项目中，然后再引用里面的webuploader.jshtml<div class="k_picture_n" id=“uppicker”> &...原创 2020-03-26 16:29:25 · 442 阅读 · 0 评论 -
子弹窗里调用父页面的函数以及函数传参
子弹窗里调用父页面的函数以及函数传参父页面代码注意：定义与赋值的先后顺序，定义必须在赋值的前面，不然赋值不成功，子弹窗也不能调用父页面的函数 var _tool = { func1:function(Option){ layer.alert(Option) } } window.tool = _tool;子页面代码parent.tool.func1(1)...原创 2020-03-13 14:43:10 · 260 阅读 · 0 评论 -
css自定义滚动条样式
css自定义滚动条样式注意：这种写法火狐浏览器和IE浏览器不支持HTML <body> <div class="kite-scrollbar"> 滚动条默认样式修改 </div> </body>css .kite-scrollbar{ width: 300px; height: 150px;...原创 2020-03-13 11:14:39 · 245 阅读 · 0 评论 -
layer常用功能-子页面关闭当前窗口-执行子页面方法-方法回调
1 子页面关闭当前窗口1.1 获取当前窗口索引，关闭var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);//关闭当前页 1.2 刷新父页面；window.parent.location.reload(); 2 自定义两个按钮执行不同的代码；默认情况下，按钮2会自动关闭当前窗...转载 2020-03-11 18:11:25 · 3003 阅读 · 0 评论 -
类数组转换为数组
/*html*/ <ul class="kite-name"> <li>1</li> <li>2</li> <li>3</li> </ul> /*js*/ var domes = $('ul.kite-name li'); var pDome = Arr...原创 2020-03-11 18:05:08 · 154 阅读 · 0 评论 -
过滤字符串中的HTML编码
过滤字符串中的HTML编码/**value： 需要被替换的字符串option：替换后的值，不需要就不传*/ removeHtml: function (value，option) { var option = option?option：''; if (!value) return '' value = value.toString()...原创 2020-02-25 14:06:27 · 323 阅读 · 0 评论 -
layui导出excel表格
1、layui官网自带的常规导出方法，这种方法可以导出任意数据表，但是这样不能自定义导出表明。table.exportFile(['名字','性别','年龄'], [ ['张三','男','20'], ['李四','女','18'], ['王五','女','19']], 'csv'); //默认导出 csv，也可以为：xls2、运用layui 第三方组件平台的excel插件导出...原创 2020-01-14 16:08:52 · 6789 阅读 · 0 评论 -
数组对象从小到大排序
数组对象从小到大排序 var min,str = []; var sapre =[{sort :2},{sort :1}] for(var i = 0;i<sapre.length;i++ ){ for(var j = i;j<sapre.length;j++){ if(sapre[i].sort > sapre[j].so...原创 2019-12-26 13:44:23 · 863 阅读 · 0 评论 -
数组去重，当遇到重复时跳出循环同时并提示重复
数组去重，当遇到重复时跳出循环同时并提示重复 var falg = true; //数组去重 //1、判断是否是数组 if(!Array.isArray(sapre)){ return } //循环数组 bbq: for (var i = 0;i<sapre.length;i++) { cc...原创 2019-12-26 13:38:50 · 363 阅读 · 0 评论 -
快应用唤醒电话的坑
1、根据官方按照页面路由router唤醒电话唤醒电话router.push({ uri: 'tel:10086'})根据这样是可以成功的唤醒电话，但是在OPPO手机的1051版本的快应用就会出现返回时有一个“页面不见了”的提示，需要再返回一次才可以返回到唤醒电话的那个页面解决办法：运用a标签来唤醒电话，代码如下：<a href="tel:10086">联系我们<...原创 2019-11-25 15:04:24 · 369 阅读 · 2 评论 -
video自动循环播放设置
方法一:在video标签上直接添加autoplay 和loop属性，但直接添加需手动点击播放才可自动循环播放，想要一打开就让video自动循环播放需要添加muted属性，具体代码实现如下：<video id="videos" muted="muted" width="636" height="432" src="home/banner5.mp4" autoplay="autoplay" l...原创 2019-07-03 16:08:00 · 31321 阅读 · 2 评论 -
图片在div中居中显示
1、固定图片宽高，垂直居中显示在div中.images{ position:relative; width:400px; height:400px; overflow:hidden;}.images img.one{ position:absolute; width:200px; height:200px; top:50%; left:50%; margin-top:-1...原创 2019-06-27 17:01:25 · 2335 阅读 · 0 评论 -
jQuery UI的那些坑
contenteditable属性与draggable与resizable同时应用失效问题解决方案1、添加contenteditable属性时直接销毁draggable和resizable2、禁用$("id名").draggable().resizable().click(function(){ $(this).draggable({disabled:false}); $(this).a...原创 2019-05-08 15:59:04 · 586 阅读 · 0 评论 -
div拖动时添加辅助线
div拖动时添加辅助线 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="https://cdn.bootcss.com/jqueryui/...转载 2019-05-05 15:20:02 · 1667 阅读 · 0 评论 -
前端常见问题
forEach 循环1、foreach里面return 直接跳出本次循环，进入下一次循环；splice对数组进行删除、添加操作var arr = [‘1’,‘2’,‘3’]；1、splice(0,0,‘4’) //从第0个位置开始插入2、splice(2,1)//从第2个元素开始删除，删除个数为1个...原创 2019-04-20 15:59:31 · 318 阅读 · 0 评论 -
原生js实现div在窗口内移动
原生js实现div在窗口内移动css样式<style> *{margin:0;padding:0;} #div1{width:200px;height:200px;position:absolute;left:500px;background:red;}</style>html<body> <div id="div1"></d...原创 2019-04-19 19:42:11 · 1309 阅读 · 0 评论 -
动态加载js文件
function loadJs(url, callback) { var script = document.createElement('script'); script.type = "text/javascript"; script.charset = "UTF-8"; if(typeof(callback) != "undefined") { if(script.readySt...转载 2019-03-05 15:56:39 · 136 阅读 · 0 评论 -
javascript中apply、call和bind的区别
在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之处：1、都是用来改变函数的this对象的指向的。2、第一个参数都是this要指向的对象。3、都可以利用后续参数传参。那么他们的区别在哪里的，先看一个例子。 var xw = { name : "小王", ...转载 2018-12-10 09:53:17 · 136 阅读 · 0 评论 -
nodejs安装 vue安装 webpack安装
1、下载路径https://nodejs.org/en/ 下载LTS版本的nodejs2、安装注意（1）自行修改安装路径，如：D:\nodejs（2）选择Add to PATH ,默认会添加到path环境变量去（3）一直点next知道finish3、打开cmd，检查是否正常（1）echo %PATH% 查看环境变量，如果出现D:\nodejs说明安装成功。（2）node -v 查看...转载 2018-12-04 09:57:06 · 685 阅读 · 0 评论 -
多分辨率适配一步到位
设置div高宽才用vw+calc()函数，如：height: calc(100vw/192080);字体适配，如：font-size: calc(100vw/192016);本人亲测，这样写兼容绝大部分分辨率的电脑，而有一些小部分分辨率会出现字体适配的同时和外层div宽度不够导致换行的问题存在，但只要细微调节宽度就可以了。...原创 2019-07-09 16:43:21 · 324 阅读 · 0 评论 -
JavaScript将document.getElementsByClassName获取的类数组转化为数组的方法
Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 var dome = document.getElementsByClassName("sixitem");var domes = Array.prototype.slice.call(dome); console.log(domes )原创 2019-07-10 11:58:32 · 3776 阅读 · 0 评论 -
解决快应用input失去焦点后键盘不收回
手动添加input失去焦点事件this.$element(‘你的inputid’).focus({focus:false});原创 2019-10-08 17:32:45 · 1955 阅读 · 0 评论 -
快应用环境安装
1、安装前必读首先进入快应用官网（https://doc.quickapp.cn），点击开发者文档仔细阅读总览里面的使用命令行，里面有详细的环境安装流程。这里的环境安装好后基本是可以使用的，当然这样一点也不符合我们的习惯，所以官方推出了自己的开发者工具。可以自行在官网开发者工具里面选择匹配自己电脑版本的开发者工具。这里说一下开发者工具我安装后遇到的一个问题，就是安装完后我是英文版本的，这时我想要...原创 2019-09-21 15:03:48 · 550 阅读 · 0 评论 -
受行高影响没有中心对齐问题
问题如图，左侧图片受右侧文字行高影响图片与文字中心没有对齐：如下图样式如下： <view class="kite-goods-title"> <view class="kite-title-icon"> <image src="img.pne" mode="aspectFit"></image> <...原创 2019-09-10 16:59:05 · 251 阅读 · 0 评论 -
uni-app scroll-view横向滚动设置
1、单排横向滚动html<scroll-view scroll-x="true" class="kite-classify-scroll"><view class="kite-classify-cell"></view><view class="kite-classify-cell"></view><view class=...原创 2019-09-03 12:03:46 · 9354 阅读 · 0 评论 -
移动端1px 问题
1、阴影解决法使用box-shadow模拟边框.kite-coupon-title{box-shadow: inset 0px -1px 1px -1px #999999;}优点：代码量少缺点：颜色变浅2、伪类 + transform 实现单边.kite-bind-input{ position: relative; width: 564upx; height: 1...原创 2019-09-05 14:54:48 · 165 阅读 · 0 评论 -
去掉图片颜色css
直接给图片添加过滤原创 2019-08-30 10:05:30 · 726 阅读 · 0 评论 -
20个让你效率更高的CSS代码技巧
看到一篇觉得很有用的文章，在这里转载记录一下：转载自：https://segmentfault.com/a/1190000019542534在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。1.注意外边距折叠与其他大多数属性不同，上下的垂直外边距margin在同时...转载 2019-07-11 11:00:56 · 184 阅读 · 0 评论 -
解决js的hover事件鼠标滑过失效
<div id="meun-container"></div> var hoverTimer,outTimer; $("#meun-container").hover(function(){ clearTimeout(outTimer); hoverTimer = setTimeout(function(){ 事件处理代...原创 2019-07-10 14:48:47 · 1323 阅读 · 0 评论