- 博客(39)
- 收藏
- 关注
RSS订阅原创 vue事件委托传递节点防止向下传递穿透
例如：<li @click="popSelect($event)"> <span>Bank Country</span> <input type="text" placeholder="Select bank country" v-model="model.bank_country" name="bank_country" readonly /> <van-icon name="arrow-down"></van-i
2022-01-20 16:29:40
4218
2
原创 js运算符
一、|| 和 ??||eg:var a = obj || {}代表 obj ！= 0 || obj === "" || obj ！= false || obj ！= null || obj ！= undefined时a = obj，否则a={}??eg:var a = obj ?? {}代表 obj ！= null || obj ！= undefined时a = obj，否则a={}二、! 和 !!！！代表取反，例如!null=true !undefined=true !
2022-01-07 16:28:44
304
原创 正则仅输入文字字母空格，但必须含有字母
/^(?!\d+$)[\s\da-zA-Z]+$/意为正则仅输入文字字母空格，但必须含有字母(?!\d+$) 正方向上查找“非至少一个数字结尾”处才开始匹配，且返回空。（为什么是空，(?!\d+$)前什么也没有写，等于即使满足正则的条件也不会得到任何东西）以上用^号限定死了开头为“空”，且“空”的后面不可以是一个或多个数字结尾，所以我们能想办法让第一个“空”后面不是数字结尾，方能匹配到结果。(?!\d+$)其中的\d代表不能只有数字，可以任意加入自己想要的规则，比如加入\s代表不能只有空格[
2022-01-04 12:02:56
888
原创 滑动图片验证以及滑块验证
1、图片验证longbow.slidercaptcha包下载地址以及示例https://github.com/Yephy/SliderCaptchahttps://gitee.com/JayZhou/SliderCaptcha2、滑块验证slideunlock包下载地址以及示例http://www.internetke.com/effects/css3/2019/0410/2009.htmlvue版本https://gitee.com/mycssweb/vue-simple-verify
2021-04-29 16:29:59
852
原创 前端技巧——js篇
前端技巧——js篇复制操作copy () { let url = this.code; let oInput = document.createElement('input'); oInput.value = url; document.body.appendChild(oInput); oInput.select(); // 选择对象 console.log(oINput.value); document.execCommand('Cooy'); // 执行浏览器复制命
2021-04-22 17:52:06
72
原创 移动端实现hover效果
document.body.addEventListener(‘touchstart’, function(){ });加上这行代码，空函数就行然后：hover改成：active，实现PC端hover效果
2021-04-13 11:05:46
2753
原创 Tailwind CSS 是一个工具集 CSS 框架
Tailwind CSS 是一个工具集 CSS 框架，助你快速实现定制化的网站设计。Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。官网：https://www.tailwindcss.cn/...
2021-03-10 15:40:13
173
转载 JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性
https://zhuanlan.zhihu.com/p/354901519
2021-03-10 15:07:59
135
原创 常用的前端JavaScript方法封装（49种）
1、输入一个值，返回其数据类型function type(para) {return Object.prototype.toString.call(para)}2、数组去重function unique1(arr) {return […new Set(arr)]}function unique2(arr) {var obj = {};return arr.filter(ele => {if (!obj[ele]) {obj[ele] = true;return true;}
2021-03-10 13:57:47
278
原创 @keyframes中translate和scale混用问题
当你动画的这个节点用到translate定位居中时，再使用动画scale就会出现不居中的问题这时需要把@keyframes中translate写在scale的前面就解决了@keyframes bubble-in { 0% { transform:translateX(-50%) scale(0); } 100% { transform:translateX(-50%) scale(1); }}...
2021-01-06 11:52:39
1455
原创 vmin、vmax用处
vmin、vmax用处100vmin指的是屏幕宽和高中较小的那个100vmax指的是屏幕宽和高中较大的那个做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。...
2020-12-03 17:19:44
2150
原创 vue 3D旋转木马轮播图
利用carousel-3d插件。安装npm install -S vue-carousel-3d全局引入import Vue from 'vue'import Carousel3d from 'vue-carousel-3d'Vue.use(Carousel3d）局部引入import { Carousel3d, Slide } from "vue-carousel-3d";export default { components: { Carousel3d, Sli
2020-11-25 15:29:20
5079
原创 一些实用却很少用到的css以及标签
1、p:first-letterp标签里的第一个字设置样式p:first-letter{font-size:200%;color:#8A2BE2;}<p>My best friend is Mickey.</p>2、p:first-linep标签里的设置第一行样式3、:not（p）设置非 p元素的所有元素的背景色...
2020-11-24 17:23:06
137
原创 css裁剪clip-path画多边形
有三种属性第一种 circle 画圆clip-pat: circle(30%); 30%为半径大小clip-path: circle(50% at 50% 50%); 后面的50%为圆心位置第一种 ellipse 椭圆clip-path: ellipse(32% 43% at 49% 50%); 32%为宽 43%为高 后面两个49%，50%为圆心位置第一种 polygon 多边形clip-path: polygon(14% 10%, 100% 9%, 100% 100%, 0 83%);
2020-11-20 18:36:59
715
原创 JQ trigger触发a标签点击事件
trigger() 方法触发被选元素的指定事件类型。$("a").trigger('click') ;这样直接触发a标签上的点击事件无法生效需要绑定给a标签的子集$("a span").trigger('click') ;jq触发a标签跳转成功
2020-11-20 09:55:33
466
1
原创 html头部尾部分离组件引入（JQ）
html写官网之类，我们经常会有很多页面同一头部和尾部，我们把它们分离出来，组件引入vue等框架类的就不说了，主要是说html原生态的（如果是PHP文件可以直接include() 或 require() 函数引入html文件）用到JQ里面的load方法<body> <div class="headerpage"></div> <div></div> <div class="footerpage"></div>
2020-11-10 16:30:36
1332
原创 移动端禁止视频自动全屏播放
<video x5-playsinline="" playsinline="" webkit-playsinline=""></video>在标签上加上 x5-playsinline="" playsinline="" webkit-playsinline="" 解决问题
2020-11-04 17:46:25
649
原创 图片宽高自动适配
一些长宽比不同的图片适应盒子，我们往往用js获取图片宽高，得到宽高谁长，让长边100%。其实用css就可以解决,这样无论长边是谁都能适配屏幕了imh{max-width:100%；max-height:100%;}
2020-11-04 09:30:40
242
原创 vue监听滚动开始与结束
data{oldScrollTop: 0, //记录上一次滚动结束后的滚动距离scrollTop: 0 ,// 记录当前的滚动距离}watch: { scrollTop(newValue, oldValue) { setTimeout(() => { if(newValue == window.scrollY) { //延时执行后当newValue等于window.scrollY，代表滚动结束 console.log('滚动结束'); this
2020-10-29 19:41:18
1714
1
原创 swiper 滑动出现闪白
在做一个移动端项目时，用swiper 做的页面切换，但是页面里面还会有swiper轮播图 和其他内容，在滑动外部swiper时，除开里面swiper的元素会发生闪动的情况。解决方法：给外部元素的父标css套一个（swiper-container）：transform:translate3d(0,0,0);闪动元素/子元素（swiper-slide）：transform:translate3d(0,0,0)这样就解决了页面闪动的问题...
2020-10-29 18:16:16
2271
原创 处理后台返回文本带空格和换行页面不显示断句的问题
有时候接口返回文本数据是空格分开或者手动换行分开的，在页面上显示成一堆，只要在该节点上加上css 文本段落换行white-space: pre-wrap;
2020-10-28 15:45:50
421
原创 vue swiper循环播放无效解决
因为swiper内容是动态的，初始化时没有数据，所以加上observer:true,//修改swiper自己或子元素时，自动初始化swiperobserveParents:true,//修改swiper的父元素时，自动初始化swiper,两行代码还需要在swiper上写个v-if判断有数据后才显示轮播图<swiper :options="storySwiperOption" v-if='detailData.pictures'> <swiper-slide class='f
2020-10-28 15:43:16
887
原创 web app小程序各种客服窗口插件
http://qiyukf.com/docs/guide/web/# 网易七鱼在线客服<html> <head> <title>在线客服</title> <meta charset="utf-8"/> </head> <body> <script> (function (w, d, n, a, j) {
2020-10-22 14:28:33
424
原创 TradingView用于画K线图表
附上两个文档链接：官方文档链接：https://github.com/tradingview/charting_library/wiki（需向官方申请）中文文档链接：https://zlq4863947.gitbooks.io/tradingview/（转）
2020-10-21 11:43:13
1236
原创 websocket阮一峰博客地址教学
http://www.ruanyifeng.com/blog/2017/05/websocket.htmlWebSocket 教程
2020-10-21 11:01:29
446
原创 vue路由懒加载和组件懒加载
vue路由懒加载和组件懒加载其实原理一样常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import路由懒加载ES 提出的import方法，方法如下：const HelloWorld = （）=>import('需要加载的模块地址')（不加 { } ，表示直接return）import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const HelloWorld = ()=>import
2020-10-21 10:24:21
440
原创 grid比flex更强大的属性
dispaly:grid;网格布局学习博客地址http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
2020-10-20 14:58:00
117
原创 客户端版本和服务器版本上传软件
FileZilla是一个免费开源的FTP软件，分为客户端版本和服务器版本，具备所有的FTP软件功能。可控性、有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP客户端工具，而FileZilla Server则是一个小巧并且可靠的支持FTP&SFTP的FTP服务器软件。FileZilla是一种快速、可信赖的FTP客户端以及服务器端开放源代码程式，具有多种特色、直接的接口。FileZilla在2002年11月获选为当月最佳推荐专案。...
2020-10-20 11:44:59
158
原创 d3.js(相当于svg的JQ)
学习文档https://d3js.org/ 官网https://github.com/xswei/d3js_doc/tree/master/d3js_doc_old 中文文档https://www.cnblogs.com/fastmover/p/7779660.html 学习demo
2020-10-16 16:03:53
244
原创 JQ ajax解决跨域
JQ ajax请求失败 “No Transport”，浏览器跨域的意思。jQuery.support.cors = true；请求前添加这行代码，解决跨域问题
2020-09-25 17:48:01
283
原创 JavaScript toLocaleString()时间转化为字符串
根据本地时间把 Date 对象转换为字符串：var d=new Date();var n=d.toLocaleString();n 输出结果:2020/9/23 下午2:29:43还可以将数字变成千分位格式:let num=12345678;console.log(num.toLocaleString()); // 12,345,678
2020-09-23 14:32:39
551
原创 移动端隐藏滚动条（最全面）
网上查的基本都是坑爹的，都没写全html,body{//隐藏滚动条height: 100vh;overflow-y: scroll;&::-webkit-scrollbar {display: none;}}需要设置高度，还要设置哪个方向的滚动scrol，l一个都不能少，
2020-09-23 09:39:22
682
原创 原生和h5桥接
//桥接function setupWebViewJavascriptBridge(callback) {if (window.WebViewJavascriptBridge) {return callback(window.WebViewJavascriptBridge)}if (window.WVJBCallbacks) {return window.WVJBCallbacks.push(callback)}window.WVJBCallbacks = [callback]let WV
2020-08-28 20:20:16
883
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人