JS
文章平均质量分 82
谁看到我的小饼干
这个作者很懒,什么都没留下…
展开
-
vue给每个页面设置单独title
vue项目中给每个页面设置title1.安装 vue-wechat-titlenpm i vue-wechat-title -D2.在main.js中引入使用Vue.use(require('vue-wechat-title'));3.在路由route/index.js加入meta meta: { title: '标题', requireAuth: ...原创 2020-02-12 17:05:32 · 671 阅读 · 0 评论 -
在vue中如何使用阿里图标
vue项目中使用阿里图标前提,下载代码 先下载阿里图标https://www.iconfont.cn 选择自己想要的图标,添加入库使用方法先安装依赖包,否则会报错npm install css-loader --save将包下载后,放入assets文件夹下,修改名称为iconfont(可以不修改,仅为规范)修改文件夹下的iconfont.css文件,把src路径修...原创 2020-02-04 14:09:52 · 770 阅读 · 0 评论 -
js 使用md5加密 以及base64加密
md5 加密// 引入md5<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.js"></script>//使用md5()加密var userID = md5('userID')base64 加密// 创建base64对象var Base64={_keyStr:"ABCDEFGHI...原创 2019-12-16 10:21:48 · 443 阅读 · 0 评论 -
在vue中使用html2canvas,qrcanvas生成带二维码的截图功能
1,先安装插件依赖并且引入npm i -D html2canvasnpm install --save qrcode2,定义盒子,先隐藏二维码和图片3,引入插件,定义变量控制隐藏4,在mounted中,先生成出二维码,不做显示,用css先设置好二维码显示的位置5.接下来就是点击截图触发事件了,其中的一些html2canvas 的参数可以自己调试,图片生成后,在成功回调中将图片信...原创 2019-12-14 16:36:09 · 862 阅读 · 2 评论 -
js中如何获取url参数的值
/*** * @param name: url参数名(字符串) */ function urlDate(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).m...原创 2019-12-04 15:07:02 · 74 阅读 · 0 评论 -
h5页面禁止双击或者双指放大
大多情况下,为了省事,可以直接用但是存在个缺陷,就是如果页面需要双击放大,比如3D地图,就用不了了<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">也可以采用js方式控制,代码如下, //...原创 2019-12-02 17:31:53 · 2327 阅读 · 0 评论 -
h5页面唤醒本地APP
用的最简单的方式,点击跳转URL Scheme window.location.href = "mqq://"附上大佬收集的常用iOS URL Scheme附录 大全原创 2019-12-02 17:26:08 · 297 阅读 · 1 评论 -
h5在ios端 input/textarea 输入不了
原来是在写样式上,为了让文本不能选中复制,加入了* { -moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: auto; -ms-user-select: no...原创 2019-12-02 17:23:04 · 647 阅读 · 0 评论 -
vue中使用html2canvas和qrcanvas配合
1.第一步,装插件安装html2canvas : npm install html2canvas --save安装qrcanvas: npm i qrcanvas2.在需要使用的页面上引入import html2canvas from ‘html2canvas’import { qrcanvas } from ‘qrcanvas’;3.准备好html盒子<template>...原创 2019-11-21 17:42:09 · 419 阅读 · 0 评论 -
前端rem适配封装
复制就能用<script> var meta = document.createElement('meta') meta.setAttribute('http-equiv', 'Last-modified') var date = new Date().toString() meta.setAttribute('content', date) document.getEle...原创 2019-11-21 11:31:11 · 213 阅读 · 0 评论 -
解决跨域 jsonp 封装
// jsonp的封装 function jsonp(url, jsonpCallback, success) { let script = document.createElement('script') script.src = url script.async = true script.ty...原创 2019-11-20 15:45:29 · 111 阅读 · 0 评论 -
js 正则表达式入门
链接转载 2019-11-20 15:20:27 · 74 阅读 · 0 评论 -
js的防抖的简单封装
两者本质上的区别在于: 防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。// 两个版本1.非立即执行版本,也就是触发事件后加上wait时间触发函数 // 防抖 延迟执行版本 function shake(fn,wait){ let timeOut; return ()=>{ ...原创 2019-11-20 14:59:38 · 249 阅读 · 0 评论 -
淘宝中的css初始化样式
淘宝初始化代码: body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, se...原创 2019-11-18 16:43:55 · 167 阅读 · 0 评论 -
vue移动端使用clipboard实现复制功能
移动端实现复制功能1.先引入clipboard.js<script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.min.js"></script>2.加入按钮## 其中 :data-clipboard-text="复制的内容"<button class="copybtn" @click...原创 2019-11-14 17:20:55 · 838 阅读 · 0 评论 -
JS 储存cookie时间
setCookie(“close”,”1”,3); //保存1天function setCookie(name,value,hours,path,domain,secure){var cdata = name + “=“ + value;if(hours){var d = new Date();d.setHours(d.getHours() + hours);cdata += “; e...原创 2019-11-14 17:17:08 · 456 阅读 · 0 评论 -
判断浏览器是手机端还是pc端 以及判断安卓还是iOS
function IsPC() {var userAgentInfo = navigator.userAgent;var Agents = [“Android”, “iPhone”,“SymbianOS”, “Windows Phone”,“iPad”, “iPod”];var flag = true;for (var v = 0; v < Agents.length; v++)...原创 2019-11-14 17:16:20 · 719 阅读 · 0 评论 -
使用v-show时,当isshow:false时,在页面刷新的过程中,短暂显示一下的问题
使用v-show时,当isshow:false时,在页面刷新的过程中,isshow依然会短暂显示一下解决方法:<div v-show="isshow" v-cloak></div>设置css样式 [v-cloak] {display: none; }...原创 2019-11-14 17:11:18 · 1337 阅读 · 0 评论 -
h5页面防止左右滑出空白部分的问题
## h5页面防止左右滑出空白部分的问题解决方法:设置meta标签,以及css样式=><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">html,body{overflow-x:hidden;-webkit-overflow-scrolling...原创 2019-11-14 17:08:05 · 1270 阅读 · 4 评论 -
art-template过滤器处理时间戳
art-template过滤器处理时间戳1. 引入art-template.js2. <script src="/static/art-template.js"></script> 2.写模板<script type="text/html" id="artlist"> {{each data.list val}} <span>...原创 2019-11-14 11:02:02 · 304 阅读 · 0 评论 -
如何让html标签在页面中显示
如何让html标签在页面中显示<a href="http://{domain}/detail/id/1"> 看书 </a>正常写写一个a标签,在页面上输出是会变成下面这种 看书 如果想在页面上直接输出html标签,可以用下面两种方法:1,使用转义字符,将对应的"<“和”>"用转义字符& lt;和& gt;代替2,使用和标签包含在要显...原创 2019-11-08 12:04:39 · 1788 阅读 · 0 评论 -
使用Sortable拖拽排序
使用Sortable拖拽排序// 引入css<link href="__LIBS__/jquery-nestable/jquery.nestable.css" rel="stylesheet" type="text/css" />// 盒子 <ul id="items" class="list-group" data-orderid="{$id}"> ...原创 2019-11-06 11:31:04 · 384 阅读 · 0 评论 -
textarea 文本域指定位置添加内容
function getSelectedText(obj) { var userSelection; if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') { // ...原创 2019-11-06 10:00:22 · 1244 阅读 · 0 评论 -
jq拖拽文件实现进度条
js拖拽文件实现进度条最近遇到个需求,浏览器拖拽功能,并且实现显示进度条拖拽盒子省略了,自定义就行// 禁止浏览器的默认拖拽打开文件的事件 ,dropZone 拖拽区域盒子 var dropEle = document.querySelector('#dropZone'); dropEle.addEventListener('drop', function (e...原创 2019-10-28 11:32:04 · 281 阅读 · 0 评论 -
A链接点击下载不跳转页面
a链接点击下载不跳转页面要求:点击按钮在当前页面下载,并且不能跳转直接代码:$('.btn_xz').click(function(){ // 添加一个a标签 let ele = document.createElement('a') // 给a标签加入下载地址 ele.download = "../dot9too...原创 2019-10-24 12:16:36 · 4804 阅读 · 3 评论 -
封装简单的滚动节流
封装简单的滚动节流 /* * @param fn : 要执行的函数 * @param times : 时间间隔 */ function disablverb(fn,times){ // 声明一个开关 let time; return ()=>{ // 如果存在,则清除定时器 if(time) clearTimeout(ti...原创 2019-10-22 11:02:35 · 139 阅读 · 0 评论 -
使用art-template模板如何输出html标签
使用art-template模板如何输出html标签场景:查询数据库返回的 文本内容中,含有等html标签,输出到页面中时,被当成字符串输出,但这不是想要的结果。原本的写法时 {{html}} 此时如果html中含有标签,则不能被解析出来解决方法://改成这种写法{{#html}}//或者新版本写法{{@html}}此时就能达到效果!!!...原创 2019-10-21 16:27:00 · 3837 阅读 · 1 评论 -
解决swiper默认显示最后一张问题
swiper默认显示最后一张?在使用swiper轮播图的时候,用ajax动态加载swiper-slide,每次刷新默认会显示到最后一张,设置参数如下$(document).ready(function(){ var galleryThumbs = new Swiper('.gallery-thumbs', { slidesPerView: 1.5, spac...原创 2019-10-21 10:29:27 · 5074 阅读 · 1 评论