- 博客(34)
- 收藏
- 关注
RSS订阅原创 发送验证码倒计时 防刷新重置！！！
大于1则将存储的时间数字赋值给时间变量继续执行倒计时；2.页面加载时（刷新页面时）先获取存储的时间。1.记录倒计时的时间。3.判断存储的时间，不存在则正常初始化；
2023-09-20 16:51:35
201
原创 H5实现附件预览功能（doc/docx、xls/xlsx、ppt/pptx、pdf）
一、H5用以下方式即可实现：（钉钉小程序官方目前没有预览附件的API，也可用这种方法实现）doc/docx、xls/xlsx、ppt/pptx可直接用以下链接打开：注意：使用此方法，附件链接必须是域名。https://view.officeapps.live.com/op/view.aspx?src= + 文档urllet url = "https://view.officeapps.live.com/op/view.aspx?src=" + 文档url;//两种方式window.open（u
2022-01-21 16:55:58
8600
5
原创 uni小程序、H5如何调用钉钉的API
在script标签内引入钉钉api即可：<script> import * as dd from "dingtalk-jsapi";export default { //..... //引入后即可调用钉钉的API了，如预览图片 //预览图片方法 methods：{ previewImg(){ dd.biz.util.previewImage({ urls: arry,//图片地址列表 current: arry[0],//当前显示的图片链接 o
2022-01-21 15:45:34
2570
3
原创 微信小程序校验网络连接是否正常，无网络时给出提示
检查网络是否连接注意：由于getNetworkType是异步的，正常逻辑是判断出来网络类型后在相应的网络下做不同的操作，但业务逻辑复杂代码较多时，会造成代码结构混乱，不易阅读，所以简单用promise封装一下，return出网络状态。本案例就是点击按钮时判断网络是否连接，无网络给出提示即可。先判断网络状态： getNetwork () { let self = this; return new Promise((resolve, reject) => {
2021-12-29 23:04:07
4488
原创 用vue-pdf包实现pdf文件预览，支持分页
vue项目实现pdf文件预览功能下载vue-pdf包npm install --save vue-pdftemplate模板内容：//pdf组件<pdf :src="pdfFile" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdf"></pdf>//分页<div class="pageBut
2021-09-17 18:55:42
5309
7
原创 表格table，指定列定宽，其他列均分
给指定列定宽没有问题：在表头找到该列用table的width或style设置width即可实现；其他列均分也简单，只要给table设置一个属性即可：.table { table-layout: fixed;}
2021-08-25 15:54:04
1055
原创 sort实现日期排序
日期排序，支持升序或降序// 日期排序function dateSort(arr){ arr.sort(function(a,b){ return a > b?1:-1; //升序排列 //return a > b?-1:1; //降序排列 }) return arr;}let arr = ["2020-08-09","2020-11-22","2021-07-18","2022-12-22","2018-01-01"];
2021-08-23 17:45:21
2410
原创 propertychange实现输入框实时搜索，同时实现防抖和节流
propertychange一般用在jquery项目中，vue项目用watch即可实现输入框的实时监听。propertychange的绑定方法如下：<input type="text">$('input').on('input propertychange',function(){//当输入框内容发生变化即会触发此操作})简单介绍一下防抖和节流的原理和区别防抖：在事件触发n秒后，执行后续操作，如果在此时间内再次触发该事件，则重新计时。以输入框实时搜索为例，用定时器方式实现，代
2021-02-23 15:25:58
691
1
原创 自定义字体（艺术字）压缩 font-spider
font-spider官方文档叫字蛛。用font-spider压缩字体原理就是，将项目中用到的字体单独压缩，没有用到的字体不放入压缩文件中，使字体文件变小，所以此种方法就有一个弊端就是无法压缩动态生成的文字。准备：node环境（可能是废话…）具体过程如下：一、全局下载font-spidernpm install font-spider -g二、新建一个文件夹，文件夹下新建index.html、index.css，并且将原字体文件放到文件夹下在index.css声明该字体@font-face
2021-02-02 16:45:08
312
1
原创 watch监听路由 vue
用vue的侦听器–watch监听路由。注意：watch与methods同级别。 watch:{ //to是将要进入的路由相关信息，from是当前页面的路由信息 '$route' (to, from) { //to.path即为将要进入的路由 if(to.path == "/xxx"){ //操作 } } },...
2021-02-01 18:04:07
859
原创 vue项目axios封装，请求、响应拦截，统一处理
在src目录下新建文件夹request，request下新建文件axios.js。引入axios，如果有需要可再引入UI框架，做一些提示或弹窗。我的项目用的vant。import axios from 'axios'import { Toast } from 'vant'设置请求时间：超时后会在error的response抛出异常axios.defaults.timeout = 5000;请求拦截axios.interceptors.request.use(config => {/
2021-01-18 14:42:41
987
原创 使用vite构建vue3.0项目
全局安装vitenpm install -g create-vite-app进入想要新建项目的路径下新建create-vite-app yourProjectName进入到新建的项目路径下安装依赖并运行cd yourProjectNamenpm installnpm run dev到此新项目就搭建完成了，你会发现和脚手架搭建区别还是有的，vite默认端口是3000，vite默认不会让你选择路由、语法检测以及单元测试等，需要后期手动安装引入，而且我特意又用脚手架搭了一个vue2.0的项目
2020-10-28 11:32:24
1744
原创 获取验证码的倒计时 ，控制不能重复点击，重置计时器
//控制不能点击 .notclick { pointer-events: none; } <div class="getCodeBtn">获取验证码</div> var countDown = 60; //倒计时60s var timer = setInterval(function () { countDown--; var Inner
2020-08-25 16:47:56
358
1
原创 弹窗（动作面板）从底部滑入
<div class="outerDiv"> <div class="popInner"> <div class="optionOne">选项一</div> <div class="optionTwo">选项二</div> <div class="cancel">取消</div> <..
2020-08-25 16:34:46
557
原创 vue实现多语言（国际化）实例 -- vue-i18n
Vue项目用vue-i18n实现多语言！一看就会哦，超简单一 ：npm下载vue-i18n插件：npm i vue-i18n -S二 ：新建lang文件夹，在lang文件架下面新建需要支持的语言包文件以及配置文件index.js我的lang文件夹是放在根目录下的哦！三 ：写多语言配置文件第一步，index.js配置文件如下import Vue from "vue";import VueI18n from "vue-i18n";Vue.use(VueI18n);const messa
2020-05-22 17:04:27
735
原创 数组截取方法slice和splice的比较
slice()slice方法有两个参数，slice(start,end)，这两个参数为正数时可以看做是索引；为负数时，从数组的尾部开始数起，-1 指最后一个元素，-2 指倒数第二个元素…当只有一个参数时，返回的是该参数之后的所有元素。注意：返回的数组包含start索引处的元素，不包含end索引处的元素，且此方法不改变原数组。举例说明：//newArr的元素可以看成索引var newArr = [0,1,2,3,4,5,6,7]console.log(newArr.slice(0,3)) //输
2020-05-11 19:30:39
480
原创 vue实现点击箭头的旋转动画（收起展开）效果
实现方法：用vue动态绑定class的方法，实现用不同的class渲染箭头，达到箭头点击的旋转效果模板的内容：<img :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" src="arrow.png" alt="" @click="flag = !flag">data的变量定义：data(){...
2020-05-06 14:11:14
4386
1
原创 vue动态引入（按需引入）组件并传值
需求 就是有一个组件库，需要根据接口所传的组件类型按需引入生成页面//模板<template> <div class="hello"> <component v-for="(item,index) in componentArr" :key="index" :is="item.type" :data=item.data /> </di...
2020-04-20 11:12:37
3170
原创 jquery根据系统语言别实现多语言
实现多语言，中文简体、繁体，还有英文。移动端倪三种语言别分别是：中文简体zh-CN、中文繁体zh-TW、en-US。<p></p> //p标签//cdn引入jquery<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>var localLang=...
2019-12-11 19:14:40
489
1
原创 js实现复制粘贴的两种方法
方法一：复制文本框输入的内容，代码如下<input id="testInput" type="text" name="" value="复制的内容"><button onclick="Copy()">复制input的内容</button> function Copy() { var content = $('#testInput'); content...
2019-10-30 11:48:18
1191
原创 移动端禁止页面滑动
今天碰到一个问题，用$(‘html’).css(“overflow”,“hidden”)禁止滚动在移动端竟然无效，不知道什么原因，所以又试了几个移动端禁止滑动方法，供参考。方法一：（经测试有效）禁止滑动document.body.addEventListener('touchmove', function (e) { e.preventDefault()}, {passive: fals...
2019-10-10 18:41:59
2875
原创 jquery实现星级评分效果
效果图如下：html：<ul id="rating" class="rating"> <li class="rating-item rating" title="很不好"></li> <li class="rating-item rating" title="不好"></li> <...
2019-10-09 13:41:22
1341
2
原创 jquery修改textarea、input的placeholder属性（文字、颜色）
标签<textarea class="infoTextarea" name="" cols="40" rows="6" placeholder="请输入文字..."></textarea>css.infoTextarea.change::-webkit-input-placeholder { color: red;}jqueryvar info = ...
2019-09-06 12:52:55
6527
原创 禁止移动端键盘弹出的两种方法，亲测有效
第一种：标签内加事件，input标签内加οnfοcus=‘this.blur();’<input type="text" onfocus='this.blur();'>第二种：js方法$("#name").focus(function(){ document.activeElement.blur(); })有一个focusout()方法，可...
2019-09-03 14:05:59
2346
原创 css用边框实现空心三角形和实心三角形
空心三角形如图，最简单的方法就是写一个适当大小带边框的div，旋转使其成为菱形，因为旋转方向为顺时针所以去掉上边框和左边框，最后定位到需要的位置即可，代码如下：div { width: 10px; height: 10px; transform: rotate(45deg); border-bottom: 2px solid #aaaa; border-...
2019-07-31 10:36:55
542
原创 关于jQuery用css伪类:after为容器添加边框或去掉边框的问题
今天碰到一个问题是要去掉一个div的border，用border：none;没有用,发现border是用伪类加上去的，如下：.screenBox::after { border-bottom: 1px solid #E1E2E6; }直接用jquery改变css没有用，还要用伪类方法去掉，如下：$('.screenBox').append("<style>.mCommon_bas...
2019-07-26 14:11:07
1307
原创 js钟表的实现方法，格式为时分秒，如00:00:00
简单钟表的写法 <span class="textSpan"></span> var nowTime = new Date(); //实例化Date，获取当前日期时间 var myHours = nowTime.getHours() // 获取当前小时(0-23) var myMinu = nowTime.getMinutes() // 获取当前分...
2019-07-17 13:45:17
1647
原创 手写遍历生成json数组
a = [ “3”, “2”, “1”]b = [{id: “1”, name: “测试1”},{id: “2”, name: “测试2”}]根据a从b中取需要的字段组成新的json数组var jsonArr= []; //定义数组（全局）for(var i =0;i<a.length;i++){ for(var j =0;j<b.length;j++){...
2019-04-04 17:54:53
581
原创 ios软键盘弹出布局上移问题
如图：布局上移搜索框遮住搜索条目，影响搜索功能 // 兼容Android，ios 键盘弹起时，把搜索的数据顶上去影响布局和搜索功能 var h = document.body.scrollHeight // 用onresize事件监控窗口或框架被调整大小，先把一开始的高度记录下来 window.onresize = function () { // 如果当前窗口小于一开始...
2019-03-23 12:30:47
5281
原创 移动端列表左滑和ios系统默认上下滑动回弹效果的兼容性问题
移动端左滑事件与ios默认的上下滑动回弹效果冲突，左滑时可能触发上下滑动，解决方法如下：
2019-03-23 12:07:00
1191
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人