01 2020 档案

使用百度分享api实现网页分享功能
摘要：百度官方文档：http://share.baidu.com/code/advance#toid 线上demo：https://my.weblf.cn/xly/demo/web_share.html 首先先引入外部文件： with(document)0[(getElementsByTagName('h 阅读全文
posted @ 2020-01-05 00:13 帆酱 阅读(2032) 评论(1) 推荐(0)
百度地图给指定的点加标签
摘要：本文介绍利用百度地图api先显示地图，然后在地图上标记一个或者多个点，然后将每个点的自定义标签用tip的方式展现出来。 效果截图： 代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html 阅读全文
posted @ 2020-01-05 00:02 帆酱 阅读(2097) 评论(0) 推荐(1)
echarts中国地图使省份选择性滑动或点击高亮
摘要：本文介绍echarts显示中国省份图，对于需要高亮的省份进行筛选。并且对省份进行选择性交互。 首先我们需要一个颜色集合，代表我们要设置多少种颜色。这里用到了dataRange。 dataRange: { show:false, x: 'left', y: 'bottom', splitList: [ 阅读全文
posted @ 2020-01-05 00:00 帆酱 阅读(7596) 评论(10) 推荐(3)
一些常用的js正则表单验证
摘要：前端一般为了防止用户误输入，或者为了使用户获取最快的反馈，常常在表单设置正则验证，下面就让我介绍几个常用的正则验证。大家也可以在demo里实际操作一下。 demo地址：点击查看 html： <div class="inp_box"><h3>请输入整数(1):</h3><input type="tex 阅读全文
posted @ 2020-01-04 23:54 帆酱 阅读(580) 评论(0) 推荐(0)
echarts地图城市散点图
摘要：给每个城市自定义坐标，根据每个城市的value值所在范围给每个坐标点设置不同的颜色，鼠标悬停显示tip，tip值为城市名称以及value。 效果图： demo：https://my.weblf.cn/xly/demo/echarts/map/map_china_city.html 代码： <!DOC 阅读全文
posted @ 2020-01-04 23:52 帆酱 阅读(2334) 评论(0) 推荐(0)
移动端转盘指针触摸旋转
摘要：如果想让一个元素一端固定，然后绕固定的点自动旋转比较容易，但是如果想要用手指控制旋转则就需要考虑偏转这角度的问题了。 线上demo：https://my.weblf.cn/xly/demo/time_pal_rote.html 话不多说，先上代码： <!DOCTYPE html> <html> <h 阅读全文
posted @ 2020-01-04 23:49 帆酱 阅读(638) 评论(0) 推荐(0)
echarts柱状图单组数据配置
摘要：var option = { //标题栏 title: { text: '客户总体分析', bottom: '0', left: '35%' }, //选中时弹出的悬浮框 tooltip: { trigger: 'axis', //'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使 阅读全文
posted @ 2020-01-04 23:47 帆酱 阅读(1780) 评论(0) 推荐(0)
js判断浏览器所在的客户端类型
摘要：判断手机类型 var u = navigator.userAgent; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 let isiOS = !!u.match(/\(i[^;]+;( 阅读全文
posted @ 2020-01-04 23:44 帆酱 阅读(250) 评论(0) 推荐(0)
js判断某个元素是否属于一个数组
摘要：function IsInArray(arr,val){ var testStr=','+arr.join(",")+","; return testStr.indexOf(","+val+",")!=-1; } 阅读全文
posted @ 2020-01-04 23:35 帆酱 阅读(1631) 评论(0) 推荐(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,3 阅读全文
posted @ 2020-01-04 23:34 帆酱 阅读(10960) 评论(0) 推荐(1)
Vue爬坑之旅(二)：vue单页面二级套嵌路由
摘要：在一个单页面应用里使用二级套嵌路由 目录结构如下： 其中main.js为全局配置文件，App.vue为项目入口。 main.js中路由配置如下 import Vue from 'vue'//引入vue import App from './App'//引入主模板 import Router from 阅读全文
posted @ 2020-01-04 23:32 帆酱 阅读(855) 评论(0) 推荐(0)
Vue爬坑之旅（八）：vue单页面中锚点跳转
摘要：一般情况下我们在html中使用锚点时会利用链接方式请求‘#+id名称’，此时会在url后面跟一个#号。但是在单页面中会有路由误判的情况。所以在单页面中锚点可改为参数传递的方式。 一、封装一个外部js：anchor.js //锚点跳转 function goAnchor(selector) { var 阅读全文
posted @ 2020-01-04 23:17 帆酱 阅读(3944) 评论(2) 推荐(0)
storejs一款好用的本地存储插件
摘要：store.js 是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash。store.js 会根据浏览器自动选择使用 localStorage、globalStorage 或者 userData 来实现本地存储功能。 本章介绍在vue中使用store.j 阅读全文
posted @ 2020-01-04 23:15 帆酱 阅读(6411) 评论(0) 推荐(0)
使用YUIDoc创建js文档
摘要：什么是YUIDoc？ YUIDoc会根据你写的代码注释生成API文档。 YUIDoc是个NodeJS应用，能将你的JS代码中的注释生成HTML格式的API文档。事实上，不仅是JS，任何支持块注释的语言都能使用。 安装 要安装YUIDoc，首先要安装好NodeJS，然后使用 npm -g instal 阅读全文
posted @ 2020-01-04 23:10 帆酱 阅读(363) 评论(0) 推荐(0)
js中图片base64格式转文件对象
摘要：通常我们使用裁剪工具裁剪图片后输出的格式为base64格式，而有时需要将图片转为源文件。 可用如下方法 function dataURLtoFile(dataurl, filename) {//将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如. 阅读全文
posted @ 2020-01-04 22:59 帆酱 阅读(5972) 评论(0) 推荐(0)
vue中添加百度统计代码
摘要：一、在百度统计网站中添加自己的网站 1、官网地址：https://tongji.baidu.com/web/welcome/login。 2、在’管理‘一栏中选择‘网站列表’，然后选择新增网站，添加成功后点击代码获取，可以获取统计代码。 二、 在maim.js下百度统计代码添加 var _hmt = 阅读全文
posted @ 2020-01-04 22:57 帆酱 阅读(1512) 评论(0) 推荐(0)
一个基于vueCli3的移动端多页面脚手架
摘要：Vue Multiple Pages 基于vue-cli3.0 + webpack@4.28.4的多页脚手架 项目地址：点击此处 线上demo：点击此链接 编译速度与热跟新速度要优于webpack2.0、3.0，但相应的消耗内存变大，在node中出现内存溢出现象，如页面过多，使用 npm run f 阅读全文
posted @ 2020-01-04 09:50 帆酱 阅读(1603) 评论(4) 推荐(0)
一个基于WabPack4的 Vue 多页面原生写法脚手架
摘要：如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误，请一定指出，以免误导大家、也误导我。 项目github地址 线上demo地址 vue_no_cli_multiple_page 根据官方文档修改，不使用vue-cli多页面项 阅读全文
posted @ 2020-01-03 23:32 帆酱 阅读(163) 评论(0) 推荐(0)
基于vue的自定义日历组件
摘要：如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误，请一定指出，以免误导大家、也误导我。 项目github地址 线上demo地址 使用步骤： 1、安装包 cnpm i 2、运行dev npm run dev 项目目录： 自定义 阅读全文
posted @ 2020-01-03 23:26 帆酱 阅读(3903) 评论(0) 推荐(0)
vue使用html2canvas实现移动端H5页面截图
摘要：html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。 点击查看：官方文档 点击查看：线上demo 安装 阅读全文
posted @ 2020-01-03 23:22 帆酱 阅读(2271) 评论(0) 推荐(0)
vue使用domtoimage实现移动端H5页面截图
摘要：dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量（SVG）或光栅（PNG或JPEG）图像的库。 它基于Paul Bakaus的domvas并且已被完全重写，修复了一些错误并添加了一些新功能（如Web字体和图像支持）。 github：点击查看 线上demo：点击 阅读全文
posted @ 2020-01-03 23:20 帆酱 阅读(3846) 评论(5) 推荐(0)
swiper5切换页面数据动态加载
摘要：如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。如果有什么错误，请一定指出，以免误导大家、也误导我。 swiper官方网址：点击查看 线上demo：点击查看 核心方法，在当前Slide切换到另一个Slide时执行： <script language="javascript"> va 阅读全文
posted @ 2020-01-03 23:10 帆酱 阅读(2876) 评论(0) 推荐(0)
H5使用photo-sphere-viewer.js实现360&#176;全景
摘要：官方网站：https://photo-sphere-viewer.js.org/ 线上demo：点击查看 需要引入的文件 <link rel="stylesheet" href="./css/photo-sphere-viewer.min.css"> <!-- 3D --> <script src= 阅读全文
posted @ 2020-01-03 23:07 帆酱 阅读(3596) 评论(14) 推荐(1)
H5 jq+canvas实现pc写字板功能
摘要：如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。 如果有什么错误，请一定指出，以免误导大家、也误导我。 线上demo1：点击查看 线上demo2：点击查看 实现此功能需掌握一些基本的canvas语法。 demo1代码： <!DOCTYPE html> <html> <head> < 阅读全文
posted @ 2020-01-03 22:54 帆酱 阅读(775) 评论(0) 推荐(0)
vue多语言转换的几种方法
摘要：一、静态转换 使用 Vue 插件 language-tw-loader 在打包时把本地的文字转换成繁体，动态加载的文字不会转换。也就是说接口返回的文字不会自动转换。 打包后无法再切换为简体。除非专门打一个简体的包。 使用方式 1、安装插件 npm i language-tw-loader --sav 阅读全文
posted @ 2020-01-03 22:50 帆酱 阅读(5324) 评论(0) 推荐(3)
echarts折线图单组数据配置
摘要：线上demo：https://my.weblf.cn/alone_page/echarts/line1.html 祥见代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co 阅读全文
posted @ 2020-01-03 22:42 帆酱 阅读(1188) 评论(0) 推荐(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, 阅读全文
posted @ 2020-01-03 22:39 帆酱 阅读(531) 评论(0) 推荐(0)