js
帆酱
这个作者很懒,什么都没留下…
展开
-
vue监听鼠标与键盘事件
【代码】vue监听鼠标与键盘事件。原创 2023-06-19 16:42:51 · 3200 阅读 · 0 评论 -
js正则处理字符串将整个带特殊class的ele删除
代码:GetTagByClassUsingRegex (tag, cls, html) { // tag:标签名,cls:类名,html:要处理的字符串 var reg = new RegExp('<' + tag + "[^>]*class[\\s]?=[\\s]?['\"]" + cls + "[^'\"]*['\"][\\s\\S]*?<\/" + tag + '>', 'g') return html.replace(reg, '') }原创 2021-09-06 08:36:05 · 482 阅读 · 0 评论 -
使用codemirror搭建自己的在线代码编辑器——博客、文档必备
在博客或者文档中只进行代码展示往往因为太抽象,使得刚入门小白无法熟练使用,因此可展示、修改并能显示结果的在线代码编辑器成为了首选,但是有的第三方在线编辑器并不稳定,而国外的一些也因速度慢或无法访问而不尽人意,想来想去,还是自己弄吧。直接打开预览:https://my.weblf.cn/h5_editor/插入文档里的预览:https://my.weblf.cn/vuecli3_wp4_alone_demo/linf-ui.htmldemo下载:https://tx.weblf.cn/down/h原创 2020-09-17 22:24:59 · 2187 阅读 · 1 评论 -
一个简单的双转盘抽奖demo
今天遇到朋友要我给他写个双转盘抽奖功能,需要要两个转盘联动。不好推却得我只能开始动手了,图片什么的都是在网上找的。首先抽奖这玩意的奖品控制当然是在后台啦,不然安全性就太低了。所以我选择先有抽奖结果,再转动转盘。线上demo:https://my.weblf.cn/xly/demo/choujiang/zhuanpan.html废话不多说,先上代码css:*{ ...原创 2018-06-04 15:52:30 · 1949 阅读 · 0 评论 -
使用拖放排序插件Sortable.js
Sortable 是一个JavaScript库,用于在现代浏览器和触摸设备上重新排序拖放列表。不需要jQuery。支持 Meteor, AngularJS, React, Polymer, Vue, Knockout 和任何CSS库, 例如 Bootstrap.中文文档:http://www.sortablejs.com/安装方式:npm安装、bower安装、script引入都可,本文采用...原创 2020-04-04 16:10:17 · 852 阅读 · 0 评论 -
vue的sku前端实现(商城选择规格)
库存保有单位 (Stock keeping Unit 或者SKU)是对每一个产品和服务的唯一标示符,该系统的使用SKU的值根于数据管理,使公司能够跟踪系统,如仓库和零售商店或产品的库存情况。在开发商城时,我们需要对商品的sku进行判断,当用户选择完一个规格后,去判断剩下的未选规格是否继续选择,可提高用户体验。线上demo:https://my.weblf.cn/alone_page/pag...原创 2020-03-06 17:04:54 · 5204 阅读 · 5 评论 -
H5在浏览器端使用mint-ui
H5在浏览器端使用mint-ui框架,直接通过cdn引入<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><script src="https://unpkg.com/mint-ui/lib/index.js"></script>线上demo:https://m...原创 2020-03-03 14:59:43 · 1455 阅读 · 0 评论 -
浏览器端使用less
官网地址http://lesscss.cn/1、通过在官网或者GitHub下载less.min.js文件,也可通过官网的cdn引入2、编辑一个less文件test.less(注意,只能用link方式引入,style标签不支持).ccc{ color: red;}3、编辑html页面<!DOCTYPE html><html> ...原创 2020-03-02 22:03:05 · 405 阅读 · 0 评论 -
iOS设备 微信h5页面回退 内容不刷新的问题
在android 浏览器 包括微信的开发者工具 都是返回后刷新页面了的,但是在ios端则有一些情况是不刷新的比如history.go(-1),history.back()等,只有跳转页面是可以的,如window.location.href初步推断是微信在ios端为了加快页面加载使用了类似于快照功能,使其在返回页面时可以快速渲染页面。解决方法,在代码里加入此项段jslet agen...原创 2020-02-23 16:52:10 · 1353 阅读 · 0 评论 -
H5横幅,旗帜飘动动画
核心思路是将已有的图片通过背景图片定位设置在不同的元素上,给元素添加动画,使之看起来有飘动的感觉。如果米有现有图片,则使用截图工具生成图片。参考博文:https://my.oschina.net/codingDog/blog/1839097一、有现成图片线上demo:https://my.weblf.cn/alone_page/css_ani/flag2.html代码:<...原创 2020-02-05 11:56:36 · 3039 阅读 · 0 评论 -
使用npm发布自己的npm包
一、在npm的官网上注册一个账号,https://www.npmjs.com/二、在要发布包的项目里打开命令行,输入使用npm login命令登录在项目的package.json中一些提示性文字"name": "项目名字", "version": "版本,每次提交时版本要高于旧的才能覆盖", "createTime": "项目创建时间", "updateTime":...原创 2019-12-22 23:17:26 · 3569 阅读 · 0 评论 -
H5 canvas的使用(二):移动端手势密码
线上demo:https://my.weblf.cn/xly/demo/canvas/hand.html代码:<!DOCTYPE html><html><head lang="en"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us...原创 2019-11-30 23:19:47 · 551 阅读 · 0 评论 -
echarts折线图单组数据配置
线上demo:https://my.weblf.cn/alone_page/echarts/line1.html祥见代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...原创 2019-11-13 12:27:16 · 399 阅读 · 0 评论 -
vue多语言转换的几种方法
一、静态转换使用 Vue 插件language-tw-loader 在打包时把本地的文字转换成繁体,动态加载的文字不会转换。也就是说接口返回的文字不会自动转换。 打包后无法再切换为简体。除非专门打一个简体的包。使用方式1、安装插件npm i language-tw-loader --save2、修改 webpack 配置文件webpack.base.conf.jsm...原创 2019-11-05 11:51:50 · 2901 阅读 · 4 评论 -
H5 jq+canvas实现pc写字板功能
如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉。如果有什么错误,请一定指出,以免误导大家、也误导我。线上demo1:点击查看线上demo2:点击查看实现此功能需掌握一些基本的canvas语法。demo1代码:<!DOCTYPE html><html><head> <meta charset="UTF-8...原创 2019-11-02 15:13:07 · 821 阅读 · 0 评论 -
H5使用photo-sphere-viewer.js实现360°全景
官方网站:https://photo-sphere-viewer.js.org/线上demo:点击查看需要引入的文件<link rel="stylesheet" href="./css/photo-sphere-viewer.min.css"><!-- 3D --><script src="./js/three.min.js"></scr...原创 2019-11-01 13:15:37 · 5074 阅读 · 29 评论 -
swiper5切换页面数据动态加载
如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉。如果有什么错误,请一定指出,以免误导大家、也误导我。swiper官方网址:点击查看线上demo:点击查看核心方法,在当前Slide切换到另一个Slide时执行:<script language="javascript"> var mySwiper = new Swiper('.swiper-cont...原创 2019-11-01 11:15:18 · 2313 阅读 · 0 评论 -
vue使用domtoimage实现移动端H5页面截图
dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像的库。 它基于Paul Bakaus的domvas并且已被完全重写,修复了一些错误并添加了一些新功能(如Web字体和图像支持)。github:点击查看线上demo:点击查看npm安装和引用npm install dom-to-imageimport ...原创 2019-10-31 12:28:46 · 4579 阅读 · 1 评论 -
vue使用html2canvas实现移动端H5页面截图
html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。点击查看:官方文档点击查看:线上demo安装引用html2canvasnpm install html2canvasimport...原创 2019-10-31 12:16:24 · 2075 阅读 · 4 评论 -
基于vue的自定义日历组件
如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉。希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误,请一定指出,以免误导大家、也误导我。项目github地址线上demo地址使用步骤:1、安装包cnpm i2、运行devnpm run dev项目目录:自定义农历节日:yinli_festival.json{ "01...原创 2019-10-20 23:55:23 · 1944 阅读 · 2 评论 -
一个基于WabPack4的 Vue 多页面原生写法脚手架
如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉。希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误,请一定指出,以免误导大家、也误导我。项目github地址线上demo地址vue_no_cli_multiple_page根据官方文档修改,不使用vue-cli多页面项目,基于webpack4,热更新超快项目结构:,pages目录:为验证热更新...原创 2019-10-17 10:39:56 · 233 阅读 · 0 评论 -
Vue爬坑之旅(八):vue单页面中锚点跳转
一般情况下我们在html中使用锚点时会利用链接方式请求‘#+id名称’,此时会在url后面跟一个#号。但是在单页面中会有路由误判的情况。所以在单页面中锚点可改为参数传递的方式。一、封装一个外部js:anchor.js//锚点跳转function goAnchor(selector) { var anchor = this.$el.querySelector(selector);...原创 2019-01-08 23:24:49 · 3632 阅读 · 1 评论 -
使用H5与flash兼容不同浏览器的视频播放
通过 var hasVideo = !!(document.createElement('video').canPlayType);判断当前浏览器是否支持<video>标签,如果支持,则使用h5自带的<video>标签播放,否则,使用flash播放。线上demo:https://my.weblf.cn/xly/demo/media_play/flash_h5...原创 2018-07-02 16:36:52 · 6022 阅读 · 0 评论 -
一个基于vueCli3的移动端多页面脚手架
Vue Multiple Pages基于vue-cli3.0 + webpack@4.28.4的多页脚手架项目地址:点击此处线上demo:点击此链接编译速度与热跟新速度要优于webpack2.0、3.0,但相应的消耗内存变大,在node中出现内存溢出现象,如页面过多,使用npm run fix-memory-limit再进行npm run devProject ...原创 2019-08-10 13:46:43 · 3122 阅读 · 0 评论 -
Vue爬坑之旅(二十三):vue中添加百度统计代码
一、在百度统计网站中添加自己的网站1、官网地址:https://tongji.baidu.com/web/welcome/login。2、在’管理‘一栏中选择‘网站列表’,然后选择新增网站,添加成功后点击代码获取,可以获取统计代码。二、在maim.js下百度统计代码添加var _hmt = _hmt || [];window._hmt = _hmt; // 必须把_hmt...原创 2019-07-27 16:52:39 · 3639 阅读 · 0 评论 -
H5 canvas的使用(一)
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。在绘制canvas前,要先定义一个矩形框,如果你的浏览器不支持canvas标签,则标签内的...原创 2018-07-06 17:52:39 · 10450 阅读 · 0 评论 -
使用Format方法转换时间格式
开局一个时间戳,格式全靠拆。为了节省开发者的时间,于是有人封装了Format方法。代码如下://format方法 Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), ...原创 2018-07-23 16:01:27 · 12260 阅读 · 2 评论 -
使用jquery-circle-progress绘制canvas渐变环形进度条
本文介绍如何使用jquery-circle-progress绘制canvas渐变环形进度条。先引入文件:<script src="jquery-1.11.0.min.js"></script><script src="circle-progress.js"></script>再创建html元素:<div id="circl...原创 2018-07-03 16:36:57 · 6081 阅读 · 0 评论 -
canvas使用two.js模拟小程序首页气泡效果
使用canvas框架two.js模拟微信小程序首页气泡动画线上demo:https://my.weblf.cn/xly/demo/twojs/wx_developer_twojs.html直接上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...原创 2018-06-27 17:54:22 · 1178 阅读 · 0 评论 -
移动端转盘指针触摸旋转
如果想让一个元素一端固定,然后绕固定的点自动旋转比较容易,但是如果想要用手指控制旋转则就需要考虑偏转这角度的问题了。线上demo:https://my.weblf.cn/xly/demo/time_pal_rote.html话不多说,先上代码:<!DOCTYPE html><html> <head> <meta charset="UT...原创 2018-06-27 14:14:47 · 3708 阅读 · 0 评论 -
echarts柱状图单组数据配置
var option = { //标题栏 title: { text: '客户总体分析', bottom: '0', left: '35%' }, //选中时弹出的悬浮框 tooltip: { trigger: 'axis', //'item',数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。'ax...原创 2018-06-01 16:51:17 · 703 阅读 · 0 评论 -
js判断浏览器所在的客户端类型
判断手机类型var u = navigator.userAgent;let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if(isAndroi...原创 2018-06-01 10:42:40 · 241 阅读 · 0 评论 -
js判断某个元素是否属于一个数组
function IsInArray(arr,val){ var testStr=','+arr.join(",")+","; return testStr.indexOf(","+val+",")!=-1; } var arr=[1,2,6,4,'5','s','f','a'];原创 2018-05-31 17:25:19 · 2461 阅读 · 0 评论 -
echarts柱状图多组数据配置
一共三组数据var map4_data1=[320, 332, 301, 334, 390,360,320, 332, 301, 334, 390,360];var map4_data2=[220, 182, 191, 234, 290,320,220, 182, 191, 234, 290,320];var map4_data3=[150, 232, 201, 154, 190,150...原创 2018-06-04 09:47:02 · 12094 阅读 · 0 评论 -
echarts地图城市散点图
给每个城市自定义坐标,根据每个城市的value值所在范围给每个坐标点设置不同的颜色,鼠标悬停显示tip,tip值为城市名称以及value。效果图:demo:点击查看代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&am原创 2018-07-28 15:02:15 · 12416 阅读 · 14 评论 -
一些常用的js正则表单验证
前端一般为了防止用户误输入,或者为了使用户获取最快的反馈,常常在表单设置正则验证,下面就让我介绍几个常用的正则验证。大家也可以在demo里实际操作一下。demo地址:点击查看html:<div class="inp_box"><h3>请输入整数(1):</h3><input type="text" placeholder="请输入" onin...原创 2018-07-20 17:06:14 · 263 阅读 · 0 评论 -
js中图片base64格式转文件对象
通常我们使用裁剪工具裁剪图片后输出的格式为base64格式,而有时需要将图片转为源文件。function dataURLtoFile(dataurl, filename) {//将base64转换为文件,dataurl为base64字符串,filename为文件名(必须带后缀名,如.jpg,.png) var arr = dataurl.split(','), mime = ar...原创 2019-07-31 23:47:15 · 3069 阅读 · 0 评论 -
Vue爬坑之旅(二十一):vue使用富文本编辑器vue-quill-editor实现配合后台将图片上传至七牛
一、全局注册:main.jsimport Vue from 'vue'import VueQuillEditor, { Quill } from 'vue-quill-editor'import { ImageDrop } from 'quill-image-drop-module'import ImageResize from 'quill-image-resize-module'...原创 2019-06-08 15:24:22 · 4798 阅读 · 1 评论 -
使用YUIDoc创建js文档
什么是YUIDoc?YUIDoc会根据你写的代码注释生成API文档。YUIDoc是个NodeJS应用,能将你的JS代码中的注释生成HTML格式的API文档。事实上,不仅是JS,任何支持块注释的语言都能使用。安装要安装YUIDoc,首先要安装好NodeJS,然后使用npm -g install yuidocjs即可安装YUIDoc。使用在相应的目录下输入 yuidoc ....原创 2019-03-18 22:55:12 · 487 阅读 · 0 评论 -
Vue爬坑之旅(十六):storejs一款好用的本地存储插件
store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash。store.js 会根据浏览器自动选择使用localStorage、globalStorage 或者 userData 来实现本地存储功能。本章介绍在vue中使用store.js一、安装npm install storejs --save二、引入可以全局引...原创 2019-02-12 17:35:08 · 4365 阅读 · 8 评论